` anywhere on your page where you want the widget to appear. Give it an `id` so the script can find it. ```html theme={null}

``` You can name the `id` anything you like. Set the height and width to match your layout. *** ## Step 2 — Add the Script Snippet Paste this snippet on the same page, anywhere after the container div (or in a `` script that runs after DOM ready). ```html theme={null} ``` Replace `YOUR_APP_ID` with your **Publisher App ID** from the Prime Earn dashboard, and `USER_UNIQUE_ID` with the current user's unique identifier in your system (same value you use as `uuid` in the IFrame integration). Never hardcode a real user ID as a string literal. Always inject it server-side or from your authentication context so each user sees their own personalised offer list. *** ## Step 3 — Configure Parameters All configuration goes inside `window.psConfig`. The table below covers everything a publisher needs to set up and run the integration correctly. ### Required | Parameter | Type | Description | | ----------- | ------ | -------------------------------------------------------------------------------- | | `container` | string | CSS selector of the element the widget mounts into (e.g. `"#primeearn-offers"`). | | `appId` | string | Your Publisher App ID. Available in the Prime Earn dashboard. | | `userId` | string | Unique, persistent identifier for the end user in your system. | ### User Attributes Pass as many of these as you have available. The more context you provide, the better the offer targeting. | Parameter | Type | Description | | ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | `maid` | string | Mobile Advertising ID — **IDFA** on iOS or **GAID** on Android. Must be passed when available; significantly improves campaign match rates. | | `platform` | string | Host platform: `web` (default), `ios`, `android`. | | `source` | integer | Numeric traffic source ID. Use the ID from the lookup table below. | | `network` | integer | Numeric network ID. Use the ID from the lookup table below. | | `placement` | string | Describes where in your app the widget is placed (e.g. `post_level`, `main_menu`). Helps compare performance across multiple placements. | **Source & Network ID Reference** Pass the numeric `ID` as the value for both `source` and `network`. Choose the row that best describes how the user arrived in your app. | ID | Network | Source type | | -- | ------------------------ | --------------- | | 1 | Google | Paid UA | | 2 | Facebook | Paid UA | | 3 | Instagram | Paid UA | | 4 | Organic Google | Organic | | 5 | Unknown | Other | | 6 | Other | Other | | 7 | Referral / Tell a friend | Organic | | 8 | Apple Search Ads | Paid UA | | 9 | TikTok Ads | Paid UA | | 10 | Bidease | Paid UA | | 11 | Mintegral | Paid UA | | 12 | AppLovin | Paid UA | | 13 | iOS organic | Organic | | 14 | IronSource / Unity Ads | Paid UA | | 15 | Moloco | Paid UA | | 16 | Liftoff | Paid UA | | 17 | Vungle | Paid UA | | 18 | Email | Organic / Owned | | 19 | Push notification | Organic / Owned | ### Layout | Parameter | Type | Default | Description | | ----------- | ------ | ----------- | --------------------------------------------------------------------------------- | | `layout` | string | `"default"` | `"default"` renders a grid, `"vertical"` a list, `"horizontal"` a carousel row. | | `columnQty` | number | `3` | Number of columns in the grid. Only applies when `layout = "default"`. | | `limit` | number | `12` | Maximum number of offers to show. Applies to `vertical` and `horizontal` layouts. | ### Localisation & Currency | Parameter | Type | Default | Description | | -------------- | ------ | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `language` | string | auto | Interface language. Use an ISO 639-1 code (e.g. `"en"`) or a full locale (e.g. `"en-US"`). Currently only English (`"en"` / `"en-US"`) is supported. Leave empty to auto-detect. | | `localization` | string | `"en-US"` | Full locale used for number and currency formatting (e.g. `"de-DE"`, `"fr-FR"`). | | `currency` | string | — | Override the currency label shown next to reward amounts. | *** ## Step 4 — Choose a Module The `module` parameter controls what the widget renders. For offers and games, use one of these two options: ### `offers` — Full Offers Wall Renders a full scrollable list of available offers and games for the user. ```js theme={null} window.psConfig = { container: "#primeearn-offers", appId: "YOUR_APP_ID", userId: "USER_UNIQUE_ID", module: "offers", }; ``` offers module layout

### `offers-carousel` — Horizontal Carousel Renders a compact, horizontally scrollable row of offers — ideal for embedding inline within a page alongside other content. ```js theme={null} window.psConfig = { container: "#primeearn-carousel", appId: "YOUR_APP_ID", userId: "USER_UNIQUE_ID", module: "offers-carousel", limit: 10, }; ``` offers-carousel module layout

Use `offers-carousel` for compact placements like a homepage sidebar or a reward teaser section. Use `offers` for a dedicated offers page where users expect to browse the full list. *** ## Step 5 — Customize the Design You can override the widget's colors and visual style using the `customAppDesign` object. Pass any CSS variable overrides you want to apply: ```js theme={null} window.psConfig = { container: "#primeearn-offers", appId: "YOUR_APP_ID", userId: "USER_UNIQUE_ID", module: "offers", customAppDesign: { "--p-primary-500": "#5B6CFF", // primary accent color "--ps-pages-bg": "#0F1115", // background color }, }; ``` Contact your account manager to get the full list of available CSS variables for your integration. *** ## Full Example ```html theme={null}

```