Riddle Examples

Working, copy-pasteable examples for building with Riddle. Every example is a self-contained page with the code you need and, where it makes sense, a live Riddle you can interact with.

Data Layer

Push values from your website into a Riddle, and read values back out.

• Push website data into a Riddle — the general pattern for passing data from your page into a Riddle.
• Create a Calculator — use the Data Layer to build a calculator on top of a Riddle.
• Vote via Data Layer — submit a vote programmatically.
• Change Palette via Data Layer — restyle a Riddle at runtime.
• Data Layer variables in ad slots — pass targeting values into an ad slot.
• Data Layer variables in Project ad slots — the same, for Project-level ad slots.
• Embedding a login form in an Ad / iFrame — run your own login form inside a Riddle.

Embed Code

Different ways to get a Riddle onto your page.

• Embed code example — the standard embed code, explained.
• Embed Riddle in modern frameworks — embedding in Vue, React and friends.
• Riddle embed webcomponent — use the <riddle-embed> web component.
• Display your Riddle as an overlay modal — open a Riddle in a modal instead of inline.
• Load the Riddle embed script in your site's header — preload the script for faster rendering.

JS Events

React to what players do inside a Riddle.

• Event logger — log every Riddle event to the console.
• Saving Riddle events to local storage — persist event data in the browser.
• Use Riddle as entrypoint — gate content behind a Riddle.

PDF Certificate

Turn a quiz result into a personalised PDF certificate.

• Create a PDF certificate with PHP — plain PHP with FPDF/FPDI.
• Create a PDF certificate with Laravel — the same flow in Laravel.
• Create a PDF certificate with Symfony — the same flow in Symfony.

Ad Examples

Serve and refresh ads around and inside a Riddle.

• Ad refresh outside the Riddle embed — refresh your page's ads as the player answers.
• Ad refresh inside the Riddle embed — refresh ads placed inside the Riddle.
• Dynamic ad size in Riddle — resize an ad slot to fit its creative.
• Load your own form in your Riddle — render a custom form inside a Riddle.

Webhook

Receive Riddle results on your own server.

• Webhook Receiver — generate a temporary receiver URL and inspect incoming payloads.
• Connect Riddle to Supabase — write webhook data straight into Supabase.

Riddle API

Read and create Riddles programmatically.

• Retrieve Riddle list — list the Riddles in your account.
• Retrieve Riddle details — fetch a single Riddle.
• Build a Riddle via API — create a Riddle from code.
• Build a Riddle from spreadsheet data — turn rows into questions.
• Export Riddle content — export a Riddle's content.

Mobile apps

• Riddle on iOS and macOS — embed a Riddle in a Swift app.
• Riddle on Flutter — embed a Riddle in a Flutter app.