# Web

## 1. Integration

{% hint style="warning" %}
**Before you start** 

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.10/basic-integration/setting-up-your-app). Once completed, you will receive a unique 8-digit app ID.
{% endhint %}

{% hint style="info" %}
You can download the Sample integration from [GitHub](https://github.com/GreedyGame/demo-offerwall-web)
{% endhint %}

<figure><picture><source srcset="https://content.gitbook.com/content/wtFu5cQcg9ZXDSngP2aN/blobs/pZAkfHGAYoKlDM5kK29m/wow_flow_dark.png" media="(prefers-color-scheme: dark)"><img src="https://content.gitbook.com/content/wtFu5cQcg9ZXDSngP2aN/blobs/LswXTxEAv7IAMykYqwhk/Wow_flow%20(1).png" alt=""></picture><figcaption></figcaption></figure>

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

&#x20;**Parameters**

| Parameters              | Description                                                                                                                                                                     |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **app\_id** (Required)  | This is the unique identifier for your app, required for integration.                                                                                                           |
| **user\_id** (Required) | A unique identifier for each user, required to track their activity on the offerwall. We recommend using a UUID as the user\_id.                                                |
| **idfa** (Optional)     | For iOS integrations Include the **idfa** as a parameter when launching the Web Offerwall. This helps enhance tracking accuracy and plays a key role in fraud prevention.       |
| **ga\_id** (Optional)   | For Android integrations Include the **ga\_id** as a parameter when launching the Web Offerwall. This helps enhance tracking accuracy and plays a key role in fraud prevention. |

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 sandbox = true; // A flag to toggle sandbox mode
const offerwallUrl = `https://wow.pubscale.com?app_id=${appId}&user_id=${userId}&sandbox=${sandbox}`;

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.10/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.10/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.10/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.10/basic-integration/android-integration), [React Native](https://pubscale.gitbook.io/offerwall-sdk/1.0.10/basic-integration/react-native), and [Unity](https://pubscale.gitbook.io/offerwall-sdk/1.0.10/basic-integration/unity), which offer more secure and efficient integration methods. Please consider using these SDKs for better integration.
{% endhint %}