Home / Digital identity / Customize web flow

Customize your web flow

Product: Digital Identity Verification

This guide will show you how to configure the behavior and appearance of a web flow through our flowbuilder.

Once you have created a flow, click on 02 Settings. There, in the sidebar menu, you can select Flow Config, Brand Theme and User recovery which will be described in the next sections:

Configuration in the Flow Builder

Flow config

Click the Flow Config button, to configure the flow’s behavior. You can enable the following options:

  • Enable desktop flow: Allows the user to continue the identity process on a desktop device.

  • Enable continue flow in new device: Allows the user to continue the identity process on a new device.

  • Allow native camera: Allows the use of the native camera (even if the user has disabled camera permissions, they will still be able to access the device’s native camera and return to the flow).

  • Enable limit of allowed process attempts: Limit the number of processes a user can perform. If you select this box, you can choose one of the following options:

    Flow Attempts Limit

    • Limit of attempts per time: You can set the amount of attempts a user can perform per day and per month.
    • Permanent blocking: You can limit the amount of attempts a user can perform before being permanently blocked.

      Remember you can enable only one of the two options. Once the limit you chose is reached, the user must wait until the next day or month to be able to perform a process again or in case Permanent block was selected, the person will need to contact to customer service.

      To use this configuration remember that you must have configured a unique account id for each user.

      Note: The maximum number of processes per day is 72 and per month is 2160.

  • Identity process expiration time: Set the expiration time of the identity process. The maximum expiration time you can set is 1440 minutes (24 hours). If you don’t set it, the default expiration time is set to 120 minutes (2 hours).

    Process Expiration Time

Brand theme

Brand theme in the Flow Builder

Click on Brand Theme to configure the appearance of your flow. With this feature, you can customize the following options:

Images

  • Upload your logo: This is the logo displayed at the top.
  • Upload your intro image: This is the image in the center of the screen.

Select colors

  • Primary color: Used for buttons.
  • Secondary color: Used for highlighting elements and focus.

Select main font

You can select your preferred font from Google Fonts and customize colors:

  • Font color: The main font color on the screen.
  • Button Font Color: The font color inside buttons.

Main Background

This will affect only the desktop view:

  • Background Image: Allows you to place an image as a background (behind the main card).
  • Background Color: The color covering the screen behind the main card.
  • Card Color: The color used for the main card which shows the flow steps.

Note: To customize the theme of a flow, we accept images in PNG and JPG formats with a maximum size of 5 MB. It is essential that the images are clear and sharp. Additionally, high-resolution images are recommended to avoid pixelation and distortion in the display.

User recovery

Click the User Recovery button to configure the message that will be sent via WhatsApp to recover users who abandoned the process. For more information about configuring this feature, please refer to the guide Activate User Recovery.

User Recovery Config

Testing the flow template

Once you have configured the flow, you can start testing the flow.


Flow config via API (Advanced)

Flow configuration via API requires good understanding of APIs and authentication schemes. We strongly recommend having a developer or a tech-savvy individual assist with this process.

Be aware that any unintended changes made during this process can alter or disrupt the functionality of your Web Flow. Proceed with caution and ensure you understand each step before making modifications.

In this section we will show you the basic endpoints you need to know along with a simple example to understand how to Update a flow configuration. For this example we created a simple flow following the Create Flow guide, including a Face Validation block (Face match).

In the next steps we will:

  • Get Flow: Retrieve all the information of your flow in a JSON file using this request.
  • Identify Parameters: Identify which parameters need to be deleted, added, or modified.
  • Update Flow: After identifying the necessary changes, update the JSON file accordingly and make the Update Flow request to successfully update your flow.

Prerequisites

Before you begin, make sure you have the following:

  1. Truora API-Key: This key grants access to our services. If you don’t have one already go to Create Truora API-Key to obtain your Truora API-key.

  2. Web Flow ID: You should already have created a flow. Extract your Web Flow ID from My Flows in our dashboard.

  3. Postman: Use Postman or any other collaboration tool for API development. Although it is not required to perform the integration, it will help perform tests along the way.

Get Flow

The Get Flow endpoint enables you to search for an identity process flow. In the response, the general config section will display the default parameters and those set during the flow creation. This section, located at the top of the response, will help you identify which parameters need to be added or modified.

