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

1. Enabling CSS customization

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

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.

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.

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?