iFrame / WebView Integration

Offerwall integration guide (iFrame / WebView)

Use the hosted Offermaru Offerwall to show offers with almost no development work. This guide covers Web, Android and iOS integration.

Overview

The Offerwall is a responsive web page hosted at wall.offermaru.com. You open it with your App ID and user ID. Offermaru handles offers, tracking and payouts. You credit your users using server-to-server callbacks.

User taps a button like “Earn”, “Offers” or “Tasks” in your website / app.
You open the Offerwall URL in an iFrame / browser tab / WebView.
User completes offers.
Offermaru sends an S2S callback to your server with user_id, user_reward and other useful information.
Your server credits the user’s balance and returns HTTP 200.

Prerequisites

An Offermaru publisher account.
At least one app added in the Apps page.
The app’s App ID (e.g. 12568).
A stable internal user_id for each of your users.
A backend endpoint to receive S2S callbacks.

Your Offerwall link

In the app’s Offerwall - iFrame Integration section you’ll see your Offerwall URL like:

https://wall.offermaru.com/{APP_ID}?user_id={USER_ID}

Example for App ID 12568 and user ID user_123:

https://wall.offermaru.com/12568?user_id=user_123

{APP_ID} - your App ID from the dashboard.
{USER_ID} - your internal user ID (URL-encoded).

Web integration (iFrame)

On web you can embed the Offerwall in a section or modal using an iFrame:

<div style="height: 80vh;">
  <iframe
    src="https://wall.offermaru.com/12568?user_id=USER_123"
    style="width: 100%; height: 100%; border: none; border-radius: 16px;"
  ></iframe>
</div>

You can also open the Offerwall in a new tab or window instead of an iFrame.

Android integration (WebView)

When your user taps an “Offers” / “Tasks” button, open a full-screen Activity with a WebView pointing to the Offerwall URL.

val appId = 12568
val userId = currentUser.id   // Your internal user ID
val encodedUserId = URLEncoder.encode(userId, "UTF-8")

val url = "https://wall.offermaru.com/$appId?user_id=$encodedUserId"

webView.settings.javaScriptEnabled = true
webView.settings.domStorageEnabled = true
webView.loadUrl(url)

Use your own navigation controls (toolbar close button, back button, etc.) to allow users to exit the Offerwall. Make sure that when users click on offer's Start button like Start Offer, the offer destination URL is opened in external browser.

iOS integration (WKWebView)

On iOS you can either use WKWebView inside your app or open SFSafariViewController for a quick, browser-like experience.

let appId = 12568
let userId = currentUser.id     // Your internal user ID
let encodedUserId = userId.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) ?? userId

let urlString = "https://wall.offermaru.com/\(appId)?user_id=\(encodedUserId)"
guard let url = URL(string: urlString) else { return }

let webView = WKWebView(frame: view.bounds)
webView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
webView.load(URLRequest(url: url))
view.addSubview(webView)

Make sure that when users click on offer's Start button like Start Offer, the offer destination URL is opened in external browser.

Choosing a user ID

The user_id you send in the Offerwall URL is the primary key we use to identify the user in callbacks.

Use a stable internal ID that uniquely identifies the user (e.g. database primary key).
Avoid temporary values like session IDs.

S2S callbacks to reward users

When a user completes an offer, Offermaru sends an S2S callback to your server so that you can reward the user.

For a detailed guide on S2S callbacks, see the S2S Callbacks Guide.