The Quiz Result Template is the screen users see when they finish a quiz. It's the final step of the quiz experience and can serve a number of purposes depending on what you want to achieve. You can use it to present results, confirm completion, and point users towards their next steps based on how they performed.
Customising Your Quiz Result Template
Access the Result Template
Go to the Quiz Builder from the Sites section of your account. Select an existing quiz from the list, or click the "+ Add Quiz" button to create a new one.
Scroll to the bottom of the builder to find 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 customise it.
Score Tiers
Click "Configure Score Tiers" to customise scores with colours and labels, visually categorising 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 relevant tier.
To modify existing tiers, click the colour square to change (1) the colour representing that tier, the tier's display name (2), and the starting (3) and ending (4) percentage contained within that tier.
Once you're happy with your tiers, click Save.
Settings
Click the Settings button to set names for your custom fields and their respective unique keys.
Header
The Content section opens by default, with options to customise the visibility of the Business Name, select the default header layout position (left-aligned), or opt for the reverse (right-aligned). You can also 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 relevant fields.
You can also slide the toggle, or choose from the options presented.
You can also update the metric used to further refine the margin and padding settings.
Background Colour
In the Background Colour section, enter a specific hex code or select a colour from the colour picker to match your branding.
Overall Score
Content
Here you can display dynamic content based on the grade the contact received. Toggle each tier and enter 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 want the score to be displayed, you can also specify its format and position.
Margin & Padding
Configure the Margin & Padding settings by entering appropriate values in the relevant fields. You can also slide the toggle or choose from the options presented. Update the metric to refine the margin and padding settings.
Background Colour
In the Background Colour section, enter a specific hex code or select a colour from the colour picker to match your branding.
Category Score
For quizzes with sub-categories, created via the Manage Categories button in the quiz builder or from an element's settings, click the Category Score card to open its options.
Content
Here you can display dynamic content based on the grade the contact received. Toggle each tier and enter the corresponding message to be displayed.
Score Settings
Configure whether the score should be displayed to the user, and define the preferred format in which it should appear.
Margin & Padding
Configure the Margin & Padding settings by entering appropriate values in the relevant fields. You can also slide the toggle, or choose from the options presented. Update the metric to refine the margin and padding settings.
Background Colour
In the Background Colour section, enter a specific hex code or select a colour from the colour picker for the section and category background to match your branding.
Individual Category
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 needed using the right-side bar. This section works well for assigning users a type, style, or persona based on their responses.
Content
Here you can display dynamic content based on the score the contact received. Toggle each tier and enter the corresponding message to be displayed.
Margin & Padding
Configure the Margin & Padding settings by entering appropriate values in the relevant fields. You can also slide the toggle, or choose from the options presented. Update the metric to refine the margin and padding settings.
Background Colour
In the Background Colour section, enter a specific hex code or select a colour from the colour picker for the background to match your branding.
Call to Action (CTA)
Click the CTA section to begin customising it.
Content
Here you can display dynamic content based on the grade the contact received. Toggle each tier and enter the corresponding message to be displayed. You can also enter the text for 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.
Button Style
Open this section to update the button and/or text colour. Enter a specific hex code or select a colour from the colour picker to match your branding.
Margin & Padding
Configure the Margin & Padding settings by entering appropriate values in the relevant fields. You can also slide the toggle, or choose from the options presented. Update the metric to refine the margin and padding settings.
Background Colour
In the Background Colour section, enter a specific hex code or select a colour from the colour picker to align the background colour of the section and category with your branding.
Footer
With the previous sections customised, you can move on to the Footer section.
Content
The Content section opens by default, letting you customise the visibility of the Business Name, upload your logo from the media library, and adjust the typography of the business name.
You can also add your social media platforms to encourage engagement and give users other ways to connect with your team. Toggle the Sticky setting to control how the footer is displayed.
Margin & Padding
Configure the Margin & Padding settings by entering appropriate values in the relevant fields. You can also slide the toggle or choose from the options presented. Update the metric to refine the margin and padding settings.
Background
Finally, select an image for the Footer background, or choose a colour to maintain your brand colours.
Once your template is fully customised, preview it thoroughly, then click Save to keep your changes.
Your customers will now be able to view their quiz results on the custom template you've designed.