Quiz Widget: Branding Colors Guide - Setup and Visual Effects For Split Template

Classic Quiz Widget: How to Configure Branding Colors from the Portal

Colors are essential for making your quiz widgets match your brand identity and for creating an engaging user experience. This guide shows you how to configure colors for the Classic Quiz widget and teaches you with visual guides what each color controls when you choose a Split template layout.

📖 How do I access color settings in the Management Portal?

Navigate to the Management Portal and log in to your account
In the left sidebar, locate and click on CLASSIC QUIZZES
Select the specific quiz you want to configure
In the quiz management screen, locate the Branding section on the right side
Click on the Colors tab within the Branding section

In the left sidebar within the Portal, locate and click on Classic Quizzes. Select the specific quiz you want to configure

⚙️ What Does Each Color Control for Split Template Quizzes?

Our Quiz widget offers three different template layouts: Standard, Split and Overlay. The Split template uses a distinctive two-panel layout with visual content on the left and interactive quiz elements on the right. Colors play a crucial role in guiding user attention. Properly configured colors ensure your quiz widgets match your brand identity, create clear visual hierarchy, and provide a professional appearance that enhances user engagement.

Here's a quick overview of what each color controls on the Quiz Widget UI (For the Split Template Layout):

Primary Color - Selected answer options color, main action buttons color ('Next Question' and 'Share result' buttons)
Secondary Color - Quiz label color
Content Color - Quiz title, question number, and final score color
Background Color - Right panel background color (where questions and answers are displayed) and results screen background color
Border Color - Widget outer border color

📌 Wondering What Each Color Controls for Other Layout Templates? Read Our Other Articles:

🎨 Primary Color: How Do I Set It? What Does It Control in My Quiz Widgets?

(Example shown with #EDDB3E)

The Primary Color is one of your main brand colors and appears in a few interactive elements within the right panel of your Split template quiz. It affects:

Selected answer options - When users select an answer, it highlights in your Primary Color
Next Question button - The main call-to-action button that advances users through the quiz
Share Result button - The button on the results screen that encourages users to share their quiz results
Active tab indicator - The underline on the Results (or Answers) tab showing which view is currently active

How to set it: Navigate to the Management Portal > Classic Quizzes > Select your quiz > Branding section > Colors tab > Enter your color in the "Primary Color" field.

Colored selected answer option and Next Question button

Colored Share Result button & Active tab indicator

🎨 Secondary Color: How Do I Set It? What Does It Control in My Quiz Widgets?

(Example shown with #CF2D38)

The Secondary Color appears on the quiz label in the left panel of your Split template. It affects:

"QUIZ" label text - The small label that appears above your quiz title in the left panel of the widget

How to set it: Navigate to the Management Portal > Classic Quizzes > Select your quiz > Branding section > Colors tab > Enter your color in the "Secondary Color" field.

🎨 Content Color: How Do I Set It? What Does It Control in My Quiz Widgets?

(Example shown with #38733F)

The Content Color controls specific text elements throughout your Split template quiz. It affects:

Quiz title - The main headline of your quiz displayed in the left panel
Question number - The question counter (e.g., "1/5") displayed in the right panel
Final score - The score display (e.g., "5/5") shown on the results screen

How to set it: Navigate to the Management Portal > Classic Quizzes > Select your quiz > Branding section > Colors tab > Enter your color in the "Content Color" field.

Colored 'Mbappe in the 2024/25 Season: Did You Follow Every Moment?' quiz title and question number

Colored Final Score (5/5)

🎨 Background Color: How Do I Set It? What Does It Control in My Quiz Widgets?

(Example shown with #D1EBA2)

The Background Color sets the background color for the right panel of your Split template quiz widget. It affects:

Right panel background - The entire background area of the right panel where questions and answer options are displayed
Results screen background - The background area of the right panel on the results screen

How to set it: Navigate to the Management Portal > Classic Quizzes > Select your quiz > Branding section > Colors tab > Enter your color in the "Background Color" field.

Right panel background (questions and answers area)

Results screen background

🎨 Border Color: How Do I Set It? What Does It Control in My Quiz Widgets?

(Example shown with #CF2D38)

The Border Color defines the outline of your Split template quiz widget. It affects:

Widget outer border - The border around the entire quiz widget

How to set it: Navigate to the Management Portal > Classic Quizzes > Select your quiz > Branding section > Colors tab > Enter your color in the "Border Color" field.

Further Reading