RapidoReach JavaScript Widget Integration
Drop a single script tag on your page and the RapidoReach offerwall will render itself – no server work required.
What you need
- Your RapidoReach App ID (available in the publisher dashboard).
- A way to identify each user in your product (internal member ID, username, etc.).
- A page section that is at least 320px wide and 600px tall.
3‑step setup
- Add a container where the offerwall should appear:
<div id="rapidoreach-offerwall"></div> - Paste the widget script right after the container. Replace the placeholders with your values and ensure you output the end-user ID dynamically.
<script
src="https://www.rapidoreach.com/ofw/rapidoreach-widget.min.js"
data-app-id="YOUR_APP_ID"
data-end-user-id="{{ CURRENT_USER_ID }}"
data-container="#rapidoreach-offerwall"
data-height="720px"
data-loader-text="Finding surveys for you…"
></script> - Deploy. That’s it — the widget calls RapidoReach, generates the signed UID for you, and loads the offerwall. Rewards and callbacks will reference the same user ID you passed in.
Tip: keep the container width fluid (e.g.
width:100%) so the widget can scale to different devices.
Optional tweaks
Add or remove attributes on the script tag as needed.
| Attribute | What it does |
|---|---|
data-width, data-height, data-min-height | Control iframe sizing (100%, 760px, etc.). Defaults: width:100%, height:700px, min-height:600px. |
data-show-loader | Set to false to hide the default “Loading” message. |
data-loader-text, data-loader-color, data-loader-background | Customise the loader copy and colours. |
data-border, data-border-radius, data-box-shadow | Add basic styling without writing CSS. |
data-language, data-locale | Forward language/locale preferences (e.g. data-language="es"). |
data-param-* | Appends extra query parameters (data-param-ref-code="sidebar" → ?refCode=sidebar). |
data-user-id | Provide a pre-generated RapidoReach UID instead of letting the widget build one. Rarely needed. |
If you ever need to host the UID service yourself, set data-uid-endpoint to your own URL — otherwise ignore it and let RapidoReach handle the signature.
Behaviour notes
- Automatic resizing: The iframe posts
rapidoreach:resizeevents so the parent page always fits the offerwall content. - Analytics hooks: Listen for
rapidoreach:ready,rapidoreach:load, orrapidoreach:erroron the container if you want to trigger custom logic. - Single source of truth: The UID the widget generates is the same value returned in your callback, so you can credit the correct user immediately.
Need help? Email developers@rapidoreach.com with the URL of your integration and any console errors you see.