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:resize
events so the parent page always fits the offerwall content. - Analytics hooks: Listen for
rapidoreach:ready
,rapidoreach:load
, orrapidoreach:error
on 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.