Quiltt Logo

HTML5

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

Link to this section#Quickstart Example

First, grab the ID for one of your Connectors from the Quiltt Dashboard. Then simply add the script tag to your HTML document:

<head>
  <!-- Load the Connector Script -->
  <script src="https://cdn.quiltt.io/v1/connector.js"></script>
</head>

<body>
  <!-- Launch the Connector with a button -->
  <button quiltt-button="<CONNECTOR_ID>">Click Here!</button>
</body>

Link to this section#Configuration

The embed configuration can be customized using custom data attributes on the <script> tag and other elements.

Link to this section#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.

<button quiltt-button="<CONNECTOR_ID>">Connect!</button>

Link to this section#Reconnect Flow

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

<button quiltt-container="<CONNECTOR_ID>" quiltt-connection="<CONNECTION_ID>">Reconnect</button>

Link to this section#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.

<div quiltt-container="<CONNECTOR_ID>"></div>

Link to this section#Reconnect Flow

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

<div quiltt-container="<CONNECTOR_ID>" quiltt-connection="<CONNECTION_ID>"></div>

Link to this section#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 for more information on generating Session tokens.

<script src="https://cdn.quiltt.io/v1/connector.js" quiltt-token="<SESSION_TOKEN>"></script>

Using Connector without a Token

When quiltt-token is omitted, end-users must log in or sign up via one-time passcode. This can support use-cases of the Connector being embedded on a landing page or as part of an onboarding flow. This functionality is enabled by your Connector configuration in the Quiltt Dashboard.

React SDK →