How to Customize Your Loader

Introduction

Customizing the loader in your Quizell quizzes allows you to align the user experience with your brand. Whether you choose one of Quizell’s ready-to-use loaders or upload a custom design, you can create a seamless and visually appealing experience for your audience. Follow this guide to easily customize your quiz loader.

A. Access the Loader Feature

Open the Quiz: Select the quiz you want to edit from your dashboard.

Navigate to Configuration: Click the Configuration button from the navbar at the top.



Select Loader: In the left-hand Configuration menu, click the Loader

B. Use a Quizell Loader

Select a Loader: Quizell provides ready-to-use loaders that you can add to your quiz. Choose your preferred loader and click Save Changes.



Edit Color: Customize the loader’s color by entering a HEX, RGB, or HSL color code in the dedicated feature at the top right of the screen.

C. Add a Custom Loader

If you prefer a personalized touch, you can upload a custom loader:

Click Add Custom Loader: At the top right of the Loader section, click the Add Custom Loader option.


Upload Your File: Select Click to Upload and choose a file from your computer, or pick an image from the library.



Preview Your Custom Loader: The custom loader you uploaded will now appear in the dedicated space.



Save Your Changes: Click Save Changes at the bottom-right of your screen.

D. Update Your Website

Save Your Changes: Ensure your loader customizations are saved in the Quiz Editor.

Copy the Updated Embed Code: Go to the Share section in the editor, copy the new embed code, and ensure it includes the updated UTM parameter.

Replace the Existing Code: Open your website’s HTML and replace the old embed code with the new one.

Test the Quiz: Visit your website to confirm the updated loader appears and functions correctly.

For more information on UTM parameters, see our guide on Personalizing Quizzes & Forms with UTM Parameters.

E. Tips

Test Thoroughly: Ensure your custom loader works as intended before publishing the quiz.
Prioritize User Experience: Keep the loader design simple and in line with your branding to maintain user engagement.
Keep It Lightweight: Avoid using heavy files for custom loaders to ensure fast loading times and optimal performance.

Updated on: 08/12/2024