Login & personalization · Demo 3 of 4
Popup login that moves the Riddle forward
Some logins can't run in a frame: single sign-on, social login, a separate account domain. Here the Riddle shows a login button, your login opens in a popup, and the quiz continues once the reader is signed in.
Riddle features: data layer logic + Ad block iframe
Setup: about 30 minutes
Works with SSO and social login
Live Riddle
Quiz · 5 questions
Switch to “Guest view” to see the login button. Allow popups for this site if your browser asks.
[[dg-browsernote]]
[[dg-demologin demo-reader demopassword]]
What just happened
A small launcher page bridges the popup and the Riddle.
01
Guests reach the login block
The intro block branches on is_logged_in, exactly as in demo 2. Members play straight away.
02
A launcher opens the popup
The Ad block frames a tiny launcher page with one button. A click opens your real login page in a popup window.
03
Popup closes, quiz continues
After login the popup tells the launcher, and the launcher sends ad-iframe-complete to the Riddle.
Build it yourself
The code and the Riddle settings.
1 · The launcher page (inside the Riddle)
One button that opens the popup, plus a listener that lets the Riddle continue.
<button onclick="window.open('/login-popup/', 'login', 'width=420,height=620')">
Log in
</button>
<script>
window.addEventListener('message', function (e) {
if (e.origin !== 'https://your-site.com') return;
if (e.data && e.data.type === 'login-complete') {
window.parent.postMessage(
{ 'ad-iframe-complete': true }, 'https://www.riddle.com');
}
});
</script>
In the popup, after a successful login:
window.opener.postMessage(
{ type: 'login-complete' }, 'https://your-site.com');
window.close();
2 · In the Riddle Creator
The same branch as demo 2, a different page in the Ad block.
- Publish → Data layer: add is_logged_in and display_name.
- Logic: if is_logged_in equals 1 go to the questions, otherwise to the Ad block.
- Ad block → iframe: the launcher page URL, next button hidden.
- Launcher page: allow framing by https://www.riddle.com.
Privacy & security
Popups only on a click.
- Open the popup from the button's click handler, or popup blockers stop it.
- The login runs on your domain in a normal window, so SSO and social login work unchanged.
- Send and check messages for exact origins only.
- Browsers with strict tracking protection (Brave, Safari, Firefox in strict mode) may block the launcher page inside the Riddle or its messages. Test them, and offer a plain link to your login page as a fallback.
Next demo · 4 of 4