Overview
Octane AI quizzes have several tools that allow extra design and functionality customization for brands with access to developers. These tools allow you to take your quiz customization beyond Octane AI's built-in editor and do things like:
Apply custom CSS to quizzes.
Redirect results pages to a custom landing page.
Create a custom integration for 3rd party shopping carts.
And more!
What you'll learn
How to access developer tools.
Prerequisites
Developer tools are available on the Octane Plus plan.
Using these features will require you to create custom code on your website that targets with your desired developer tool. Our support team will be unable to provide instructions on creating that code beyond the content in this document.
How developer tools work
Quizzes in Octane Plus accounts can fire custom javascript events when certain actions are triggered that contain data from the quiz. This data can be combined with custom code to add functionality to quizzes that isn't available in Octane AI's default editor.
These events can be viewed under the developer tools section in the Settings tab of the quiz editor.
The events that can be fired are:
octane.quiz.addToCartoctane.quiz.completedoctane.quiz.accessed
The completed and accessed events are for custom results pages, while the addToCart event is used for the setting described in the next section.
Listening to events
These events can be listened to with the following code:
document.addEventListener('octane.quiz.completed', function (e) {console.log('completed'); console.log(e.detail);}, false);
To listen to an event other than completed, replace "completed" in the code with the event of your choice.
Add to cart behavior & JavaScript event
Under add to cart behavior settings, two options can be chosen:
Octane AI will add products to the cart.
Octane AI will not add products to the cart. (Advanced)
If you select the advanced option, adding items to the cart in the quiz will no longer work without code tied to the custom event.
Octane AI Will Not Add Products to the Cart
When advanced behavior is enabled, a custom event is fired to signal either success or failure every time a user adds an item to the cart on a results page,
You can listen to those events easily by adding the following JavaScript code.
document.addEventListener('octane.quiz.addToCart', function (e) {
// your code for successfully added items
console.log(e.detail); // example: {items: [{id: '12345', quantity: 1}]}
}, false);
document.addEventListener('octane.quiz.addToCartError', function (e) {
// your code for the error case
}, false);
The event is configured for bubbling up and the items information is available in the detail event's object property.
Success or failure will be indicated by one of the following events:
octane.quiz.addToCartoctane.quiz.addToCartError
Custom Results Behavior & JavaScript Event
Under results page behavior, settings two options can be chosen:
Octane AI will create your results pages
Octane AI will not create your results pages
Choosing "Octane AI will not create your results pages" will stop any of the editor-created results pages from showing up.
Instead, custom CSS/HTML code can use the event to build results pages.
Octane AI Will Not Create Your Results Page
When someone finishes a quiz with a custom result page enabled, the event will include the following information about the customer:
Quiz answers
Marketing opt-ins (contact info)
Product recommendations
Quiz result URL
A quiz result page URL shared through the event will be a snapshot of the result page that the customer received, so any changes made to the quiz afterwards won't be reflected in the link.
Below is the data inside of the event.
document.addEventListener('octane.quiz.completed', function (e) {
// your code for building and handling the results page
console.log(e.detail);
/* output example
{
"quiz_wrapper_element": element, "answers": { "Question 1": "Answer 1", "Question 2": "Answer 2",
"quiz_wrapper_element": element,
"product_blocks": [
[
{
"description": "The candy bar of your dreams",
"id": "40597157904591",
"image": "https://cdn.shopify.com/s/files/...2048x2048.jpg?v=1639095",
"link": "https://store.myshopify.com/products/chocolate?variant=904591",
"price_formatted": "$5",
"tags": [
"brand new"
],
"title": "Crispy chocolate bar",
"type": ""
},
{
"description": "The everlasting taste you were looking for",
"id": "40597156823247",
"image": "https://cdn.shopify.com/s/files/...2048x2048.jpg?v=163968",
"link": "https://store.myshopify.com/products/lollipop?variant=459715",
"price_formatted": "3",
"tags": ["brand new", "birthday"],
"title": "Lollipop",
"type": ""
}
]
]
"quiz_results_url": "", "email": "", "phone": "", "user": ""
}
*/
}, false);
It will include a reference to the HTML element where if the Octane AI will not create your results pages option is selected, you would add your own designs.
This is done by replacing // your code for building and handling the results page with your own design code.
The event is configured for bubbling up and the items’ information is available in the detail event’s object property.
octane.quiz.accessed
When using a custom results page template, an event called octane.quiz.accessed will appear when accessing the results page URL.
Listening to this event will allow custom results pages to repopulate a results page access link. Click here for reference on how to listen to Octane AI's custom events.