Setup main Request Headers

To configure the main request headers follow these steps:

  1. Create a GET request to the endpoint https://api.identity.truora.com/v1/flows/{{web_flow_id}} using the web_flow_id from step 2 in Prerequisites section.
  2. Set the Headers
    • Truora-API-Key: enter the value of your Truora API-Key from step 1 in Prerequisites section.

Send Get Flow request

Send the Get Flow request you just created. You will receive a response similar to the following:

GET
v1/flows/{{web_flow_id}} 

    {
        "flow_id": "IPFXXXXXXXXXXXXXXXXX",
        "client_id": "TCIXXXXXXXXXXXXXXXXXXXX",
        "username": "john@doe.com",
        "version": 3,
        "name": "test-flow",
        "status": "enabled",
        "type": "permanent",
        "creation_date": "2024-05-25T15:00:25.706020566Z",
        "update_date": "2024-05-25T15:11:47.381381562Z",
        "version_start_date": "2024-05-25T15:11:47.498435715Z",
        "config": {
            "allow_native_camera": true,
            "continue_flow_in_new_device": true,
            "enable_desktop_flow": true,
            "end_business_hours": "2021-01-01T00:00:00Z",
            "follow_up_delay": 120,
            "follow_up_message": "Tienes un proceso activo en curso",
            "lang": "en",
            "start_business_hours": "2021-01-01T13:00:00Z",
            "time_to_live": 120
        },
        "identity_verifications": [
            {
                "verification_id": "VRFXXXXXXXXXXXXXX",
                "name": "enter_authorization",
                "config": {
                    "should_update_process_status_on_failure": false,
                    "supported_countries": {
                        "ALL": {
                            "name": "company"
                        },
                        "CO": {
                            "name": "company",
                            "nit": "980XXXXXXXXX"
                        }
                    }
                },
                "steps": [
                    {
                        "step_id": "IPSXXXXXXXXXXXXXXXXXXX",
                        "type": "enter_authorization",
                        "verification_output": null,
                        "redirect_url": "",
                        "config": null,
                        "expected_inputs": [
                            {
                                "type": "text",
                                "value": "",
                                "name": "authorization",
                                "placeholder": "Autorización del uso de los datos",
                                "description": "",
                                "options": [
                                    "Si",
                                    "No, más tarde"
                                ],
                                "length": 0,
                                "read_only": false
                            },
                            {
                                "type": "text",
                                "value": "",
                                "name": "client_authorization",
                                "placeholder": "Autorización del uso de los datos del cliente",
                                "description": "",
                                "options": [
                                    "Si",
                                    "No"
                                ],
                                "length": 0,
                                "read_only": false
                            }
                        ],
                        "files_upload_urls": null,
                        "remaining_retries": 0,
                        "async_step": null,
                        "verification_id": "VRFXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
                    }
                ],
                "if": null
            },
            {
                "verification_id": "VRFXXXXXXXXXXXXXXXXXXXXXX",
                "name": "face_recognition",
                "config": {
                    "face_threshold": 0.65,
                    "timeout": 300,
                    "should_update_process_status_on_failure": false,
                    "liveness": false,
                    "liveness_type": "photo",
                    "recorder": "truora"
                },
                "steps": [
                    {
                        "step_id": "IPSXXXXXXXXXXXXXXXXXXXXXXX",
                        "type": "record_face_video",
                        "verification_output": null,
                        "redirect_url": "",
                        "config": null,
                        "expected_inputs": null,
                        "files_upload_urls": null,
                        "remaining_retries": 0,
                        "async_step": null,
                        "verification_id": "VRFXXXXXXXXXXXXXXXXXXXXX"
                    },
                    {
                        "step_id": "IPSXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                        "type": "enter_face_verification",
                        "verification_output": null,
                        "redirect_url": "",
                        "config": null,
                        "expected_inputs": [
                            {
                                "type": "hidden",
                                "value": "",
                                "name": "actions_face_liveness",
                                "placeholder": "",
                                "description": "",
                                "length": 0,
                                "read_only": false
                            }
                        ],
                        "files_upload_urls": [
                            {
                                "name": "face_video",
                                "url": "",
                                "description": "Ahora envía una selfie para validar tu identidad."
                            }
                        ],
                        "remaining_retries": 0,
                        "async_step": true,
                        "verification_id": "VRFXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
                    }
                ],
                "if": null
            },
            {
                "verification_id": "get_validations_result",
                "name": "get_validations_result",
                "steps": [
                    {
                        "step_id": "IPSXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                        "type": "get_validations_result",
                        "verification_output": null,
                        "redirect_url": "",
                        "config": null,
                        "expected_inputs": null,
                        "files_upload_urls": null,
                        "remaining_retries": 0,
                        "async_step": null,
                        "verification_id": "get_validations_result"
                    }
                ],
                "if": null
            }
        ]
    }

