Quiltt Logo

Connector Overview

The Quiltt Connector is an embeddable UI module that lets you access a complete, context-rich financial picture of your end-user, without writing any integration code.

The Connector is built on top of the Profile GraphQL API, and comes pre-integrated with data sources like Plaid – the industry-leading bank data network, Spade – a powerful transaction enrichment service, and more.

Link to this section#How to Embed the Connector

You can embed the Connector into your product experience with just a single line of code:

First, grab the Embed script for your Connector from the Quiltt Dashboard. Then simply add the script tag to your <body>.

Click the button below to see the embedded Connector in action:

Link to this section#Configuration Options

The embed configuration can be customized by setting optional data attributes on the <script> tag.

Link to this section#Pre-authenticate a Profile

To load the Connector for a specific Profile, pass a valid user Session token via the data-authorization-token attribute. See the Authentication guide for more information on generating a Session token.

AttributeDescriptionDefault Value
data-authorization-tokenA specific user's Session Tokennull

If data-authorization-token is omitted, end-users can be allowed to sign up and log in via one-time passcode. This can support use-cases of the Connector being embedded on a public website or landing page. This functionality is enabled by your Connector configuration in the Quiltt Dashboard.

Link to this section#Configure a Launcher Button

If you'd like to use your own element to open and close the Connector, you can pass the ID or class of a clickable element on your page, such as a link or button, using the data-selector attribute.

data-selectorA CSS selector for the class or ID of your custom launcher element.
Examples: "#quiltt-launcher" | ".quiltt-launcher"

Link to this section#Load the Connector Inside a Container

By default, the Connector loads as a pop-up modal. If you prefer to load the it inside an existing container in your page, you can do so by setting the data-mode attribute to "inline" and providing a CSS selector for your own container element using the data-selector attribute.

data-modeWhether to embed the Connector inside a container on your page.
Options: "inline"
data-selectorA CSS selector for the class or ID of your container element.
Examples: ".quiltt-widget-container | "#quiltt-widget-container"

Link to this section#Javascript API

For full control over your experience, Quiltt exposes several JavaScript functions to programmatically interact with the Connector.

Link to this section#Open Connector

Link to this section#Close Connector

Link to this section#Open or Close Connector