# HTML
URL: https://www.quiltt.dev/connector/sdk/html
Description: Learn how to seamlessly integrate the Quiltt Connector into your HTML application. Explore options for launching it as a pop-up modal or embedding it within a container.
Navigation: connector → sdk → html
Tags: Connector, SDKs

You can embed the Connector into your application or website using only HTML. This will allow you to load the Connector as a pop-up modal or inside an existing container element.

For programmatic access to the Connector, including launching the modal, passing Session tokens or reacting to events, see the [JavaScript API](/connector/javascript)

## Quickstart Example

First, grab the ID for one of your Connectors from the [Quiltt Dashboard](https://dashboard.quiltt.dev). Then simply add the script tag to your HTML document:

```html

Head:
<!-- Load the Connector Script -->
  [script]

Body:
<!-- Launch the Connector with a button -->
  [">Click Here!]

```

## Configuration

The embed configuration can be customized using custom data attributes on the `

Script:
` tag and other elements.

### Configure Launcher Button

By default the Connector will be loaded as a hidden Modal, so you will need a button or similar element to launch it. Simply pass your Connector ID to the `quiltt-button` attribute of your button element.

```html
[">Connect!]
```

### Configure Inline Container

By default, the Connector loads as a pop-up modal. If you prefer to load it inside an existing container element, you can do so by passing the Connector ID via the `quiltt-container` attribute.

```html
">
```

### Accessing Additional Modes
Connector provides several options to guide end-users towards particular institutions, including Reconnect-ing old connections and streamlining the process of finding new ones, by prefilling institution searches.

#### Reconnect Flow

To reconnect an existing connection, pass in the Connection ID via the `quiltt-connection` attribute.

```html
[" quiltt-connection="<CONNECTION_ID>">Reconnect]
" quiltt-connection="<CONNECTION_ID>">
```

#### Prefilled Institution Search

If you are using a Connector configured with multiple providers, and know which institution you would like your end-user to connect to, you may pass in that data via `institution` to prefill the search.
```html
[" quiltt-institution="<SEARCH_TERM>">Connect to SEARCH_TERM]
" quiltt-institution="<SEARCH_TERM>">
```

#### Theme Mode

Set the Connector UI theme using the `quiltt-theme-mode` attribute. Supported values are `light`, `dark`, and `auto` (follows device preference).

```html
[" quiltt-theme-mode="auto">Connect]
" quiltt-theme-mode="dark">
```

#### App Launcher URL

If you need to pass a URL to re-launch your app after an OAuth flow (common for mobile or embedded webviews),
set `quiltt-app-launcher-url` on the button or container.

```html
["
  quiltt-app-launcher-url="<YOUR_APP_LAUNCHER_URL>"
>
  Connect]

"
  quiltt-app-launcher-url="<YOUR_APP_LAUNCHER_URL>"
>
```

If you prefer a single default for multiple connectors on the page, you can set it on the script
tag instead.

```html
<script
  src="https://cdn.quiltt.io/v1/connector.js"
  quiltt-app-launcher-url="<YOUR_APP_LAUNCHER_URL>"
>

```

### Handling Authentication

To load the Connector for use by a pre-existing end-user, pass a valid Session token via the `quiltt-token` attribute. See the [Authentication guide](/authentication) for more information on generating Session tokens.

```html

Script:
">

```

Info - Using Connector without a Session token:
You can use Connector without a Session token if it's configured with the [Authenticate module](/connector#authenticate) in the [Quiltt Dashboard](https://dashboard.quiltt.dev).

This allows your end-users to sign up or sign in from publicly accessible websites, using a one-time passcode delivered to the email or phone on their Profile.