Elevate your Octane AI quizzes with the power of custom CSS and Javascript events. Delve into advanced customization and gain more control over your quiz's appearance and behavior. If you're proficient in HTML and CSS development or can access a developer, discover new potentials for your quiz design with Octane AI's developer tools.
Applying Custom CSS to Your Octane AI Quiz
Cascading Style Sheets (CSS) offers styling capabilities to webpages. Octane AI quizzes support custom CSS, providing a new level of adaptability for the quiz design.
Here's how you can apply custom CSS:
- Head to the Octane AI quiz editor and navigate to the "Design" tab.
- Scroll down till you locate the "Custom CSS" option.
- To enable custom CSS, click on the checkbox labeled "Enable custom class names" (this is disabled by default). Enabling this augments dynamic classes with custom class names.
After enabling, you can choose to use the generated class names, or replace them with your preferred class names. For multiple classes for a specific element, ensure each entry is distinctly separated by space.
With classes set, you can apply the CSS code to the same environment where the quiz is published. This can mean adding the code to the webpage where the quiz is housed.
Consult the in-editor documentation provided in the quiz editor for more context on the customizable CSS elements.
Level Up With Javascript Events
Enhance your quiz functionality with custom Javascript events. Octane AI provides custom Javascript events during various stages of the quiz, such as on answering a question, finishing the quiz, or on adding a product to the cart. These events can be used to trigger custom scripts to carry out specific actions on the site.
Several events that Octane AI supports include 'octane.quiz.addToCart', 'octane.quiz.completed', and 'octane.quiz.accessed'. To use these events, your custom script needs to include an event listener set for the specific Octane AI event that you wish to respond to. Here's a simple example:
document.addEventListener('octane.quiz.completed', function(e) {
console.log("Octane AI Quiz Completed");
});
This code will listen for the 'octane.quiz.completed' event and log a console message each time a quiz gets completed.
For Custom Add to Cart Behavior: Octane AI provides options to either let Octane AI add products to the cart or to disable this functionality. With the latter, a custom event gets triggered to signal either success or failure every time a user adds an item to the cart on a results page. This option requires a custom Javascript event listener like the one shown above for the 'octane.quiz.addToCart' and 'octane.quiz.addToCartError' events.
For Custom Results Behavior: Similarly, for results pages, Octane AI provides an option to create your own results pages rather than using the default editor-created results pages. In such cases, the completion event ('octane.quiz.completed') will include information about the customer, including quiz answers, marketing opt-ins, product recommendations, and quiz result URL. Use this event to build your results page. Also, while using custom results pages, the 'octane.quiz.accessed' event can be useful when accessing the results page URLs.
Key Points to Remember
Custom CSS and Javascript events provide powerful tools for customization, but there are essential things to remember:
- Always test your custom CSS and scripts thoroughly. Ascertain they do not affect or alter other site elements or compromise display compatibility with various devices and screen sizes.
- Overly complex CSS or Javascript can slow down your site. Always prioritize performance while crafting your custom scripts.
- Custom CSS and Javascript implementation go beyond the usual Octane AI functionality; therefore, assistance from Octane AI's support might be restricted to issues connected with it.
Incorporating custom CSS and Javascript events into your Octane AI quizzes offer multiple avenues for customization that provide a highly personalized experience for your customers. Remember to test all your custom modifications to ensure they blend seamlessly with your brand's aesthetics and overall customer experience strategy. Octane AI quizzes' primary goal is to offer a seamless, interactive, and gratifying shopping experience to each customer. Advanced customization contributes significantly to achieving that goal.
