OTP Verification

Used to verify the code sent to the audience

I - INTRODUCTION

To add a OTP verification block, drag and drop it to the workspace

The elements in the block include:

OTP Form : The field to input the code
Expiration timer: A countdown to mark the time the code could not be used
Verify button: The CTA button used to verify OTP action
Resend button: The CTA button used to send the code again

In the setting panel, there are two tabs:

Content - Include the basic information settings

Layout: Choose the layout of the block
OTP Form: Set general information of the input field which allow users to enter the code
Resend Button: Basic settings of Resend button
Verify button: Basic settings of Verify button
Message: set up notifications on the block: Verify OTP and Resend
Event Trigger: The event to be fired if the OTP has been verified successfully

Advanced - Include the complex design settings

OTP Form Styling
Input Field Styling
Resend Button Styling
Verify Button Styling
Message Styling
Container Styling

II - DETAILS

A - Content

1. Layout

Popular layout will be chosen by default. You could choose any type of layout you want. The differences between these layouts lies in the arrangement of elements in it.

2. OTP Form

Width: The width of OTP block
Align: The alignment of elements in OTP block
Timer Label: The label of the countdown. The amount of time to be count downed will vary depending on the Service Provider set in Optin Field (Read here)
Expired Message: The message which will replace the countdown if the timer has counted to 00:00

3. Resend Button

Description: The description attached to the Resend button. You can see it only if Popular & Neat layout is chosen
Button Text: The label of the button
Width: The width of the button
Align: The align of the button
Button Size: The size of the button

4. Verify Button

Button Text: The label of the button
Button Click Action: The action to be performed after the button is clicked
Go to View: The screen to be appeared after the button is clicked
Width: The width of the button
Align: The alignment of the button
Button Size: The size of the button

5. Message

Here you can enter the content and position of the message to be displayed when:

The code has been verified unsuccessfully
The code has been sent again

6. Trigger Event

Choose the event to be triggered after the code has been verifed successfully. By default, the Verify OTP Successfully event will be chosen. This event could be used in Segment and Customer Journeys later. (Read here)