Quiz Widget: Branding Colors Guide - Setup and Visual Effects For Overlay 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 an Overlay 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 Overlay Template Quizzes?

Our Quiz widget offers three different template layouts: Standard, Split and Overlay. The Overlay template features content overlaid directly on top of your background image, creating an immersive visual experience. Colors play a crucial role in ensuring readability and 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 Overlay Template Layout):

Primary Color - Selected answer options color, main action buttons color ('Next Question' and 'Share result' buttons)
Content Color - Quiz label and question number color
Background Color - Overlay 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 of your Overlay 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

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

(Example shown with #CF2D38)

The Content Color controls specific text elements in your Overlay template quiz. It affects:

"QUIZ" label text - The small label that appears above your quiz title
Question number - The question counter (e.g., "1/5") displayed at the beginning of each question

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 "QUIZ" label text and Question Number

🎨 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 for the overlay panels in your quiz widget. It affects:

Overlay panel background - The background area where questions and answer options are displayed
Results screen background - The background area of the overlay 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.

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

Widget outer border

Further Reading