# Guide to integrate Electronic Signature in Web Flows

> **In simple terms:** This guide shows you how to add electronic signature capability to your web flows. Users will be able to sign documents digitally through a web link.

{{<tags >}}

When creating a Web Flow, you can select the **Electronic Signature** option from the validator blocks. This module provides a link for electronically signing a document or template created in your [ZapSign account](https://app.zapsign.com.br/acesso/entrar?lang=en). The following steps will show you how to integrate **Electronic Signature** in your Web Flows

## Create Zapsign and Truora Integration

To start using **electronic signature** as a validator, it is essential to configure the **Zapsign** integration in your Truora account. This process can be carried out through **Truora´s platform** or via the [API](/guides/electronic_signature/).

To do it from **Truora's platform**, follow the steps detailed below:

1. Once you have accessed [Truora's platform](https://account.truora.com/account#/auth/login), navigate to the **Digital Identity** section and select the **Integrations** option. Look for **Zapsign** and click on **Options**, then proceed to click on **Connect**.

2. Enter the **API token** generated in **Zapsign** and click on **Finish integration**. Don´t worry, in the next section we'll show you how to generate the **Zapsign Token**.

{{<img width="100%" src="/images/illustrations/electronic_signature_integration.gif"alt="Drag and drop box" class="rounded-md">}}

## Create ZapSign Token

1. [Sing in](https://app.zapsign.co/acesso/entrar?lang=en) in your ZapSign account or create one.

2. Within your Zapsign account, select **Settings** **>** **Integration**. Bellow, in the **API** section, you can copy your Zapsign token:

{{<img width="100%" src="/images/illustrations/Zapsign_wa_images/zapsing_wa_10.png" class="rounded-md">}}

## Creating the flow

1. To get started, log in to the Truora dashboard. For instructions on how to create a Web Flow, please refer to the [Create a Web flow](/guides/flows_web/).
We will start by logging in to [Truora dashboard](https://flows.identity.truora.com).

2. Once you have created and named your flow, navigate to the flow builder and select the **Electronic Signature** option from the left-hand menu. Drag and drop this block to add it to your flow.

{{<img width="100%" src="/images/illustrations/electronic_signature_web_1.gif"alt="Drag and drop box" class="rounded-md">}}

- **Note:** The **Data Authorization** block is required to start all web flows, as you must have the user's authorization to use their personal data. For more information please refer to the [**Data Authorization**](/digital-identity/user_consent/) guide.

3. When you select the **Electronic Signature** option, the properties will appear on the right side of the screen. You must configure the integration in order to save and publish the web flow.

 - Once you click on **Configure Integration**, a window will open where you'll need to select the format of the document you previously created in Zapsign. You have the option to choose between **Document** or **Template**. Once you've determined the format type, the documents created earlier and available for association in the validation will appear.

{{<img width="100%" src="/images/illustrations/electronic_signature_web_2.gif"alt="Drag and drop box" class="rounded-md">}}

4. If you select the **Template** option, the variables you've created will be displayed, and you'll have the choice to fill in the information or leave it blank for the user to complete those fields.

{{<img width="100%" src="/images/illustrations/electronic_signature_web_3.gif"alt="Drag and drop box" class="rounded-md">}}

5. When configuring your flow, you can choose to include a **Document Validation**, a  **Face Validation** or both, before the signature of your document:

{{<img width="100%" src="/images/illustrations/electronic_signature_docface_select.gif"alt="Doc or Face Select" class="rounded-md">}}

- If you select a single validation, whether it's a **Document Validation** or **Face Validation** you should drag the corresponding **Document ID** Block or **Face match** Block before the **Electronic Signature** Block:

{{<img width="100%" src="/images/illustrations/electronic_signature_doc_or_face.gif"alt="Doc or Face + Sign" class="rounded-md">}}

- If you choose to include both **Document Validation** and  **Face Validation** you have two options:
    - Drag both the **Document ID** and **Face match** Blocks before the **Electronic Signature** Block:
    {{<img width="100%" src="/images/illustrations/electronic_signature_doc_and_face.gif"alt="Doc and Face + Sign" class="rounded-md">}} 
    - Or, use the **Document ID + Face match** single Block and drag it before the **Electronic Signature** Block:
    {{<img width="100%" src="/images/illustrations/electronic_signature_doc_plus_face.gif"alt="Doc+Face + Sign" class="rounded-md">}} 

***NOTE***: The last successful validation of your user will be added as support to the signed document. Keep in mind that if we do not obtain any of the selected validations, the **Signature validation** will **fail**.

6. Finally, [save](/guides/flows_web/#saving-your-flow-template) and [test](/guides/flows_web/#testing-the-flow-template) your flow! Remember that this link is only for testing purposes and will expire after 15 minutes. If you want to generate a link for **PRODUCTION**, follow the [next steps](/guides/web_integration_token/).

---

## Dynamic document configuration in electronic signature

In certain scenarios, you may have an **identical flow** across **multiple processes**, with the only variation being the **document to be signed**. Creating separate flows for each process can be cumbersome and inefficient when they are essentially identical. This feature enables you to:

- Utilize a **single flow** and seamlessly change the document to be signed.
- Prefill **template variables** directly from the request, streamlining the customization of your signature documents, thus simplifying the process for your users.

### Change the document to be signed in the same flow via-API

1. You must have already created a [Web Flow](/guides/flows_web/), since you will need its **flow_id**.

2. Create a ``POST`` request with the following **URL**: ``https://api.account.truora.com/v1/api-keys``

3. Add the following params in the request body with their respective values:

	- ``key_type``: ``web``
	- ``grant``: ``digital-identity``
    - ``key_name``: api-key user name (Optional)
	- ``country``: The country where the validation is to be performed. **Allowed**: ``ALL``
    - ``redirect_url``: The **URL** where the user is to be redirected once the validation is completed
	- ``flow_id``: from the [Flow](/guides/flows_web/) creation
	- ``account_id``: The **account ID** linked with the validation. Use this ID to trace the validations performed by the account later on. Note that only Account IDs following the regex pattern [a-zA-Z0-9_.-]+ are supported. Please go to [**Create an Account ID**](/guides/account_id/) to learn more about it.
    - ``electronic_signature_config.document_type``:  set whether the document is ``document`` or ``template`` type.
    - ``electronic_signature_config.zapsign_id``: the id of the document that you are going to use for the client to sign.

4. Send the request, and you will receive an ``api_key`` from the response, which you will use to link the flow with the **URL** for your user to proceed with the validation process:

{{<code lang="json" lang_title="Response 200">}}
{
    "api_key": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibm
    FtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQSflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_a
    zRttq59cdkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQSflKxwRJSMeKKF2Q
    T4fwpMeJf36POk6yJV_azRttq59cdkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2M
    jM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_azRttq59cd",
    
    "message": "API key created successfully"
}
{{</code>}}

Now use ``https://identity.truora.com/?token=<api_key>`` and set the ``api_key`` you just generated to create the **URL** to perform the new validation process with the new document you have specified:

{{<img width="100%" src="/images/illustrations/electronic_signature_web_token.gif"alt="Electronic Sign Web Token" class="rounded-md">}}

5. You have now successfully changed the document (``electronic_signature_config.zapsign_id``) to sign in your process and created the **URL** for the new process.<br><br>If you need to use another document for the same user, make the request in **step 3** with the same ``flow_id`` and ``account_id`` changing the ``electronic_signature_config.zapsign_id`` (**document id**) value and the response will return a **new api-key** for a new process with the **same flow**.

### Prefilling the variables of my template via-API

In case your document type is **"template"**, you can prefill the configured document variables by using the following format in your request:

- **key:** ``electronic_signature_config.var.{VARIABLE NAME}`` 
- **value:** VARIABLE VALUE

For example, if your document includes a variable and value ``VARIABLE NAME: FULL NAME``, and you want to set ``FULL NAME`` to ``Alberto Perez``, you would use the following ``key:value`` pair in the **request body** (step 3):

- ``electronic_signature_config.var.{FULL NAME}``: Alberto Perez

Learn how to [Create a dynamic template at ZapSign](/guides/dynamic_template_and_zapsign_id/)