All Collections
Quiz Design
Using Custom CSS in Octane AI Quizzes
Using Custom CSS in Octane AI Quizzes
Customize your quiz design with targetable and changeable CSS classes on Octane AI's Enterprise plans.
Mark Baek avatar
Written by Mark Baek
Updated this week


Octane AI's custom CSS options will allow you to directly customize the class names of elements in the Octane AI quiz.

This allows you to target those classes with code on your website and gives you free reign to shape quiz design to exactly what your brand needs.

What you'll learn

Where to find & enable Octane AI's custom CSS settings.


We recommend this feature only if you're savvy with CSS & HTML development, or have access to a developer. While Octane AI does support custom CSS, our support team is unable to assist with issues applying code beyond the guidance provided in this document.

How to turn on custom CSS

To enable custom CSS in the quiz editor, go to:

Design > Custom CSS

Then, select the checkbox labeled Enable custom class names (this option is disabled by default).

When disabled, Octane AI quiz elements will have dynamic class names.

Where do I add my CSS code?

The CSS code can be added to the same environment that the quiz has been published on.

For example, if your quiz is published in one of its own webpages, adding the code in the same webpage would be one option.

Class names can even be changed to equal existing ones on your website.

Editing class names

You can either use the class names that are generated when custom CSS is enabled, or replace the class names with your own.

You can use multiple classes for a specific element as long as each entry is separated by a space.

Editor documentation

The quiz editor includes documentation for each of the classes that can be changed. Nearly every element in quizzes can be targeted, so we highly recommend checking out the quiz editor's documentation if you'd like additional context on any of the CSS elements.

Did this answer your question?