Introduction

The OTP (One Time Password) feature allows you to add an extra layer of security and validation to your Quizell quizzes by requiring users to verify their identity via a code sent to their email. This feature is available for Plus users and above. Follow the steps below to enable, configure, and customize this feature.

To check your current plan or explore pricing options, visit our pricing page.

Step-by-step Setup Guide

Step 1: Add the OTP to your quiz

Open the Quizell dashboard and navigate to the Quizzes section.

Locate the quiz you want to edit and click on it.



In your Quiz, select the first question.

From the left-side menu, locate and add the OTP feature.



This will add the OTP section to your quiz.

Note: While it will appear on the same screen in your editor, users will see it on a separate page.



Save your changes.

For tips on customizing the OTP’s design, refer to Step 3 below.

Step 2: Set Up the OTP with an Email Field

Add a visible Email field to your quiz and mark it as a Required field.

Note: An email input is essential for the OTP feature to work.



Save your design.

The flow for your users will look like this:

Users enter their name and email (fields set by the admin).



Users are prompted to enter the OTP.



Users receive the Quizell default OTP email containing the verification code.



Users enter the code into the dedicated field to proceed to the next question.

🎉 Congratulations! The OTP feature is now live in your quiz. Let’s explore how to design and customize it further.

Step 3: Design your OTP field

You can customize the OTP feature’s appearance using the following options in the Quiz Editor:

Feature 1 – OTP Input Style

This feature lets you style the OTP input field and related elements:

· Back Button Text: Set the text for the Back button.

· Resend Button Text: Set the text for the Resend button.

· Input Size: Define the width and height of the OTP input field.

· Stroke: Customize the color, opacity, size, border radius, and type (Box or Line).

· Button Position: Adjust the button’s on-screen position (Left, Centered, or Right).

Feature 2 - OTP Heading Style

Customize the heading for the OTP field:

· Show Text: Toggle the visibility of the heading by using the Hide/Show option. Enter your desired text in the field below.

· Text Style: Adjust the font style, size, and weight.

· Text Alignment: Set the alignment of the text (Left, Centered, Right, or Justified).

· Text Color: Choose the color for your heading text using the color picker.

Feature 3 - OTP Action Button Style

Style the action button that allows users to submit the OTP:

· Button Text: Set the text displayed on the button.

· Button Size: Define the width and height of the button.

· Text Style: Adjust the font style, size, and weight of the button text.

· Button Position: Choose the button’s placement on the screen (Left, Centered, or Right).

· Button Color: Select a color for the button using a HEX code or the color picker.

· Text Color: Choose a color for the text on the button.

· Border Radius: Set the border radius to make the button’s edges rounded or sharp.



Important Note: Don’t forget to save your changes before moving on to your next task!

Conclusion

By enabling and customizing the OTP feature in your Quizell quiz, you can enhance the security and interactivity of your quizzes. With features like customizable input fields, headings, and action buttons, you can design an engaging and user-friendly experience tailored to your brand.

Updated on: 13/12/2024