How to Customize Your Quiz Result Template

The Quiz Result Template is an essential feature displayed to users upon completing a quiz. This template serves as the final screen of the quiz experience and can be used in various ways depending on your goals. It provides the opportunity to present quiz results and can be customized to display a message confirming that the quiz has been completed, offering a sense of closure for the user. This feature enhances the user experience by offering clear and relevant information, reinforcing engagement, and guiding users on the next steps based on their quiz performance or results.

Navigate to the Quiz Builder from the Sites section of your account to begin. Select an existing Quiz from the list, or click the “+ Add Quiz” button to initiate the quiz creation process.

Scroll to the bottom of the builder to locate and click the option to edit the Result Template.

The template is divided into 4 Sections: Header (1), Categories (2), CTA (3), and Footer (4). Click each section to customize it.

Click “Configure Score Tiers” to customize scores with colors and labels, visually categorizing performance levels.

To add a tier, click the “+ Add Tier” button (1), or remove a tier by clicking the trash icon (2) next to the respective tier.

To modify the existing tiers, click the color square to change (1) the color that represents that tier, the tier's display name (2), and the starting (3) and ending (4) percentage that is contained within that tier.

Once satisfied with your tiers, click Save.

Click the Settings button to set names for your custom fields and their respective unique keys.

The Content section will be displayed by default, offering options to customize the visibility of the Business Name, select the default header layout position (left-aligned), or opt for the reverse (right-aligned). Additionally, you can upload your logo from the media library and adjust the typography of the business name.

Configure the Margin & Padding settings by entering appropriate values in the respective fields.

You can also slide the toggle, or choose from the options presented.

Additionally, update the metric used to further refine the margin and padding settings.

In the Background Color section, you can enter a specific hex code or select a color from the color picker that aligns with your business's branding, allowing for greater customization and brand consistency.

In this section, you have the option to display dynamic content based on the grade the contact received. Simply toggle each tier and input the corresponding message to be displayed.

📌Note: The tiers can be configured in the Score Tiers section under the Categories tab. Continue reading for detailed instructions.

Choose whether to display the overall score and the score tiers. If you wish for the score to be displayed, you may also specify its format and position.

Configure the Margin & Padding settings by entering appropriate values in the respective fields. You can also slide the toggle or choose from the options presented. Additionally, update the metric to refine the margin and padding settings.

In the Background Color section, you can enter a specific hex code or select a color from the color picker that aligns with your business's branding.

For quizzes with sub-categories, made via the Manage Categories button in the quiz builder or from an element's settings, you can click the Category Score card to open its options. 

In this section, you have the option to display dynamic content based on the grade the contact received. Simply toggle each tier and input the corresponding message to be displayed.

Configure whether the score should be displayed to the user, and define the preferred format in which it should appear.

Configure the Margin & Padding settings by entering appropriate values in the respective fields. You can also slide the toggle, or choose from the options presented. Additionally, update the metric to refine the margin and padding settings.

In the Background Color section, you can enter a specific hex code or select a color from the color picker for the section and category background that aligns with your business's branding.

To build personality-style quizzes based on the highest and lowest scoring categories, click “+ Add section.”

Select one of the templates to add the section.

Configure it as desired with the right-side bar. This section is perfect for assigning users a type, style, or persona based on their responses.

In this section, you have the option to display dynamic content based on the score the contact received. Simply toggle each tier and input the corresponding message to be displayed.

Configure the Margin & Padding settings by entering appropriate values in the respective fields. You can also slide the toggle, or choose from the options presented. Additionally, update the metric to refine the margin and padding settings.

In the Background Color section, you can enter a specific hex code or select a color from the color picker for the background that aligns with your business's branding.

Click the CTA section to begin customizing it.

In this section, you have the option to display dynamic content based on the grade the contact received. Simply toggle each tier and input the corresponding message to be displayed. Additionally, enter the text that should be displayed on the CTA button, and the link it should redirect to.

📌Note: When configuring a CTA for the first tier of a category, the Section Content, CTA Name, and CTA Link are automatically carried over as default values to the remaining tiers. If the CTA Name or CTA Link is left empty for a specific tier, the CTA button will be hidden, and only the corresponding content will be displayed. 

Open this section to update the button and/or text color. Enter a specific hex code or select a color from the color picker that aligns with your business's branding.

Configure the Margin & Padding settings by entering appropriate values in the respective fields. You can also slide the toggle, or choose from the options presented. Additionally, update the metric to refine the margin and padding settings.

In the Background Color section, you can enter a specific hex code or select a color from the color picker to align the background color of the section and category with your branding.

With the previous sections now fully customized, you can proceed to the Footers section.

The Content section will open by default, allowing you to customize the visibility of the Business Name, upload your logo from the media library, and adjust the typography of the business name. 

Additionally, you can add your social media platforms to encourage engagement and provide alternative ways for users to connect with your team. You can also toggle the Sticky setting to control how the footer is displayed.

Configure the Margin & Padding settings by entering appropriate values in the respective fields. You can also slide the toggle or choose from the options presented. Additionally, update the metric to refine the margin and padding settings.

Finally, select an image to be displayed in the Footer background, or choose a color to maintain your brand colors.

Now that your template is fully customized, be sure to preview it thoroughly, then click Save to maintain your changes.

Your customers will now be able to view their quiz results on the custom template you’ve designed, providing a tailored and engaging experience.