> For the complete documentation index, see [llms.txt](https://docs.transactionlink.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.transactionlink.io/docs/v1/integration-quick-guide/embedded-flow.md).

# Embedded Flow

## Flow Overview

{% @mermaid/diagram content="sequenceDiagram
participant Customer
participant Web App
participant Auth
participant Cases
participant Token
Customer ->> Web App: Start Onboarding
activate Web App
Web App ->> Auth: POST /auth/authorize<br/>Request: {key, secret}<br/>Host: api.transactionlink.io
activate Auth
Auth -->> Web App: 200 OK {accessToken, refreshToken}
deactivate Auth
Web App ->> Cases: POST /cases<br/>Authorization: Bearer {accessToken} <br/>Payload: {firstName, lastName, companyNumber, ...}<br/>Host: api.transactionlink.io
activate Cases
Cases -->> Web App: 201 Case Created {caseId}
deactivate Cases
Web App ->> Token: POST /token<br/>Authorization: Bearer {accessToken} <br/>Payload: {caseId, workflowDefinitionId}<br/>Host: api.transactionlink.io
activate Token
Token -->> Web App: 201 Token Created {token}
deactivate Token
Web App -->> Customer: Initialize widget with token
deactivate Web App" %}

## Steps

### Create Case

The initial step is to create a case, which represents an individual who will go through the workflow.

During case creation, you can provide additional data such as first name, last name, number, or company name. These details can be utilized when executing tasks in the workflow. This step must be carried out on your backend server.&#x20;

{% hint style="info" %}
Please ensure that you create a Case for every new end user, as it acts as their representation within the system. For returning users, you can utilize the previously created Case to streamline the process.
{% endhint %}

{% openapi src="/files/1Rs8dYYlBIj4v4fTgVo6" path="/cases" method="post" %}
[new\_openapi.yaml](https://content.gitbook.com/content/1Xg0vxunGGwv17NKWL80/blobs/5NXyNGNpiiwZCTc1mij0/new_openapi.yaml)
{% endopenapi %}

### Generate Token

A Token is generated to initiate the widget with the onboarding workflow for the individual represented by a Case. To generate the Token, both a case and a workflow definition are necessary. This step must be carried out on your backend server.&#x20;

{% hint style="info" %}
You must generate a new token each time you initialise the TransactionLink Widget
{% endhint %}

{% openapi src="/files/1Rs8dYYlBIj4v4fTgVo6" path="/token" method="post" %}
[new\_openapi.yaml](https://content.gitbook.com/content/1Xg0vxunGGwv17NKWL80/blobs/5NXyNGNpiiwZCTc1mij0/new_openapi.yaml)
{% endopenapi %}

### Set Token in the Widget

To import our Widget,  you need to include it in your target page as follows. Use the transactionlink-widget tag to place the widget on your website.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<transactionlink-widget />
<script>
    window.transactionlink_ready = () => {
        transactionlink.setOptions({
            token: 'exampleToken', // string
            ...otherOptions
        });
        transactionlink.open();
    }
</script>
<script src="https://widget.sandbox.transactionlink.io/transactionlink-widget.umd.js"></script>
</body>
</html>
```
