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

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

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

 

3. 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:

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

 

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

 

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

 

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

D. Update Your Website

1. Save Your Changes: Ensure your loader customizations are saved in the Quiz Editor.
2. 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.
3. Replace the Existing Code: Open your website’s HTML and replace the old embed code with the new one.
4. 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.

    Back to blog