Overview
Enterprise users in Octane AI will have access to targetable CSS classes in Octane AI that can be used to customize quiz designs with website CSS. These classes can be used with their default names, or can be customized to match existing and/or new classes in your website.
Table of Contents
2. CSS Elements
2.1. Global Wrapper
2.2. Text
2.3. Buttons
2.4. Question Type
2.5. Results Page
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. Enabling CSS customization
CSS customization can be enabled in the settings of Octane AI's Shop Quiz editor. When you turn on CSS customization for a quiz, it will be enabled for that specific quiz only. Any other quizzes you would like to use customizable CSS classes with will need to be set separately.
You can find this setting by navigating to:
Quiz settings → Custom CSS → Enable custom class names
Select this checkbox and save your quiz to activate CSS customization for your quiz.
2. CSS Elements
After you've enabled custom class names in your quiz, you'll be able to view and edit class names for several elements in your quiz.
Editing the class names isn't necessary - you can use Octane AI's default custom class names if you'd like, but if you already have custom classes in mind that you'd like to match Octane AI's classes to, renaming them should allow the targeted element to inherit your website's CSS designs.
Documentation on what each customizable element does is included inside of the Shop Quiz editor when editing CSS classes.
Can I use multiple classes in an element?
You can use multiple classes for specific elements in your quiz, as long as each entry is separated by a space.
2.1. Global Wrapper
Global wrapper classes are used across the quiz which means changes to these CSS classes can impact elements across your quiz sections and results pages.
2.2. Text
Class names for every type of text option in your quiz's Typography settings are available in this section. If you already have classes in your website that you'd like to match one of these names to, matching the class name in your quiz settings should update the styling in your quiz to match as well.
2.3. Buttons
Buttons in your quiz can be customized to a significant extent. The classes in this section include buttons such as the Add all to cart button in addition to general buttons that can be added throughout your quiz.
Styles
Each of the button styles, which includes primary, secondary, primary text and secondary text buttons have separately targetable class names.
Sizes
There are three pre-set button sizes in your quiz, small, medium and large. Each size can be targeted separately by their class name, allowing you to customize the exact size each option represents.
2.4. Question Types
CSS classes in the question types category allow you to customize styling for the way content is displayed in each of the sections you can add to your quiz. This includes:
Explainer screen
Multiple / picture choice questions
Text collection questions
Opt-in pages
Each question type above lets you target its own wrapper class as well as an input wrapper. However, multiple and picture choice questions especially have a large amount of CSS classes that you can target for changes.
2.5. Results page
The CSS options for results pages allows you to target the following types of classes:
Layout
Product/Item
Recharge
The product/item classes allow you to customize the styling of product entries, while layout classes will let you target any other kind of content you add to a results page.
Recharge classes will only be usable if you have Octane AI's Recharge integration active.
Have any questions? Send an email to [email protected] or use the support icon to chat with our team.