Embed Happierleads screens
Show it in an iframe
Put the one-time link in an iframe, listen to the frame's messages and refresh when a session ends.
Ask your endpoint for a fresh link every time the page opens, put it in the iframe, done.
<iframe id="hl" title="Website visitors" style="width:100%;height:100%;border:0"></iframe>
<script>
fetch('/api/leads-embed?view=auto')
.then((r) => r.json())
.then(({ url }) => { document.getElementById('hl').src = url; });
</script>- One iframe per screen, each behind its own menu item: for example Website visitors (
view=auto) and Install tracking (view=install). - Never reuse a link. It works once; fetch a new one every time the screen is shown.
- Only the app addresses you saved in Embed settings can show it. Anywhere else the frame is blank.
Try it
No domain yet, so the field is open. Type any domain and click Verify: the check fails and the screen explains what to fix.
app.youragency.example/install
Messages from the frame
The frame tells your page what happens with postMessage. They carry no secrets and no brand name. Always check the origin:
const frameOrigin = new URL(url).origin;
let lastReload = 0;
window.addEventListener('message', (e) => {
if (e.origin !== frameOrigin) return;
if (e.data.type === 'session-ended' && Date.now() - lastReload > 30_000) {
lastReload = Date.now();
loadFreshLink(); // ask your endpoint again
}
});type | Extra fields | When |
|---|---|---|
ready | view, websiteId, expiresIn | The session opened |
page | path | The screen changed page inside the frame |
navigate | view | The frame switched between install and leads (for example once the pixel works): update your own menu if you like |
session-expiring | inMs | The session ends soon |
session-ended | reason | The session ended (its length ran out, or the key was revoked or embedding switched off): load a fresh link |
error | message | Something failed inside the frame (also an expired or already-used link) |
Keep it white label
Your users never see our name: the screen comes from your domain (One-time setup) and the messages carry no brand. Keep our name out of your own routes, page titles, iframe titles, menu items and error messages too; use your own words, such as Website visitors.
Next: billing: start a trial.