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)
B - Advanced
1. OTP Form Styling
Adjust the appearance of the whole OTP block
2. Input Field Styling
Adjust the appearance of the OTP input field
3. Resend Button Styling
4. Verify Button Styling
Adjust the appearance of the Verify Button
5. Message Styling
Adjust the appearance of the message
6. Container Styling
Adjust the appearance of the whole container which include the block
After editing the block, you could have the result like the example below:
Last updated
Was this helpful?