Mobile provider onboarding

This tutorial shows you how to create a flow to simulate a basic onboarding of users.

Picture a potential end-user interested in signing up for a new mobile plan. As a mobile provider, you want to create a web form where end-users can choose a mobile plan, share personal details and verify their identity. This is just one of many possible scenarios.

The goal is to build a flow that lets end-users fill in a web form and authenticate with an electronic identity method (eID). In this tutorial you will learn how to build the following user journey:

User journey overview

Overview

The steps in this tutorial rely on the following Signicat services:

• Form (native) to create web forms.
• Authentication REST API to connect to an eID.
• eIDs to authenticate and verify end-user identity.

On a high level, the workflow looks like this:

Workflow overview

1. Create a web form for end-users to enter personal details and choose a mobile plan.
2. Get end-users to authenticate with an eID.
3. Show the data collected back to end-users for confirmation.
4. Redirect end-users to a custom landing page.
5. Review and monitor completed user journeys.

Prerequisites

If you do not have an account already, then you need to sign up to the Signicat Dashboard for free and complete the initial preparations. To do this:

1. Sign up to the Signicat Dashboard and register your profile.
2. Ensure that you have created an organisation.
3. Create an account. To do this:
   1. Go to Signicat Dashboard > Organisation, then select + Add account.
   2. Enter an account name, choose the type of account that you want to create, then select Create.
4. Create a domain. To do this:
   1. Go to Signicat Dashboard > Settings > Domain management, then select + Add domain.
   2. To create a standard domain, enter a domain name. Then, select Add domain.
   3. To create a custom domain, follow the instructions in the Custom domains documentation.

Account types

We recommend that you create a sandbox account to test our services before going live. Sandbox and production accounts must be set up separately.

Mint permissions

To create and edit Mint workflows, your user in the Signicat Dashboard needs the Account Viewer role and at least one of the following permissions:

• Mint Admin
• Mint Editor
• Mint Workflow Builder Editor

For more information, see the Managing roles and permissions page.

Configure eIDs

To follow along this tutorial, you need to add at least one eID in the Signicat Dashboard at Products > eID and Wallet Hub > eIDs. Learn how to do this in the Add eIDs guide. This tutorial uses Norwegian BankID.

Create a new flow

With Mint you define all your operations inside a workflow. To create a new Mint workflow, do the following:

1. In the Signicat Dashboard, go to Products > Signicat Mint.
2. From the Mint sidebar, select Builder.
3. Select Blank to create a flow without template.
4. Enter a name and a description.
   What your end-users see

   The name and description of a workflow are visible to the end-users at the start of the user journey.

5. Select Create flow.

Create new flow

Take the first step

About steps

Steps are the building blocks of your flows. Each step represents a modular piece of functionality, such as authenticating end-users with an eID or sending an email. To build your desired flow, you can chain as many steps as you want.

Create a web form

To let end end-users enter their personal details and choose a mobile plan, you can use a web form. To add a Form step, do the following:

1. In the Builder UI, select the plus (+) icon, then select Step.
2. In the "Steps" tab on the left sidebar, select Signicat > Form to add a web form.

You have now added an empty Form step. This is a scaffold to build and customise your web form. Now, you can add and configure elements, such as an input text field or a checkbox.

Add elements

About elements

Elements are the atomic blocks of a web form. For example, you can insert a text box, a checkbox and a dropdown menu. Elements help you determine the structure and function of a web form.

Add a header

1. In the "Form elements" tab, select Special elements > Header. A default "Placeholder" value is present at first. If you select the element in the canvas, you can edit its settings.
2. In the left sidebar menu in the empty "Text" field change the value to "Mobile plans". Note how the text in the Form step in the canvas updates accordingly.

Add a header

Add a description

1. In the "Form elements" tab, select Special elements > Text Block to add a text element to the form. Then, select the text block element in the canvas.
2. In the left sidebar menu, enter a description in the Text field. Your form should now look similar to the following:

Add a description

Add input fields

Input fields allow end-users to submit information. Data submitted during the user journey can be reused to prefill other steps within a flow. At the end of a user journey, you can access all the data in the Mint Journeys.

In the web form, add a few elements for end-users to submit:

• First name
• Last name
• Phone number
• Email address

To do this:

1. In the "Form elements" tab, select Inputs > Text to add a text input element. Then, select the text block element in the UI.
2. Change the "Label" field in the left sidebar menu to "First name".
3. Select the copy icon at the top right of the element to duplicate the element (text input). Now, change the "Label" field of the new text input element to "Last name".
4. To an email field, select the Inputs > Email element.
5. Then, add a phone number field by selecting the Inputs > Phone element.

Add a dropdown

To add a dropdown for end-users to choose a mobile plan from a list of options:

1. Select the Inputs > Dropdown element. Select the element in the form UI to edit the settings.
2. In the left sidebar menu, change the "Placeholder" field to "Select a plan". This is the default value displayed in the rendered web form.
3. In the left sidebar menu, add the names of the plans to the "List of options". To do this, type "Basic" inside the "Add new option" field and select the plus (+) sign next to it.
4. Repeat the previous step to add "Plus" and "Unlimited" as options.

