Skip to main content

How to Publish Your Octane AI Quiz and Use Drafts with Version Control

This guide will contain instructions and useful information on adding quizzes to a Shopify or non-Shopify page, as well as using the drafts and version control to make changes without affecting the live quiz.

Written by Ariel Santos

Draft vs. Published states

Your quiz has two states: the draft you edit and the published version customers see. Changes you make in the editor are not shown to customers until you publish the quiz. When you want your changes to go live, you can click on Publish.

For example, this quiz is currently in a DRAFT state, so the latest changes are not shown to the customer while you edit a quiz that is published:

When you are satisfied with your changes and want to update the live version, click Publish:

Checking for issues before publishing

You will be prompted to check for issues before publishing your current draft:

If you click Find issues, our AI will check for possible issues in the quiz:

You can review the listed issues by clicking Review issues, or publish by clicking Publish anyway. After reviewing the issues or proceeding with publishing, you will be prompted to optimize the image loading speed:

Website embed settings

Once you proceed, if you have not published your quiz previously, you will see the following quiz embed settings (you can also see them by clicking Show embed instructions on the publishing modal):

How the app appears on your store

This is how the quiz will look on your page. If you go with Inline (Page Body), the quiz will be published as an element inside your page. If you want the customer to scroll down a bit and take the quiz in the middle of the page, go with this option. If you go with Fullscreen Overlay, your quiz will open in a modal that takes the full width and height of the page.

You can also enable and configure the quiz loading animation:

Add the quiz by creating a page directly or via the theme editor

Creating a quiz page directly from the settings

You can name the Shopify page where the quiz will be embedded and click on Create the quiz page, and Phoenix will automatically create a page on your Shopify store and embed the quiz there. You will be asked for Shopify permission to do this, and you can tick the checkbox to save the permission settings for the next quizzes.

Embedding the quiz via the theme editor

You can also use the quiz's Octane ID to publish the quiz inside your theme editor by pasting the quiz's Octane ID into the Octane AI Quiz App Block inside Add block -> Apps.

Embedding the quiz via HTML code (advanced)

You can also use the quiz's HTML code to publish to any page you want. You can even publish it to non-Shopify pages.

Here are some different ways to use the HTML embed code:

Shopify theme editor (more control)

  1. In your Shopify admin, go to Online Store → Themes and click Customize on your active theme.

  2. In the dropdown at the top of the theme editor, choose Pages, then click "Create template" and name it.

  3. Inside the template, click Add section → Custom Liquid.

  4. Paste the quiz embed code into the Custom Liquid box.

  5. Drag the block by its handle to position it on the page, then click Save.

  6. Assign the template to any page (Online Store → Pages → pick a page → Theme template).

Shopify page (fewer steps)

Fewer steps, but the quiz is confined to the page content area, harder to target with custom CSS, and removing it means deleting the code or the page.

  1. In your Shopify admin, go to Online Store → Pages and click Add page.

  2. Give the page a title.

  3. In the Content box, click the < > icon to open the HTML editor.

  4. Paste the quiz embed code, then click Save.

Other platforms

  1. Open the HTML editor for the page or section where you want the app.

  2. Paste the code snippet where you want the app to appear.

  3. Save and publish the page.

Using version control

You can check all the saved quiz versions by clicking the three dots next to PUBLISHED or DRAFT -> Versions:

You will see all the saved versions on the left:

You can click a version on the left to select it and preview it. You can Delete the version; check What changed for a summary of changes between each version; change the Label for each version to easily identify them; Publish the selected version; and Restore that version to edit it as the current version.

You can also preview it in the viewport for different devices and screen sizes at the top of the modal by selecting Desktop, Tablet, Mobile, or entering the screen size manually.

Related Articles
Did this answer your question?