Overview
This Web Flow template has pre-configured components allowing builders to capture and verify user email addresses through a one-time password method. From Activity Builder, this Web Flow can be tailored to provide users with a customized experience.
Email Verification with OTP Web Flow template components
This Web Flow contains two Web Pages with the following components:
Capture Email Page
- Two Label controls, one with the title and a second one with instructions.
- An Email Input control for the user to enter their email address.
- A Verify Button control with two actions
- A Run Data Flow action that broadcasts a Generate One-Time Password Code Data Flow that creates the verification code.
- A Navigate to Web Page action leading the user to the next page.
Verify Email Page
- Two Label controls, one with the title and a second one with instructions.
- A Text Input control for the user to enter the verification code.
- A Label indicating the user to enter a valid code in case an invalid one was entered.
- A Submit Button control that runs the Verified Event based on the condition that the code is valid.
- A Resend Button control that triggers two Data Flows:
- A Generate One-Time Password Code Data Flow that creates the verification code.
- A Verification Code Send Email Data Flow that sends the code to the user via email.
- A Change Email Button control with a Navigate to Web Page action that takes the user to the first page again so that the email address can be changed.
Web Flow Variables and Inputs
This Web Flow also contains the following configuration Variables:
verifyAB.png
These Variables can be set from Journey Builder or builders can have other Variables determine these parameters.
Web Page Variables
This Web Flow has the following Variables saving the information and choices of the user in its Web Pages:
Capture Email Page
- verification_code
Verify Email Page
- input_code
- user_email
- code_invalid
- code_expiration
Data Flows
This Web Flow includes two Data Flows that can be seen from Connection Builder.
Generate One-Time-Password Code
This Data Flow is run by the Verify and Resend buttons and generates a one time password code based on the length that is provided as an input.
Inputs
- length: length of the one time password code
Outputs
- code: the randomly generated code based off of the length provided
Verification Code Send Email
This Data Flow is run by the Submit and the Resend buttons. It sends the user the verification code that is generated from the Generate One-Time-Password Data Flow.
Inputs
- user_email: email of the user to send the code to
- verification_code: code that is generated from the Generate One-Time-Password Data Flow
Events
In Journey Builder, the application’s path can be extended by adding an action or a node to the Journey following the Verified Event.
Use Cases
- Allow app builders to capture and verify email addresses with a one-time password through the app.