Test how your quiz works with your store theme and custom code.
💡 What you'll learn
💡 Prerequisites
Some familiarity with HTML elements.
How the live preview works
If you want to embed a quiz in your live store to test before publicly releasing it, you should use the data-preview="true" attribute to simulate the quiz as a preview without consuming your plan's monthly engagements quota. This can be helpful when you need to test your store's custom CSS and JavaScript code, which is only supported by embedding your quiz in your store.
When the data-preview="true" attribute is added to the quiz embedded code HTML div tag, the quiz works as in the quiz editor preview, except it uses your store theme CSS code and any other custom JavaScript code that runs in your store page. However, analytics for answers are excluded in this mode, aside from opt-ins noted below.
Key features of using data-preview="true"
Your monthly engagements quota is not consumed: When the
data-preview="true"attribute is added, any interactions with the live quiz will not count toward your plan's monthly engagements quota.Limited data collection: Analytics for taking the quiz are not stored, with the exception of email and phone number opt-ins. Note: we recommend that you do not submit the email and phone number opt-ins on the live quiz test to not collect irrelevant data.
Action buttons on results pages are disabled: Adding to the cart, viewing the product page and other results page buttons actions for products are disabled, thus any custom integration relying on these features will not work as intended.
Integrations are disabled: Integrations such as Klaviyo will not work in the live preview version.
Steps to add data-preview="true"
Locate the main
divHTML element that contains the quiz code.Add the
data-preview="true"attribute to thisdiv.
Here's an example of what your quiz code will look like, keep in mind that this is just a sample code, and you should only add data-preview="true" to your code and not copy this one:
<div
class="octane-ai-quiz"
data-quiz-id="xxxxxxxx" <!-- This will be your quiz ID -->
data-embed-type="fullpage"
data-mobile-height="match_browser"
data-desktop-height="match_browser"
data-preview="true" <!-- This is where you add the attribute -->
></div>
<script
src="https://app.octaneai.com/xxxxxxxx/quiz.js" <!-- This will be your quiz script source -->
async
defer
></script>
Once you have embedded your quiz code with the added attribute, the preview version will be live on your page and you will be able to test your quiz as needed.