Once your quiz has been completed, you can embed it onto your pop-up with a code that Octane AI generates for you.
This guide will explain each part of the embed process. You can use the quick steps listed below to skip ahead.
Table of Contents
2.1. Behavior settings
2.2. Design settings
1. Adding your Shop Quiz to your website
When you're ready to show your quiz off on your website, you'll have two options:
Embed your quiz in a Shopify store page.
Creating a pop-up
For instructions on how to embed your quiz into a page on your website, check out this guide.
To learn how to embed your quiz in a pop-up instead, read on!
1.1. Create a pop-up from the quiz page
First, locate the quiz that you want to embed, and click on its name to take you to the quiz's specific results analytics:
Scroll down until you see the Embed code section, which includes a button you can use to add your shop quiz to your pop-up. This is between the Edit and Top Product sections of your quiz's main page.
Once you click on the drop down, you can select which pop-up you would like to add your quiz to. The two options are the Welcome Pop-Up and the Exit Intent Pop-Up.
1.2. Create a pop-up from the Pop-ups page
You can also create Quiz Pop-ups directly from the Pop-ups page in your dashboard.
Quiz Pop-ups aren't able to contain opt-ins, but you can always have opt-in pages in the quiz you embed!
When creating a new Welcome or Exit Intent Pop-up, select the "Quiz pop-up" option.
After selecting the "Quiz pop-up" option, you'll be taken into the pop-up editor. Select the Shop Quiz you'd like to use from the drop-down menu on the left.
After you add the quiz to a pop-up, you won't have to do it again. This means any changes you make to the quiz besides will automatically be reflected in the live quiz.
2. Designing your Quiz Pop-up
When you embed your quiz into a pop-up, your Shop Quiz will take up the entire pop-up.
The design decisions you make for your Shop Quiz will be reflected fully in your pop-up as well, but there are some useful customization options for your pop-up as well.
If you want to make changes to your Shop Quiz, there's an Edit button in the pop-up editor that will take you straight there.
Don't forget to Save before leaving the editor to avoid losing any changes.
2.1. Behavior settings
The first option you'll spot under your behavior settings is the ability to hide your pop-up from people who have already taken your quiz.
By default, this option is turned off so you'll have to enable it if you'd like to show your pop-up multiple times to the same user.
An important part of your pop-up's behavior is its placement settings. With placement settings, you can decide which exact pages and devices your pop-up will show up on.
You'll have the following options for device settings:
Desktop & tablet
Mobile & tablet
Tablet pop-ups will use the same layout as your desktop tablet - to switch which pop-up layout you're previewing, use these icons at the top of the editor:
Customize by URL
You can also customize where your pop-up appears by creating rules based on your website URLs.
If you use the "is equal to" condition, you'll have to use the exact URL you're referencing. With the "contains" condition however, you can be a bit looser with the URL you enter.
For example, if I set my pop-up to appear only on pages that contain "/collections", my pop-up will show up on every one of my collections pages.
This gives you full control over when and where your Quiz Pop-up will appear.
URL Hash Changes
If your website is coded to perform actions by manipulating hash values in mobile URLs, this can cause pop-ups to trigger incorrectly.
Enable this to prevent hash changes on mobile from triggering your pop-up.
2.2. Design settings
While most of your pop-up content will be your Shop Quiz, there are a couple of design options you can use if you'd like to further customize your pop-up..
Just like with your opt-in pop-ups, you can choose between two layout options:
If you select "Left-aligned", the image you upload in your background settings will be displayed to the left of your quiz.
NOTE: For best practice, create a separate desktop and mobile pop-up to make sure your content works on all devices.
You can also customize the corner radius of your pop-up with the rounded corners option in your layout settings.
Your background settings let you upload an image for left-aligned pop-ups, as well as set a solid background color.
If you select a background color in your pop-up, this will override the background color settings you've set in the Shop Quiz editor.
Have any questions? Send us an email at [email protected], or use the support icon in the bottom right corner to chat with our team.