As you can see, the response includes a general “config” section with all the parameters that were set. This section, located at the top of the response, helps you identify which parameters you will need to add or modify in your flow.

Important: We highly recommend copying the whole body of the JSON response you received from the GET Flow request and saving it before making any changes. Then, proceed to modify only the necessary values to use in the next steps. This helps ensure that you’re modifying the correct parameters and minimizing the risk of errors.

Update Flow

The Update Flow endpoint enables you to update identity process flow parameters. To identify which parameters you can add, modify, or delete, first check the response you received from the GET Flow request. Then, visit the Flow Config Parameters section for details on the desired parameters, including their descriptions and data types.

For this particular example we will make the following changes:

  • enable_desktop_flow: change from true to false.
  • time_to_live: change from 120 minutes to 180 minutes.
  • force_native_camera: add this parameter set to true.
  • follow_up_message: change from: “Tienes un proceso activo en curso” to: “You have an active process in progress”

Extracting only the config portion, with the modifications, it should look like this now:

JSON 

        "config": {
            "allow_native_camera": true,
            "continue_flow_in_new_device": true,
            "enable_desktop_flow": false,
            "end_business_hours": "2021-01-01T00:00:00Z",
            "follow_up_delay": 180,
            "follow_up_message": "You have an active process in progress",
            "force_native_camera": true,
            "lang": "en",
            "start_business_hours": "2021-01-01T13:00:00Z",
            "time_to_live": 120
        },

Remember: The entire JSON response you received from the GET Flow request must be sent in the Update Flow request. Only modify, delete, or add the necessary values for your flow.

Setup main Request Headers and Body

To configure the main request headers and body, follow these steps:

  1. Create a POST request to the endpoint https://api.identity.truora.com/v1/flows/{{web_flow_id}} using the same web_flow_id from the previous step.
  2. Set the Headers
    • Truora-API-Key: enter the value of your Truora API-Key from step 1 in Prerequisites section.
    • Content-Type: the value should be application/json (raw JSON in Postman).
  3. Configure the Body of the Request:
    • If using Postman, set the body type to raw and select JSON from the format dropdown.
    • Include the entire JSON you received in the GET Flow request.
    • Apply your specific modifications within this JSON, such as adding new parameters, modifying existing ones, or deleting certain parameters.

It is crucial to double-check that the web_flow_id you include in the endpoint matches the flow_id value specified as the first parameter in the JSON Body of the request. If they do not match, the modifications could be applied to the wrong flow, potentially disrupting its operation. Ensure this verification step is performed before sending the request.

Send Update Flow request

Send the Update Flow request you just created. You will receive a response similar to the following, with a new version of your flow:

