Login & personalization · Demo 2 of 4
Logged-in readers only, login inside the Riddle
Guests who open this quiz get the site's own login form right inside the Riddle. After signing in they play on, and the site session is created too, without a page reload.
Riddle features: data layer logic + Ad block iframe
Setup: about 30 minutes
Needs a login page Riddle may frame
Live Riddle
Quiz · 5 questions
Switch to “Guest view” to see the login form inside the Riddle. Logged-in readers go straight to the questions.
[[dg-browsernote]]
[[dg-demologin demo-reader demopassword]]
What just happened
The Riddle asks your site to log the reader in.
01
Riddle checks is_logged_in
The intro block branches on the data layer value. Members skip ahead to the questions, guests go to an Ad block.
02
The Ad block shows your login page
Instead of an ad, the block frames your own login form. Passwords go to your server and never touch Riddle.
03
The form reports back
After a successful login the form tells the Riddle to continue and tells the page to update the data layer. A bridge creates the site session.
Build it yourself
The code and the Riddle settings.
1 · On your login page (inside the Riddle)
After the login succeeds, send two messages, each to one exact origin.
// let the Riddle continue past the Ad block
window.parent.postMessage(
{ 'ad-iframe-complete': true }, 'https://www.riddle.com');
// tell the article page who just logged in
window.top.postMessage(
{ type: 'riddle-login-sync', payload: { display_name: name } },
'https://your-site.com');
On the article page, listen for that message and update the data layer.
window.addEventListener('message', function (e) {
if (e.origin !== 'https://your-site.com') return;
if (!e.data || e.data.type !== 'riddle-login-sync') return;
window.riddleDataLayer.push(
{ key: 'is_logged_in', value: '1' },
{ key: 'display_name', value: e.data.payload.display_name }
);
});
2 · In the Riddle Creator
One branch, one Ad block, no custom code inside the Riddle.
- Publish → Data layer: add is_logged_in and display_name.
- Logic: on the intro block, if is_logged_in equals 1 go to the questions, otherwise to the Ad block.
- Ad block → iframe: your login page URL, about 250 px high, next button hidden.
- Your login page: allow framing by https://www.riddle.com and send the two messages after login.
Privacy & security
Credentials stay on your site.
- The login form is your page in an iframe. Riddle never sees the password.
- Target every postMessage at an exact origin, never '*', and check e.origin when you listen.
- Allow framing of the login page for https://www.riddle.com only (Content-Security-Policy frame-ancestors).
- Browsers with strict tracking protection (Brave, Safari, Firefox in strict mode) block cookies inside third-party frames, so the framed login can fail there. Offer a link to your normal login page as a fallback, or log readers in on your own page as in demo 1.
Next demo · 3 of 4