This document includes explanations of Octane AI's quiz HTML structure, as well as the CSS class names that are assigned when the custom CSS option is enabled for a quiz.
This can be done with these quick steps:
Open your quiz in the Octane AI quiz editor.
In the quiz editor, navigate to Design and click on Custom CSS.
Click on 'Enable custom class names'.
While CSS class names can be customized or even changed to match existing class names on your website, the ones below will be the default class names present in each Octane AI quiz when custom CSS is enabled.
💡 What you'll learn
Global wrapper HTML structure (jump to section)
Text HTML structure (jump to section)
💡 Prerequisites
Custom CSS can be enabled on Octane Plus plans.
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.
Global wrapper HTML structure
🔍 This is the main structure of a quiz:
<div class="octane-ai-quiz-rendered">
<div class="oct-quiz-wrapper <question_type_class>">
<div class="oct-quiz-content">
// first element Close button (on fullscreen mode)
// quiz content will appear inside this element
</div>
</div>
</div>
Quizzes have a main wrapper in which Octane AI's script starts. It has a statistic class called "octane-ai-quiz-rendered" which cannot be changed.
<div class="octane-ai-quiz-rendered">
// Wrapper will be rendered inside
</div>
The "oct-quiz-wrapper" element represents a mask that hides quiz content. Inside the wrapper element, another element is rendered that represents the content holder. The whole quiz HTML is rendered inside of it.
<div class="oct-quiz-wrapper">
// Content holder will be rendered inside
</div>
The "oct-quiz-content" is the final main element, and its purpose is to hold quiz content.
<div class="oct-quiz-content">
// Quiz content will appear inside this element
</div>
The close button is always rendered as a first element inside content div.
<div class="oct-quiz-close">
<svg width="20" height="20" viewBox="0 0 20 20">
<g fill="currentColor" fill-rule="evenodd">
<mask id="oct-closeXb" fill="#fff">
<use xlinkhref="#oct-closeXa"></use>
</mask>
<path id="oct-closeXa" d="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"></path>
<g fill="currentColor" mask="url(#oct-closeXb)">
<path d="M0 0h21v21H0z"></path>
</g>
</g>
</svg>
</div>
🔍 Global wrapper classes
Wrapper class name:
oct-quiz-wrapper
Content class names:
oct-quiz-content
Close quiz popup (only for full screen):
oct-quiz-close
Text HTML structure
All text fields are generated inside the div element, except for the rich text editor content. The div element prevents other styles on your site from interfering with the quiz.
Below you can see how each element is rendered.
The AI personalized message can have a varying length, since it's AI-powered:
<div class="oct-quiz-ai-text">
// Text will be rendered inside
</div>
Title:
<div class="oct-quiz-title">
// Text will be rendered inside
</div>
Heading:
<div class="oct-quiz-heading">
// Text will be rendered inside
</div>
Subheading:
<div class="oct-quiz-subheading">
// Text will be rendered inside
</div>
Body text:
<div class="oct-quiz-body-text">
// Text will be rendered inside
</div>
Caption text:
<div class="oct-quiz-caption-text">
// Text will be rendered inside
</div>
The rich text editor is a little more complex. A class is available for its wrapper, but the content inside will be subject to rich text settings.
<div class="oct-quiz-rich-text">
// Text will be rendered inside
</div>
🔍 Text classes
AI personalized message:
oct-quiz-ai-text
Title class names:
oct-quiz-title
Heading class names:
oct-quiz-heading
Subheading class names:
oct-quiz-subheading
Body text class names:
oct-quiz-body-text
Caption text class names:
oct-quiz-caption-text
Rich text editor class names:
oct-quiz-rich-text
Buttons HTML structure
Every button is wrapped inside the div element.
<div class="oct-quiz-btn-wrapper">
// Button will be generated inside
</div>
Every button has the same HTML structure. Below is an example of only one variant, but the rest are generated the same way.
<button class="oct-quiz-btn oct-quiz-btn--primary ">
// Some text
</button>
To control button sizes, we only add a size class modifier to the same HTML structure.
<button class="oct-quiz-btn oct-quiz-btn--primary oct-quiz-btn--small">
// Some text
</button>
🔍 Button class names
Buttons wrapper
Buttons wrapper class name:
oct-quiz-btn-wrapper
Add all to cart button class name:
oct-quiz-btn-wrapper-buy-all
General / all buttons class name:
oct-quiz-btn
Buttons style
Primary button class name:
oct-quiz-btn--primary
Secondary button class name:
oct-quiz-btn--secondary
Primary text button class name:
oct-quiz-btn--primary-text
Secondary text button class name:
oct-quiz-btn--secondary-text
Buttons size
Small buttons class name:
oct-quiz-btn--small
Medium buttons class name:
oct-quiz-btn--medium
Large buttons class name:
oct-quiz-btn--large
Questions HTML structure
🔍 Explainer screen
The explainer screen has a unique class name for the content holder and the main content wrapper. Explainer screens consist of top and bottom content while buttons to go to the next question.
<div class="oct-quiz-wrapper oct-quiz-wrapper--explainer">
<div class="oct-quiz-content">
// we render question content here
</div>
</div>
🔍 Email, SMS and freeform text questions
Email, phone, and collect text share the same structure, so they have a wrapper class that is an addition to the main content wrapper. A div element is rendered inside of the main content that wraps around the input type text field.
<div class="oct-quiz-wrapper oct-quiz-wrapper--email">
<div class="oct-quiz-content">
// Top content
<div class="oct-quiz-email-wrapper">
<input type="text" />
</div>
// Bottom content
</div>
</div>
🔍 Multiple choice
For multiple choice, a wrapper class is included as an addition to the main content wrapper class.
A div element that is a wrapper for all the answer options inside it is also included.
Inside the div wrapper, a UL > LI structure is rendered. UL has a general options class and LI's are items/answers.
Every LI has three divs. The first one represents visible text. The second and third LI's are only there to help create text choice buttons in the quiz that maintain a static width when font styling is changed.
<div class="oct-quiz-wrapper oct-quiz-wrapper--multiple-choice">
<div class="oct-quiz-content">
// Top content
<div class="oct-quiz-multiple-choice-wrapper">
<ul class="oct-quiz-multiple-choice-options oct-quiz-multiple-choice-options--stacked">
<li class="oct-quiz-multiple-choice-options__option">
<div>text holder</div> // main text you see
<div>text holder</div> // hidden text to take space if different style (hover)
<div>text holder</div> // hidden text to take space if different style (selected)
</li>
</ul>
</div>
// Bottom content
</div>
</div>
🔍 Picture choice
Picture choice is very similar to multiple choice. A wrapper class is included that is an addition to the main content wrapper class.
Inside, there is a div wrapper for all the answer options.
Inside the div wrapper, a UL > LI structure is rendered in which UL has a general options class and LI's for items and answers.
Three divs are included inside of LI. The first one is an empty div that holds the image as a background. The second is the text holder and the third only holds border style. The number and order of divs can be different, which depends on options chosen when the picture choice question is created.
<div class="oct-quiz-wrapper oct-quiz-wrapper--picture-choice">
<div class="oct-quiz-content">
// Top content
<div class="oct-quiz-picture-choice-wrapper">
<ul class="oct-quiz-picture-choice-options oct-quiz-picture-choice-options--ratio-square oct-quiz-picture-choice-options--text-below">
<li class="oct-quiz-picture-choice-options__option">
<div>text holder</div> // Rendered if text position is top
<div>empty img div</div> // This div holds an image as background
<div>text holder</div> // Rendered if text position is bottom
<div>empty div</div> // This div shows an border style
</li>
</ul>
</div> // Bottom content
</div>
</div>
Questions classes
Explainer screen
Wrapper:
oct-quiz-wrapper--explainer
Email opt-in page
Wrapper:
oct-quiz-wrapper--email
Input wrapper:
oct-quiz-email-wrapper
SMS opt-in page
Wrapper:
oct-quiz-wrapper--phone
Input wrapper:
oct-quiz-phone-wrapper
Free form text question
Wrapper:
oct-quiz-wrapper--collect-text
Input wrapper:
oct-quiz-collect-text-wrapper
Multiple choice question
General wrapper:
oct-quiz-wrapper--multiple-choice
Options wrapper:
oct-quiz-multiple-choice-wrapper
Options:
oct-quiz-multiple-choice-options
Options - single item:
oct-quiz-multiple-choice-options__option
Options stacked:
oct-quiz-multiple-choice-options--stacked
Options horizontal:
oct-quiz-multiple-choice-options--horizontal
Options checkbox answers:
oct-quiz-multiple-choice-options--checkbox
Options radio answers:
oct-quiz-multiple-choice-options--radio
Picture choice question
General wrapper:
oct-quiz-wrapper--picture-choice
Options wrapper:
oct-quiz-picture-choice-wrapper
Options:
oct-quiz-picture-choice-options
Options - single item:
oct-quiz-picture-choice-options__option
Image:
oct-quiz-picture-choice-img
Image ratio option - square:
oct-quiz-picture-choice-options--ratio-square
Image ratio option - portrait:
oct-quiz-picture-choice-options--ratio-portrait
Image ratio option - landscape:
oct-quiz-picture-choice-options--ratio-landscape
Image ratio option - circle:
oct-quiz-picture-choice-options--ratio-circle
Image ratio option - custom:
oct-quiz-picture-choice-options--ratio-custom
Picture option text position - below:
oct-quiz-picture-choice-options--text-below
Picture option text position - above:
oct-quiz-picture-choice-options--text-above
Picture option no text:
oct-quiz-picture-choice-options--no-text
Results page HTML structure
🔍 Layout section
The code below represents the layout of a results page. There is no limit to the number of content blocks that can be added to a results page.
Each content block can only have one of each:
Top content holder
Products wrapper
Bottom content holder
There is no limit to the number of products that can be added inside of a products wrapper.
<div class="oct-quiz-wrapper oct-quiz-wrapper--result-page">
<div class="oct-quiz-content">
<div>// result page Title</div>
<div>// result page subtitle</div>
<div class="oct-quiz-product-block oct-quiz-product-block--vertical oct-quiz-product-block--left">
<div>// Top content section</div>
<div class="oct-quiz-products">
// this div is a product holder
<div class="oct-quiz-products__item">
// this div represents an individual product
</div>
</div>
<div>// Bottom content section</div>
</div>
</div>
</div>
🔍 Image section
The image HTML contains 2 elements. The first one is a div wrapper.
The second div is an anchor with an image as a background and a link to the product page.
Several image ratio options are available and can be selected under the DISPLAY SETTINGS section of a content block.
<div class="oct-quiz-result-item__img-wrapper">
// We will display only one image ratio class name,
// and it will be the one you selected in the content block settings section
<a class="oct-quiz-result-item__img quiz-result-item__img--ratio-square"
href="href_to_product_page"
style="background-image: url("img_url_generated")">
</a>
</div>
🔍 Copy section
The copy section is an element that contains all of product's copy. This includes the product title, description and price.
Here's a breakdown of the HTML below:
The copy container is a div element that wraps title, description, and pricing elements.
The title is an anchor and contains a link to the product page.
The description is a div element that contains the HTML of the product description.
The pricing is a div element that contains pricing as text.
<div class="oct-quiz-result-item__copy-wrapper">
<a class="oct-quiz-result-item__title"
href="href_to_product_page">
// Product title
</a>
<div class="oct-quiz-result-item__description">
// Description
</div>
<div class="oct-quiz-result-item__pricing">
// Pricing
</div>
</div>
🔍 Actions element section
This section contains all of the actions that items can have - buttons, quantity inputs and dropdowns.
The HTML's structure starts with the main div wrapper (actions wrapper). Inside, a div element that holds all the content (actions content) is included.
The action content div element is not rendered for horizontal views.
Octane AI's content holder will hold all of the elements that contain buttons, inputs, or dropdowns.
The first div element is a variant wrapper (if the product is recommended with variants).
The second div element is a Recharge holder (if the Recharge integration is enabled).
The third div element holds a quantity input field.
The rest of the div elements are action button holders (add to cart, checkout, or go to product page).
A maximum of 2 buttons can be included per product.
Button holders don't have classes.
<div class="oct-quiz-result-actions-wrapper">
<div class="oct-quiz-result-actions-content"> // This div is not rendered in horizontal view
<div class="oct-quiz-result-item__variant-wrapper">
<div class="oct-quiz-result-item__dropdown-mask">
<select>
<option value="0">Variant 1 copy</option>
<option value="1">Variant 2 copy</option>
</select>
</div>
</div>
<div class="oct-quiz-actions-recharge-wrapper">
// If you have recharge html it will be rendered here
// if you don't have recharge this html will not be rendered
</div>
<div class="oct-quiz-result-item__quantity">
<input type="number" min="1" value="1">
</div>
<div>
<button class="your_custom_button_classes">ADD TO CART</button>
</div>
<div>
<button class="your_custom_button_classes">Button 2</button>
</div>
</div>
</div>
🔍 Recharge section
The Recharge section will be only be rendered if Octane AI's Recharge integration is enabled, and is present on the store.
<div class="oct-quiz-recharge">
<div class="oct-quiz-recharge__radio-wrapper">
<div>
<label class="oct-quiz-recharge__radio-label">
<input name="recharge_{generatedID}" type="radio" value="onetime">
<span></span>
// One-time purchase text
</label>
</div>
<div>
<label class="oct-quiz-recharge__radio-label">
<input name="recharge_{generatedID}" type="radio" value="subsave" checked="">
<span></span>
// Subscribe and save text
<div class="oct-quiz-recharge__help-wrapper">
<div class="oct-quiz-recharge__help-text">
// Your help text
</div>
<svgIcon/>
</div>
</label>
</div>
</div>
<div>
// There are multiple options how we render childrens of this div
// 1. Option, if there is multiple options
// This elements uses the same classes from item
<div class="oct-quiz-result-item__variant-wrapper">
// This elements uses the same classes from item
<div class="oct-quiz-result-item__dropdown-mask">
<select>
<option value="15">Deliver every 15 days</option>
<option value="30">Deliver every 30 days</option>
</select>
</div>
</div>
// 2. Option, if there is only 1 delivery option
<div>Deliver every 15 days</div> // we only render a div with the text
</div>
</div>
Results page classes
Layout section
Quiz wrapper result page:
oct-quiz-wrapper--result-page
Content block:
oct-quiz-product-block
Products wrapper:
oct-quiz-products
Product/item:
oct-quiz-products__item
Vertical layout option:
oct-quiz-product-block--vertical
Horiztonal layout option:
oct-quiz-product-block--horizontal
Left product alignment:
oct-quiz-product-block--left
Center product alignment:
oct-quiz-product-block--center
Right product alignment:
oct-quiz-product-block--right
Image section
Image wrapper:
oct-quiz-result-item__img-wrapper
Image:
oct-quiz-result-item__img
Image ratio option - square:
quiz-result-item__img--ratio-square
Image ratio option - portrait:
quiz-result-item__img--ratio-portrait
Image ratio option - landscape:
quiz-result-item__img--ratio-landscape
Image ratio option - custom:
quiz-result-item__img--ratio-custom
Copy section
Copy wrapper:
oct-quiz-result-item__copy-wrapper
Copy title:
oct-quiz-result-item__title
Copy description:
oct-quiz-result-item__description
Copy pricing:
oct-quiz-result-item__pricing
Actions element section
Actions wrapper:
oct-quiz-result-actions-wrapper
Actions content:
oct-quiz-result-actions-content
Variant wrapper:
oct-quiz-result-item__variant-wrapper
Dropdown mask:
oct-quiz-result-item__dropdown-mask
Actions wrapper for Recharge:
oct-quiz-actions-recharge-wrapper
Quantity wrapper:
oct-quiz-result-item__quantity
Recharge section (if enabled)
Recharge wrapper:
oct-quiz-recharge
Option/radio wrapper section:
oct-quiz-recharge__radio-wrapper
Radio options/label:
oct-quiz-recharge__radio-label
Help icon wrapper:
oct-quiz-recharge__help-wrapper
Help icon text:
oct-quiz-recharge__help-text