Embed the offerwall in an iframe on a web page

• 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 shows where.
• If your wall needs signed links, a server route that returns a fresh one. See simple and signed links.

1. 01

   Paste the snippet where the wall goes

   HTMLCopy

   <iframe
     src="https://offerwall.affiliateos.xyz/w/owapp_your_wall?uid=u_48213&source=iframe&country=US"
     style="width:100%;height:720px;border:0"
     allow="clipboard-write"
   ></iframe>

   Example: Pebble Rewards’ page for user u_48213 in the US. Keep source=iframe.

2. 02

   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.

3. 03

   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 has the code.

4. 04

   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 with your wall ID and the origins you need.

5. 05

   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 covers the rest.

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.

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.