> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lendflow.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embedding The Application Widget

## Embedding The Application Widget

Use this guide to configure the Application Widget in Lendflow and add it to your website or product.

If you are going live for the first time, start with [Getting Started](/lendflow-external/docs/getting-started), then follow the steps below.

## Open the Widget Integration

Log in to Lendflow. In the left-side menu, open the **Integrations** tab, then open **Widget Integration**.

On this page, configure the widget on the left (Steps 1–6). Your widget link and integration script update on the right (Steps 7–8) as you make selections.

<Frame>
  ![](https://lendflow-documentation.s3.us-west-2.amazonaws.com/embed_widget_1.png)
</Frame>

## Step 1: Widget Name

Select the widget type applicants will use.

Most partners use the **Lending Widget** (with Prequal). Other options include Lending without pre-qualification and Invoice Factoring. If you are unsure which to choose, contact your customer success manager.

## Step 2: Set Workflow

Choose how applications are processed after submission.

* **Workflow Category**: Determines the workflow type. **Marketplace** is most common when Lendflow processes applications and sends them to funders. **Internal funding** is typically used when your organization processes applications in Lendflow.
* **Workflow Builder Template**: Defaults to the global template for the selected category. If you process your own applications, select a custom workflow builder template. Learn more in [The Workflow Builder](/lendflow-external/docs/what-is-the-workflow-builder).

## Step 3: Set Branding

Branding is optional.

* **Widget Brand**: Logo and colors shown in the widget
* **Email Brand**: Branding for automated emails sent to applicants

Create branding templates in the **Customize** tab in the left-side menu. To use a template on a widget, select it under **Widget Brand** or **Email Brand**. If no branding template exists, Lendflow branding is used. If a template exists and is selected as default, that template is used when no selection is made. You can also select **None** to use Lendflow branding. See [Branding Your Widget](/lendflow-external/docs/application-widget#branding-your-widget).

## Step 4: Choose a Redirect Option

Redirect is optional. If you do not specify a redirect, applicants are sent to the **Borrower Platform**.

After the last widget screen, you can redirect applicants to:

* **Borrower Platform** — so they can check application status
* A **URL** you specify
* **None** — no redirect

## Step 5: Choose Template to Collect Merchant Consent

Choose a **Consent Template** (default) or a **Contract Template**. The default is Lendflow’s consent message template.

## Step 6: Subdomain (Optional)

Optionally set a custom address to white-label the domain used for widget links. See [Using White-label subdomains](/lendflow-external/docs/application-widget#using-white-label-subdomains).

## Step 7: Copy Your Widget Link (Optional)

On the right side of the page, **Step "7": Copy Your Widget Link** shows the generated URL. You can copy it if you also want to share the widget as a direct link. For adding the widget to your website, use Step 8.

## Step 8: Add The Integration Script To Your Website

On the right side of the same page, open **Step "8": Add The Integration Script To Your Website**.

<Frame>
  ![](https://lendflow-documentation.s3.us-west-2.amazonaws.com/embed_widget_3.png)
</Frame>

Step 8 has two modes. Copy the generated snippet into your HTML. It already includes your configuration from Steps 1–6.

| Mode | What the applicant sees | What you paste |
| - | - | - |
| **Embedded** | The widget inside a `div` on the page | A container `div` plus a `script` |
| **Pop-out** | A **Start Funding** link. The widget opens from that link | An `<a>` link plus a `script` |

### Embedded

Select **Embedded** in Step 8.

The Embedded snippet includes two parts:

1. A container `div` — this is where the widget appears on the page
2. A `script` — this loads the widget into that container

<Frame>
  <img src="https://mintcdn.com/lendflow-ph/D03fMJzyuz4WrdkF/images/4f490c7dbc1e7401623f894a4b406d5d2d28b076870a78680905456f575dc98a-Screenshot_2024-10-15_at_11.51.48.png?fit=max&auto=format&n=D03fMJzyuz4WrdkF&q=85&s=96c7b6453006d5cd3ff2638bb6bd82bb" alt="" width="812" height="570" data-path="images/4f490c7dbc1e7401623f894a4b406d5d2d28b076870a78680905456f575dc98a-Screenshot_2024-10-15_at_11.51.48.png" />
</Frame>

* **Orange square** → Make sure **Embedded** is selected
* **Blue arrow** → The `div` container that will be filled with the widget. Place it where you want the widget to render. You can adjust the inline `style` if needed.
* **Green arrow** → The `script` that loads the widget into that container. The part of the `src` after `?` is your configuration from Steps 1–6 (including `targetId=container`). Paste the script before the closing `</head>` or `</body>` tag.

**Example container:**

```html theme={"system"}
<div id="container" style="max-width: 550px; min-width: 300px; height: 500px;"></div>
```

**Example script shape (use your exact snippet from Step 8):**

```html theme={"system"}
<script
  src="https://iw.lendflow.com/js/lendflow-loader.js?env=YOUR_ENV&viewProduct=1&workflowTemplateId=YOUR_WORKFLOW_TEMPLATE_ID&targetId=container"
  defer
></script>
```

A live sample page is available here: [LF - Embedded Widget](https://codepen.io/Adam_Orlov/pen/NWQNreO).

### Pop-out

Select **Pop-out** in Step 8.

The Pop-out snippet includes two parts:

1. An `<a>` link with the text **Start Funding** — this is what the applicant clicks
2. A `script` — paste it before the closing `</head>` or `</body>` tag

The widget opens from that link. There is no container `div` and no `targetId=container`.

**Example link (use your exact snippet from Step 8):**

```html theme={"system"}
<a href="YOUR_WIDGET_LINK">Start Funding</a>
```

`YOUR_WIDGET_LINK` is the same URL shown in Step 7.

### Add Custom Token (Recommended)

Turn on **Add Custom Token** if you want to associate each application with your own ID.

Use this to track marketing campaigns, CRM IDs, or other internal references. Turn it on if you will later send more data to the same deal through the API — the token identifies which application to update.

When enabled, replace the placeholder values in the generated snippet:

* Set `data-customer-token` to your unique ID (keep the quotes)
* Optionally set `data-application-tracking-token` to one or more additional tokens

This value is stored on the deal as `client_tracking_token`. You can search for it on the **Deals** tab in the left-side menu, and it can appear in webhook and API responses so you can match the Lendflow application to your records.

## FAQ

<AccordionGroup>
  <Accordion title="What is the difference between Embedded and Pop-out?">
    **Embedded** shows the widget inside a `div` on your page. **Pop-out** shows a **Start Funding** link. The widget opens from that link. Pop-out does not use a container `div` and does not include `targetId=container`.
  </Accordion>

  <Accordion title="Do I have to brand the widget before I embed it?">
    No. If no branding template exists, Lendflow branding is used. If a template exists and is selected as default, that template is used when no selection is made on the **Integrations** tab in the left-side menu, then **Widget Integration**. You can also select **None** to use Lendflow branding.
  </Accordion>

  <Accordion title="I already embedded the widget. How do I apply a branding or configuration change?">
    Return to the **Integrations** tab in the left-side menu, then open **Widget Integration**. Generate the snippet again and update the widget links or scripts where they are embedded.
  </Accordion>
</AccordionGroup>

## Next steps

<Card title="Application Widget" icon="palette" href="/lendflow-external/docs/application-widget" horizontal>
  Brand the widget and white-label widget links.
</Card>

<Card title="Widgets for Existing Deals" icon="link" href="/lendflow-external/docs/widgets-for-existing-deals" horizontal>
  Attach a widget to an application that already exists, including declined deals.
</Card>

<Card title="Smartviews" icon="table" href="/lendflow-external/docs/smartviews-overview" horizontal>
  Smartviews are saved views of the Deals tab in the left-side menu.
</Card>

<Card title="Using the Deals Page" icon="magnifying-glass" href="/lendflow-external/docs/using-the-deals-page" horizontal>
  Search deals and expand offer or placement details.
</Card>