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.

Customizing Your Quiz Result Template

Access the Result Template

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, Categories, CTA, and Footer. Click on each section to customize.

Header

Content

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.

Margin & Padding

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.

Background Color

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.

Categories- Style

Click the Score card to open the Categories section. By default, the Style tab will be displayed.

Content

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.

Score Settings

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

Margin & Padding

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.

Background Color

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.

Categories- Score Tiers

Navigate to the Score Tiers menu to customize scores with colors and labels, visually categorizing performance levels. To add a tier, click the “+ Add Tier” button, or remove a tier by clicking the trash icon next to the respective tier.

Call to Action (CTA)

Click the CTA section to begin customizing it.

Content

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.

Button Style

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.

Margin & Padding

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.

Background Color

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.

Footer

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

Content

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.

Margin & Padding

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.

Background

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