Embedded Flow Quickstart Guide

In this lesson, we’ll walk through the process of getting started with Persona’s Embedded Flow, one of the most common implementation methods. You may also hear it referred to as Persona’s React SDK or web SDK.

The Embedded Flow is a drop-in module, so it displays as an overlay on your web application.

Before you begin with any implementation method, you should have at least one Persona solution added to your Organization. As a reminder, our pre-built solutions provide a great way to get started with several Persona products.

For this demonstration, I’m going to be using the Progressive verification solution. This solution includes the following:

progressive verification solution

An Inquiry template containing two different types of verifications:

Inquiry template containing two different types of verifications

And two Workflows that perform automation and conditional logic after each individual completes the flow:

Workflows that perform automation and conditional logic

Getting started with the Embedded Flow is simple. The default code snippet is just about 10 lines of code.

Default code snippet for the Embedded FLow

You can find it in two different places:

  1. The first location is on the Integration Guides page of the dashboard, within the Embedded Flow tab. Before copying the code snippet, make sure that you’ve selected the relevant Inquiry Template. If you have multiple Inquiry Templates in your organization, you can use the dropdown toggle to find the relevant one.
  2. The second location is in our Developer documentation — more specifically, the Getting Started page within the Embedded Integration section. If you’re copying the code snippet from this page, make sure to review some of the comments included in the snippet. For example, you’ll need to specify things like the Inquiry template, environment ID, and version of the Inquiry SDK you want to use.

Next, I’ll take us to JSFiddle to illustrate the Embedded Flow in action. I’m running the snippet now to generate a preview of the drop-in module on the right.

jsfiddle

In addition to the default snippet, the Embedded Flow supports additional parameters. These can be added as key-value pairs within the snippet.

One of the more common examples is to specify a referenceID or an accountID that connects a newly created inquiry to a specific account on Persona.

dynamically preset inquiry field values

Fields is another frequently used parameter. With it, you can dynamically preset inquiry field values like name, birthdate, address, and more. Doing this provides some convenience for your users in a manner similar to browser autofill. Check the configurations of your Inquiry template in the Persona dashboard to see what fields the template is using.

autofilled fields

You’ll find more examples of optional parameters in the documentation linked below this video.

Before we wrap up this video, let’s talk about handling users after they’ve completed the flow.

Depending on your implementation, there may be some processing time involved after each individual completes the flow. One common example is if you’re performing additional orchestration and decisioning via a Workflow.

During this processing time, many of our customers leverage client callbacks to transition the user to the appropriate screen, page, or experience in your system. This helps to create a smooth user experience while you system waits to receive webhooks or poll Persona APIs to retrieve the final decision.

Related Documentation