Skip to content
Dino Discover Dino Discover

Preview & Test

The Preview button in the Builder top bar opens a storefront-style preview of your in-progress draft in a new browser tab. It’s the only place in Dino Discover where a draft is rendered through the shopper-facing pipeline — so you can sanity-check the flow before you publish.

The preview reads the draft. Every other path on the site reads only published snapshots.

[SCREENSHOT: The Builder’s Preview button at the top of the workflow tabs.]

Opening Preview

Section titled “Opening Preview”

In the Builder, click Preview in the top bar. A new tab opens with the storefront quiz rendered against your current draft. You can step through questions, see the recommendation, and verify the layout — all without committing the draft.

The Builder fetches a one-shot nonce when you click Preview. The new tab uses that nonce to call GET /wp-json/dino-discover/v1/storefront/quizzes/{slug}/draft-preview-bootstrap, which is the single endpoint on the entire site that’s allowed to read draft state.

How long the preview lasts

Section titled “How long the preview lasts”

The nonce expires after 30 minutes. Inside that window you can reload the preview tab, step through the quiz repeatedly, and use it as much as you like. When the 30 minutes elapse:

  • The next bootstrap call returns 403.
  • You’ll see an “expired” banner in the preview tab.
  • Click Preview again in the Builder to mint a fresh nonce.

What gets logged

Section titled “What gets logged”

Every Preview view fires the dino_discover_draft_preview_accessed action with the audit payload (admin user ID, IP, quiz slug, nonce hash, timestamp). The default listener writes a structured line to the WordPress error log; you can subscribe with your own listener if you want to ship those events to an external system.

What you can test in Preview

Section titled “What you can test in Preview”

The preview renders the question flow exactly as it would appear on the storefront — using the published-storefront template, your theme’s styling, and the routing pills from your draft:

  • Question routing. Each answer’s routing pill is honoured — default, jump-to-question, or end-quiz. Step through the whole flow to verify each path lands where you expect.
  • Question type rendering. Each of the seven question types renders through the storefront component you’d see on the live site. Use this to confirm copy fits, images load, and image-choice grids look right.
  • Theme styling. The preview inherits your active theme’s storefront styles, so what you see is close to what shoppers see.

What’s different from a real session

Section titled “What’s different from a real session”

The draft-preview path is read-only. To keep preview runs from polluting analytics or pushing fake leads to your CRM, the storefront bundle skips several call paths when it boots in draft mode:

  • No session row. The preview doesn’t call POST /storefront/sessions. There’s no dd_sessions row, no variant token, no event-batch writes — so analytics aggregates and the per-quiz Metrics tab never see a preview run.
  • No recommend call. After the last question the preview renders a “preview complete” terminal panel instead of calling POST /storefront/sessions/{sid}/recommend. Use the live storefront on a published version if you want to verify ranking output.
  • No lead push. Lead-capture submissions during preview are not stored as real leads and not forwarded to Klaviyo / Mailchimp / webhook integrations.

If you want to test the live recommendation or lead-capture pipeline, the path is: publish, embed on a test page, walk through as a shopper.

Common preview snags

Section titled “Common preview snags”

The Preview tab is blank. Usually a session-cookie issue. Confirm that the admin session is still active in the tab you launched the preview from; refresh and try again.

The recommendation is empty. Either the eligibility filters removed every product (check WC stock and visibility), or no answers have upvotes against products yet. The Builder’s validator will warn you when an answer is missing upvotes entirely.

The styling looks off. The preview inherits your theme. If a theme template-part overrides the storefront layout, the preview renders through that override. To see the un-themed rendering, set the active theme to a default one in WordPress and reload.

What’s next

Section titled “What’s next”