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.

This feature is currently in beta, which means the existing list of targetable elements has not been finalized.

Table of Contents

1. Enabling CSS customization

2. CSS Elements

2.1. Global Wrapper

2.2. Text

2.3. Buttons


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.

Back to top.


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.

Back to top.


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

Did this answer your question?