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#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#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.

Link to this section#Reconnect Flow

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

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

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.

<button quiltt-button="<CONNECTOR_ID>" quiltt-institution="<SEARCH_TERM>">Connect to SEARCH_TERM</button>
<div quiltt-container="<CONNECTOR_ID>" quiltt-institution="<SEARCH_TERM>"></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 Session token

You can use Connector without a Session token if it's configured with the Authenticate module in the Quiltt Dashboard.

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.

React →