Overview

This article is an overview of the developer tools section of Octane AI's quiz editor, which lets Octane Plus users use custom javascript events to:

  • Connect a quiz to a slide-out / tray cart.

  • Use the quiz on a headless Shopify store.

  • Use quiz data with platforms that don't have an integration.

  • ...and more.

Table of Contents

1. How Does It Work?

2. Add To Cart Behavior & JavaScript Event

2.1. Octane AI Will Not Add Products to the Cart

3. Custom Results Page & JavaScript Event

3.1. Octane AI Will Not Create Your Results Page

3.2. octane.quiz.accessed

4. Additional Resources

This feature is currently available for Octane AI Plus users only. To learn more, email [email protected] or use the support icon to chat with our team.


1. How Does It 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.addToCart

  • octane.quiz.completed

  • octane.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.

Back to top.


2. Add to Cart Behavior & JavaScript Event

Under add to cart behavior settings, two options can be chosen:

  1. Octane AI will add products to cart

  2. 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.

2.1. 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 for 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.

A success or failure will be indicated by one of the following events:

  • octane.quiz.addToCart

  • octane.quiz.addToCartError

Back to top.


3. Custom Results Behavior & JavaScript Event

Under results page behavior, settings two options can be chosen:

  1. Octane AI will create your results pages

  2. 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.

3.1. 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.

3.2. 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.

Back to top.


4. Additional Resources


Have any questions? Send an email to [email protected] or use the support icon to chat with our team.

Did this answer your question?