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.
| Attribute | Description | Default Value |
|---|---|---|
data-authorization-token | A specific user's Session Token | null |
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.
| Attribute | Description |
|---|---|
data-selector | A 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.
| Attribute | Description |
|---|---|
data-mode | Whether to embed the Connector inside a container on your page. Options: "inline" |
data-selector | A 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.