# Web Offerwall

{% hint style="danger" %} <mark style="color:red;">Pre-approval from PubScale team is required for Web offerwall integration. Please contact your account manager or reach out to support before starting this integration.</mark>  [<mark style="color:red;">Learn More</mark>](https://pubscale.gitbook.io/offerwall-sdk/1.0.9/faqs#how-to-approval-for-web-integration)
{% endhint %}

## 1. Integration

{% hint style="warning" %}
**Before you start**&#x20;

To set up the PubScale Offerwall, you’ll need to add your app to our platform. Follow this guide for instructions on [how to set up your app](https://pubscale.gitbook.io/offerwall-sdk/1.0.9/basic-integration/setting-up-your-app). Once completed, you will receive a unique 8-digit app ID.
{% endhint %}

<figure><picture><source srcset="https://1235736282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9dUUmbZ8oNwa2CoHqvab%2Fuploads%2Fxw7aKlgdFzQSnMX3ZTEu%2Fwow_flow_dark.png?alt=media&#x26;token=d57ae4fc-140d-4475-b793-7395cacc4527" media="(prefers-color-scheme: dark)"><img src="https://1235736282-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9dUUmbZ8oNwa2CoHqvab%2Fuploads%2FLJHdDEvW1QbJHL6t2Mhj%2FWow_flow%20(1).png?alt=media&#x26;token=d8ce3cf0-7d40-4a0c-ba09-dba4a24d39b3" alt=""></picture><figcaption></figcaption></figure>

To integrate the PubScale Offerwall, you need to provide a set of mandatory parameters for proper configuration.

**Mandatory Parameters**

| Parameters   | Description                                                                           |
| ------------ | ------------------------------------------------------------------------------------- |
| **app\_id**  | This is the unique identifier for your app, required for integration.                 |
| **user\_id** | A unique identifier for each user, required to track their activity on the offerwall. |

To integrate the PubScale Web Offerwall into your website, you have the following options:

### **1.1. Using an iframe**:&#x20;

Place the following iframe in your HTML:

```html
<iframe id="pubscale-wow-iframe" src="https://wow.pubscale.com?app_id={app_id}&user_id={user_id}"></iframe>
```

### **1.2. Using a Direct Link**:&#x20;

Create a direct link to the PubScale Offerwall using an anchor tag. It is recommended to use an image or button for better user experience:

```html
<a href="https://wow.pubscale.com?app_id={app_id}&user_id={user_id}">
  <img src="path_to_your_image.png" alt="PubScale Offerwall">
</a>
```

### **1.3. Using JavaScript:**&#x20;

Open the offerwall link programmatically using `window.open`. This provides flexibility for custom implementations.

```javascript
const appId = "your_app_id"; // Replace with your app ID
const userId = "your_user_id"; // Replace with your unique user ID
const offerwallUrl = `https://wow.pubscale.com?app_id=${appId}&user_id=${userId}`;

window.open(offerwallUrl, '_blank');
```

## 2. Setup Server-to-Server(S2S) callbacks <a href="#id-3.-test-the-offerwall" id="id-3.-test-the-offerwall"></a>

Set up the Server-to-Server (S2S) callbacks to receive instant updates whenever a user completes an offer and earns a reward. When an offer is completed, our server will send a notification to the configured callback URL. This callback provides the necessary information to process and verify the reward for the user in your application. [Learn more.](https://pubscale.gitbook.io/offerwall-sdk/1.0.9/server-to-server-s2s-callback-configuration)

## 3. Test the OfferWall <a href="#id-3.-test-the-offerwall" id="id-3.-test-the-offerwall"></a>

{% hint style="info" %}
Please use the sandbox environment for testing purposes to get instant callbacks and rewards. To learn how to enable the Sandbox environment, [click here](https://pubscale.gitbook.io/offerwall-sdk/1.0.9/sandbox-environment/sandbox-environment).
{% endhint %}

To ensure your OfferWall integration is working perfectly, follow these steps during the testing phase.

* Open the web offerwall and verify that all offers are displayed correctly.
* Complete an offer and confirm that a callback is received from PubScale server to your server. For the sandbox environment, ensure the callback URL is configured properly to receive sandbox callbacks.
* Ensure the hashing technique used matches the one specified in the documentation.
* Verify that the reward value received matches the value displayed for the offer.
* Confirm that the callback is received only from PubScale's [whitelisted server IPs](https://pubscale.gitbook.io/offerwall-sdk/1.0.9/s2s-callback-configuration/ip-whitelist).&#x20;

{% hint style="warning" %}
While you can use the Web Offerwall in an Android app through a WebView or Custom Chrome Tabs, we have observed better performance and fewer chargebacks when using PubScale's dedicated SDKs. PubScale provides dedicated SDKs for [Android](https://pubscale.gitbook.io/offerwall-sdk/1.0.9/basic-integration/android-integration), [React Native](https://pubscale.gitbook.io/offerwall-sdk/1.0.9/basic-integration/react-native), and [Unity](https://pubscale.gitbook.io/offerwall-sdk/1.0.9/basic-integration/unity), which offer more secure and efficient integration methods. Please consider using these SDKs for better integration.
{% endhint %}


---

# 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://pubscale.gitbook.io/offerwall-sdk/1.0.9/basic-integration/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.