# Web Offerwall

## Eligible Placement & AdSlot Combinations <a href="#eligible-placement-and-adslot-combinations" id="eligible-placement-and-adslot-combinations"></a>

The below table shows all Placement & AdSlot Type combinations that allow you to utilize the Web Offerwall integration.

| Placement Type | AdSlot Type | Eligible Integration Type |
| -------------- | ----------- | ------------------------- |
| Website        | Offerwall   | Web Offerwall             |

{% hint style="danger" %}
If you integrate the Web Offerwall while using a different Placement & AdSlot combination in the ayeT-Studios dashboard, you won't be able to initialize the Offerwall.
{% endhint %}

## Utilization for Desktop, Mobile Web & In-App <a href="#utilization-for-desktop-mobile-web-and-in-app" id="utilization-for-desktop-mobile-web-and-in-app"></a>

Technically, the Offerwall has to be implemented by opening a new browser tab or loading the Offerwall link inside an iframe.

This type of Web Offerwall is intended to be called directly in an actual browser and is not very well suited for webview (in-app) integration. For this type of integration, please take a look at our seamless In-App integrations by checking out our available SDKs, Wrappers and Plugins.

{% hint style="info" %}
The **Web Offerwall** can nevertheless be used in-app if you follow a few guidelines

* Your placement has to be a "Website" placement
* You have link out of your app to open the Web Offerwall in a mobile browser

Please follow the Integration Best Practises.
{% endhint %}

### Integration Best Practices <a href="#integration-best-practises" id="integration-best-practises"></a>

| Platform   | Integration Best Practise                                                                                       | Offers                                                                                                                                                                 |
| ---------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Desktop    | Open the web offerwall in a new tab or iframe.                                                                  | The web Offerwall shows web and mobile offers to the user. Users can send mobile offers to their mobile devices.                                                       |
| Mobile Web | Open the web offerwall in a new tab or iframe.                                                                  | The web offerwall adjusts its layout if users access via a mobile device. I.e. for accessing via an Android device, users will see elibile Android offers to complete. |
| In-App     | Create a button in your app that leads users into their mobile browser and into the ayeT-Studios Web Offerwall. | The web offerwall shows mobile offers according the the user's device only.                                                                                            |

## Getting Started

Before you start with the integration, make sure you:

* [x] Create an Account
* [x] Add a Placement
* [x] Add an AdSlot

You will find more details here:

{% content-ref url="../../dashboard-setup" %}
[dashboard-setup](https://docs.ayetstudios.com/v/product-docs/dashboard-setup)
{% endcontent-ref %}

## Your Browser Offerwall Link - Mandatory Parameters <a href="#your-browser-offerwall-link-mandatory-parameters" id="your-browser-offerwall-link-mandatory-parameters"></a>

The URL template for our web offerwall looks like this:

```
https://offerwall.ayet.io/offers?adSlot={ADSLOT_ID}&externalIdentifier={YOUR_USER_IDENTIFIER}
```

To retrieve the URL for one of your web offerwall adslots, click on "Edit" next to an AdSlot under *Placements / Apps* and retrieve the *Integration URL* in the modal.&#x20;

URL Parameters:

<table><thead><tr><th width="230">Parameter</th><th width="121.33333333333331">Mandatory</th><th>Description</th></tr></thead><tbody><tr><td>externalIdentifier</td><td>yes</td><td>Your identifier for the calling user - this is mandatory, has to be minimum 3 characters and allows you to attribute our Server2Server conversion callbacks to a specific user (returned in {uid})</td></tr><tr><td>custom_1</td><td>no</td><td><p>Custom parameter you can pass to the Offerwall Entry Link in the form of: &#x26;custom_1={YOUR_CUSTOM_PARAMETER}</p><p>You can get this variable back via conversion callbacks</p></td></tr><tr><td>custom_2</td><td>no</td><td><p>Custom parameter you can pass to the Offerwall Entry Link in the form of: &#x26;custom_2={YOUR_CUSTOM_PARAMETER}</p><p>You can get this variable back via conversion callbacks</p></td></tr><tr><td>custom_3</td><td>no</td><td><p>Custom parameter you can pass to the Offerwall Entry Link in the form of: &#x26;custom_3={YOUR_CUSTOM_PARAMETER}</p><p>You can get this variable back via conversion callbacks</p></td></tr><tr><td>custom_4</td><td>no</td><td><p>Custom parameter you can pass to the Offerwall Entry Link in the form of: &#x26;custom_4={YOUR_CUSTOM_PARAMETER}</p><p>You can get this variable back via conversion callbacks</p></td></tr><tr><td>custom_5</td><td>no</td><td><p>Custom parameter you can pass to the Offerwall Entry Link in the form of: &#x26;custom_5={YOUR_CUSTOM_PARAMETER}</p><p>You can get this variable back via conversion callbacks</p></td></tr></tbody></table>

## Conversion Callbacks & Currency Handling <a href="#conversion-callbacks-and-currency-handling" id="conversion-callbacks-and-currency-handling"></a>

Learn about:

* Setting up callbacks
* IP Whitelists
* Securing callbacks using HMAC Security Hash
* Testing callbacks

Click on the link below:

{% content-ref url="../../callbacks-and-testing" %}
[callbacks-and-testing](https://docs.ayetstudios.com/v/product-docs/callbacks-and-testing)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ayetstudios.com/v/product-docs/offerwall/web-integrations/web-offerwall.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.