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 Standard 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 Standard Template Quizzes?
Our Quiz widget offers three different template layouts: Standard, Split and Overlay. The Standard template uses a card-based layout where 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 Standard Template Layout):
- Primary Color - Progress bars color, selected answer options color, main action buttons color ('Next Question' and 'Share result' buttons)
- Secondary Color - Quiz label color
- Content Color - Quiz title and question text color
- Background Color - Question and answers container color and "Play Again" button background color
- Border Color - Widget outer border color
π Wondering What Each Color Controls for Other Layout Templates ? Read Our Other Articles:
- Branding Colors Guide - Setup and Visual Effects For Split Template (Coming Soon)
- Branding Colors Guide - Setup and Visual Effects For Overlay Template (Coming Soon)
π¨ 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 quiz. It affects:
- Progress bar indicators - The filled portion of the progress bar. Each segment fills in as the user completes a question and moves to the next one
- 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 Progress bar indicators, Selected answer options 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 and header area. It affects:
- "QUIZ" label text - The small label that appears above your quiz title at the top 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 the main text throughout your quiz. It affects:
- Quiz title - The main headline of your quiz
- Question text - All quiz questions displayed to users
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
π¨ Background Color: How Do I Set It? What Does It Control in My Quiz Widgets?
(Example shown with #D1EBA2)
The Background Color sets the base color for your quiz widget. It affects:
- Question and answers container background - The background area where questions and answer options are displayed
- "Play Again" button background - Background color for the "Play Again" button
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.
Question and answers container background
"Play Again" button 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 quiz widget. It affects:
- Widget outer border - The border around the entire quiz card
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
- π Branding Colors Guide - Setup and Visual Effects For Split Template (Coming Soon)
- π Branding Colors Guide - Setup and Visual Effects For Overlay Template (Coming Soon)
- π Learn More About Our Classic Quiz Widget & Our Widgets Storybook