POST
v1/flows/{{web_flow_id}} 

    {
        "flow_id": "IPFXXXXXXXXXXXXXXXXX",
        "client_id": "TCIXXXXXXXXXXXXXXXXXXXX",
        "username": "john@doe.com",
        "version": 4,
        "name": "test-flow",
        "status": "enabled",
        "type": "permanent",
        "creation_date": "2024-05-25T15:00:25.706020566Z",
        "update_date": "2024-06-25T03:40:22.876748565Z",
        "version_start_date": "2024-06-25T03:40:22.87674676Z",
        "config": {
            "allow_native_camera": true,
            "continue_flow_in_new_device": true,
            "end_business_hours": "2021-01-01T00:00:00Z",
            "force_native_camera": true,
            "follow_up_delay": 180,
            "follow_up_message": "You have an active process in progress",
            "lang": "en",
            "start_business_hours": "2021-01-01T13:00:00Z",
            "time_to_live": 120
        },
        "identity_verifications": [
            {
                "verification_id": "VRFXXXXXXXXXXXXXX",
                "name": "enter_authorization",
                "config": {
                    "should_update_process_status_on_failure": false,
                    "supported_countries": {
                        "ALL": {
                            "name": "company"
                        },
                        "CO": {
                            "name": "company",
                            "nit": "980XXXXXXXXX"
                        }
                    }
                },
                "steps": [
                    {
                        "step_id": "IPSXXXXXXXXXXXXXXXXXXX",
                        "type": "enter_authorization",
                        "verification_output": null,
                        "redirect_url": "",
                        "config": null,
                        "expected_inputs": [
                            {
                                "type": "text",
                                "value": "",
                                "name": "authorization",
                                "placeholder": "Autorización del uso de los datos",
                                "description": "",
                                "options": [
                                    "Si",
                                    "No, más tarde"
                                ],
                                "length": 0,
                                "read_only": false
                            },
                            {
                                "type": "text",
                                "value": "",
                                "name": "client_authorization",
                                "placeholder": "Autorización del uso de los datos del cliente",
                                "description": "",
                                "options": [
                                    "Si",
                                    "No"
                                ],
                                "length": 0,
                                "read_only": false
                            }
                        ],
                        "files_upload_urls": null,
                        "remaining_retries": 0,
                        "async_step": null,
                        "verification_id": "VRFXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
                    }
                ],
                "if": null
            },
            {
                "verification_id": "VRFXXXXXXXXXXXXXXXXXXXXXX",
                "name": "face_recognition",
                "config": {
                    "face_threshold": 0.65,
                    "timeout": 300,
                    "should_update_process_status_on_failure": false,
                    "liveness": false,
                    "liveness_type": "photo",
                    "recorder": "truora"
                },
                "steps": [
                    {
                        "step_id": "IPSXXXXXXXXXXXXXXXXXXXXXXX",
                        "type": "record_face_video",
                        "verification_output": null,
                        "redirect_url": "",
                        "config": null,
                        "expected_inputs": null,
                        "files_upload_urls": null,
                        "remaining_retries": 0,
                        "async_step": null,
                        "verification_id": "VRFXXXXXXXXXXXXXXXXXXXXX"
                    },
                    {
                        "step_id": "IPSXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                        "type": "enter_face_verification",
                        "verification_output": null,
                        "redirect_url": "",
                        "config": null,
                        "expected_inputs": [
                            {
                                "type": "hidden",
                                "value": "",
                                "name": "actions_face_liveness",
                                "placeholder": "",
                                "description": "",
                                "length": 0,
                                "read_only": false
                            }
                        ],
                        "files_upload_urls": [
                            {
                                "name": "face_video",
                                "url": "",
                                "description": "Ahora envía una selfie para validar tu identidad."
                            }
                        ],
                        "remaining_retries": 0,
                        "async_step": true,
                        "verification_id": "VRFXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
                    }
                ],
                "if": null
            },
            {
                "verification_id": "get_validations_result",
                "name": "get_validations_result",
                "steps": [
                    {
                        "step_id": "IPSXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
                        "type": "get_validations_result",
                        "verification_output": null,
                        "redirect_url": "",
                        "config": null,
                        "expected_inputs": null,
                        "files_upload_urls": null,
                        "remaining_retries": 0,
                        "async_step": null,
                        "verification_id": "get_validations_result"
                    }
                ],
                "if": null
            }
        ]
    }

Notice that all the changes have been applied, and additionally, the fields version, update_date and version_start_date have been updated.

Fields that we set to true, like force_native_camera will now be visible in the “config” list, while those we set to false, like enable_desktop_flow, will no longer be visible in the “config” list.

After this, the flow will be updated with the changes specified in the JSON Body, and you should be able to test the flow again.

Flow Config Parameters

Below is a detailed description of the configuration parameters for the flow. Click on each parameter to expand its description and data type, allowing for a comprehensive understanding of its purpose and usage.

If you have any questions or doubts about the functionality or setting of the parameters, please contact Support.