Add a consent checkbox

A consent checkbox lets end-users give consent to the processing of personal data. To add a consent checkbox in the flow, do the following:

1. Select the Special elements > Consent element. Select the element in the form UI to edit the settings.
2. In the left sidebar menu, change the "Checkbox text" field to a consent text. For example, "I agree to the Terms and Conditions.".

(Optional) Edit step options

You can edit the title of a step to keep your workspace tidy. You can also customise some generic features of a step, such as the text of the submit button in a web form.

To view the main settings of a step:

1. Select a step and select the "Step options" tab in the left sidebar menu.
2. Edit the "Step title” field to change the title of the step displayed in the UI.
3. Rename the step to "Mobile form".

When you compress your flow in the canvas, you can see the custom name displayed.

Save your flow

Before continuing with the next step, save your flow. In the top right of the screen, select Save to save the flow. While building a flow, you can save anytime you want to make sure you don't lose any progress you make.

You have just added your first step! Your web form should look like this:

Web form

Identify with eID

The Identify with eID (formerly Authentication) step allows you to create an authentication session to verify the identity of end-users with electronic identity methods (eIDs) — for example when they want to authenticate to your online services. In the background, Mint connects to the Authentication REST API.

Required eID configuration

Before you can perform authentication, you must add and activate the eID in your Signicat account.

To view and configure the eIDs in your Signicat account, go to Dashboard > eID and Wallet Hub > eIDs. To learn how to add eIDs, see the Add eIDs documentation.

To add the Identify with eID step to your flow:

1. In the Builder UI, select the plus (+) icon below the web form step.
2. Select Step.
3. In the "Steps" menu on the left, select eID and Wallet Hub > Identify with eID.

Add Identify with eID

Configure the step

The Identify with eID step allows you to build the request to the Authentication REST API from the Mint interface, without the need to write any code.

In the step configuration you choose the eID(s) and define the attributes in the payload object of the request. For example, the fields in the "Requested attributes" map one-to-one to the requestedAttributes of the Authentication REST API to Create a new session.

To configure the step:

1. Select "First name", "Last name", "Date of birth" and "National ID number" (NIN) from the list of "Requested attributes". These attributes correspond to the data you receive from the eID when end-users authenticate.
   

   Requested attributes

2. Select "Norwegian BankID" from the list of "Allowed providers". This means that Norwegian BankID is the eID end-users can choose to authenticate with.

Now, your end-users can authenticate with Norwegian BankID. Next, let's add a step to display the personal data retrieved during authentication.

Workflow overview

Data variables

With Mint, you can use variables to bring that data collected in a step into later steps and reuse the information. For example, the name of an end-user submitted in the authentication step can be referenced with a variable and used in web form (step) later in the flow.

Show the data

After authentication, you might want to show the data gathered during the onboarding journey back to the end-user. This way they can review their application and confirm that the information is correct.

To show the data in a web form:

1. In the Builder UI, add a new step and select Signicat > Form in the "Steps" tab.
2. Add a Special elements > Header to the web form and change the "Text" to "Your mobile plan summary".
3. Add a Special elements > Text Block to display data from the previous steps.
4. In the text field, type "First name: ", then select the + (plus) icon and choose the Mobile form.First name field. Mint automatically populates the field with the first name of the end-user after the text "First name: ".
5. Add more Text Block elements for all the other data variables of your choice. For example, your form could look like this:

Data in web form

You have completed yet another step! Let's save and add a redirect link to send end-users to a specific webpage at the end of the journey.

Add a redirect link

Once end-users complete all the steps, a confirmation screen is displayed, by default.

To customise where to redirect your end-users at the end of a user journey:

1. In the Builder UI, add a new step and choose Signicat > User Redirect in the "Steps" tab.
2. Enter the URL of a webpage in the "Redirect URL" field. For example, https://www.signicat.com/products/trust-orchestration/mint.

Your flow should now look similar to this:

Workflow overview

Save and Publish

You have just built your first flow! Now, it's time to save, publish and share it with your end-users.

1. Select Save at the top-right corner.
2. Select Publish to publish the flow. Now, Mint generates a public URL that you can share with your end-users. The workflow URL is automatically copied to your clipboard.

Where to find the workflow URL

To copy the workflow URL again, select the More Options icon (more_vert) at the top-right corner. Then, select Copy workflow URL.

You have just published your first flow with Signicat Mint. Go ahead and test it!

See it in action

In your browser, open a new window and paste the workflow URL to start the user journey and test how your end-users experience the workflow.

You can mock an authentication with Norwegian BankID by using a test user as follows:

Here is a video view how the user journey looks like:

User journey overview

View and monitor user journeys

You can find reports of all the finished, suspended and failed user journeys in Mint Journeys. Select a journey to view details about the steps and access the log in JSON format. To learn more about the interface, see in the Mint Journeys documentation.

Next steps

Continue your journey with Mint:

Mint tutorials

Explore more Mint tutorials

Steps

Learn about the building blocks of your flows