> AffiliateOS Help Center. Index of every article for AI tools: https://www.affiliateos.ai/help/llms.txt # Embed the offerwall in an iframe on a web page Hosted Offerwall · For publishers · Updated 30 October 2026 Web version: https://www.affiliateos.ai/help/offerwall/embed-on-web-page Paste the iframe snippet into your page, fill in the signed-in user's ID and country each time the page renders, and give the frame room: 720 pixels tall to start. Your wall embeds on any site until a list of allowed sites says otherwise. ## Before you start - Your wall's snippet: **Docs**, then **Hosted Offerwall**, then **Copy snippet**, or the **Iframe** on your property's **Integrations** tab. [Set up your Hosted Offerwall](https://www.affiliateos.ai/help/offerwall/set-up-wall) shows where. - If your wall needs signed links, a server route that returns a fresh one. See [simple and signed links](https://www.affiliateos.ai/help/offerwall/simple-and-signed-links). ## Steps ### Paste the snippet where the wall goes ```html ``` Example: Pebble Rewards' page for user u_48213 in the US. Keep `source=iframe`. ### Fill in the user and country on your server Write the `uid` and `country` into the `src` when your server renders the page, from the user who is signed in. Leave `platform` off: the wall reads the browser and lists iPhone offers on iPhones and Android offers on Android phones. A desktop lists every platform. ### Give it room The wall is laid out for a phone: on a wide page its content sits in a centered column about 430 pixels wide. Start at a height of 720 pixels. To fit the frame to its content instead, listen for the wall's `height_changed` event and set the frame's height to the number it sends. [Listen for wall events](https://www.affiliateos.ai/help/offerwall/listen-for-wall-events) has the code. ### Check which sites may frame it Your wall has a list of allowed origins. An empty list means any site can frame it, which is how the wall that came with your account starts. A wall you created for a website property in **Properties & Apps** allows that website's origin only. An origin is the scheme, host and port together, so `https://pebble.example` and `https://www.pebble.example` are two different origins. On a site that isn't on the list, the browser refuses to show the frame and the wall's events don't reach the page. The dashboard has no screen to edit the list: email [hello@affiliateos.ai](mailto:hello@affiliateos.ai) with your wall ID and the origins you need. ### Check it worked Sign in to your site as a test user and open the page. The wall shows your rewards, in your currency, for the country you sent. Add `&testMode=1` to the `src` to tap **Get** on an offer without being sent to the advertiser. [Test your wall before launch](https://www.affiliateos.ai/help/offerwall/test-before-launch) covers the rest. ## When a user taps an offer App stores and advertiser pages refuse to load inside frames, so inside an iframe the wall never sends the frame there. On each tap it: 1. Sends your page an `offer_redirect` event with the destination. 2. Opens the offer in a new tab. The tab is opened during the tap itself, which is what popup blockers allow. 3. If the browser blocked the tab anyway, sends an `error` event with `redirect_blocked` and tries to move your whole page to the offer. > **Don't open the offer yourself as well.** The wall already opens the tab. Navigating on `offer_redirect` too fires the tracking link twice and leaves the user with two pages. Treat the event as a notice. ## The close button Inside an iframe the wall shows a close control in its top right corner (a check mark, labelled "Close offerwall"). It can't remove itself from your page: it sends a `close_requested` event, and your page hides or removes the frame. If your page has its own close button, add `&close=hide` to the `src` and the wall hides its control.