Embedding the Quiz

The supported way to embed a published quiz on your storefront is the [dino_discover] shortcode. Add a core Gutenberg Shortcode block to the page or post, paste the shortcode, and save. The quiz renders inline and the storefront bundle fires on the first interaction.

Basic usage

[dino_discover quiz="your-quiz-slug"]

The quiz attribute is the slug shown in Dino Discover → Quizzes. It also appears on the Builder’s Share tab.

Add the shortcode anywhere the WordPress shortcode handler runs — classic editor, block editor, widget area, theme template via do_shortcode(). Classic-theme and block-theme storefronts are both supported.

Attributes

Attribute	Values	Default	Notes
quiz	Quiz slug	— (required)	The published-quiz slug. If unpublished, the shortcode renders an empty container and the storefront returns 404 on the bootstrap call.
layout	inline, centred, full-width	inline	How the quiz fills its container. Invalid values silently fall back to inline.
launcher	inline, popup, slide-in	inline	Whether the quiz renders inline or is triggered by an event. Today only inline ships behaviour — popup and slide-in parse without error but fall back to inline rendering. See “Beta status” below.

Example with attributes:

[dino_discover quiz="winter-coats" layout="centred" launcher="inline"]

[SCREENSHOT: The shortcode block in the page editor with the dino_discover tag and three attributes.]

What renders on first load

The shortcode emits a small server-rendered container — variant-agnostic HTML, plus a ~1.5 KB inline bootstrap script. The full storefront bundle is not loaded until the shopper interacts with the bootstrap (clicks Start, scrolls into the launcher trigger, etc.).

This is deliberate — it means the host page stays fast even when the quiz is on a high-traffic landing page. The bootstrap response is variant-agnostic, immutable, and CDN-cacheable for a year; only the session and recommendation endpoints carry per-shopper state.

The storefront bundle budget

The storefront JS is built with preact/compat and a CI tripwire on its gzipped size:

• Long-term target: ≤12 KB gz.
• Current tripwire: 18 KB gz (transiently raised on 2026-05-22 to land the results-page and lead-capture surfaces). A follow-up to trim back to 12 KB is tracked in the repo.

If you’re touching the storefront and the bundle exceeds the tripwire, the build fails. The intent is that the budget never silently drifts.

Beta status

A few embedding modes are documented but not yet wired. As of 0.1.0:

• Native Gutenberg block: not shipped. Use the core Shortcode block to host [dino_discover].
• Popup launcher: parses, falls back to inline. The launcher="popup" attribute is accepted but the popup trigger isn’t wired yet.
• Slide-in launcher: parses, falls back to inline. Same story as popup.
• Top-level Embeds page: not shipped. The per-quiz Share tab is the place to find embed snippets.

These are tracked on the FAQ page’s “Beta gap list” section.

Templates and styling

The storefront templates live in includes/Storefront/templates/. They follow the standard WordPress theme override pattern — copy a template into your theme under dino-discover/storefront/<template-name>.php and WordPress will load yours instead.

A short list of design tokens is exposed as --dino-discover-* CSS custom properties; you can override them site-wide via the Settings page’s Styling section or per-theme via your stylesheet.

For deep customisation, the template loader exposes:

• A dino_discover_template_path filter for overriding the resolved template path before the loader requires it.
• A dino_discover_before_results action that fires immediately before the results template renders, for injecting markup around the panel.

The full list is in Hook Reference.

Programmatic embedding

If you’re rendering from a PHP template that doesn’t run the shortcode parser, call:

echo do_shortcode( '[dino_discover quiz="your-quiz-slug"]' );

Or, for full control, instantiate the renderer directly through the container:

$renderer = dino_discover_container()->get( \DinoDiscover\Storefront\Renderer::class );
echo $renderer->render_for_slug( 'your-quiz-slug', [
  'layout'   => 'centred',
  'launcher' => 'inline',
] );

The renderer enforces the published-only invariant — passing an unpublished slug returns an empty string and logs a debug message.

Common embedding patterns

• One quiz per landing page. The simplest pattern — drop the shortcode on a “Find your match” page, link to it from the navigation.
• Inline on a product category page. Some merchants put the quiz at the top of a category archive (via a Block theme template part) to steer browsers into the funnel.
• Multiple quizzes on one site. Each quiz has its own slug; you can embed several on the same page or use different quizzes per category. Sessions and analytics are per quiz.

What’s next

• Lead Capture Panel — the optional email gate.
• Results & Recommendations — the layout and customisation of the results panel.
• Question Builder — the upstream authoring side.
• REST API Reference — the underlying storefront endpoints.