Quiltt Logo

Widget Overview

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

The widget is built on top of the Quiltt 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 Widget

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

<script src="https://cdn.quiltt.io/v1/widget.js?id={{WIDGET_ID}}"></script>

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

Link to this section#Configuration Options

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

Link to this section#Pre-authenticate a User

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

<script src="https://cdn.quiltt.io/v1/widget.js?id={{WIDGET_ID}}" data-authorization-token="{{SESSION_TOKEN}}" ></script>
AttributeDescriptionDefault Value
data-authorization-tokenA specific user's Session Tokennull

If data-authorization-token is omitted, users can be allowed to sign up and log in via one-time passcode. This can be useful if you're embedding the widget on a public website or landing page. Contact Quiltt support for more information about this approach.

Link to this section#Use a Custom Widget Launcher

By default, the widget comes with a customizable Floating Launcher button. If you'd like to use your own element to open and close the widget, 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.

<script src="https://cdn.quiltt.io/v1/widget.js?id={{WIDGET_ID}}" data-selector="#my-launcher-selector" ></script>
AttributeDescription
data-selectorA CSS selector for the class or ID of your custom launcher element.
Examples: "#quiltt-launcher" | ".quiltt-launcher"

Link to this section#Advanced

Link to this section#Load the Widget Inside a Container

By default, the widget will load as a pop-up modal. If you prefer to load the widget 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.

<script src="https://cdn.quiltt.io/v1/widget.js?id={{WIDGET_ID}}" data-mode="inline" data-selector="#my-container-selector" ></script>
AttributeDescription
data-modeWhether to embed the widget 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#Add a Call-to-Action to the Floating Launcher Button

If you'd like to draw attention to the Quiltt Floating Launcher button, you can add a one-time message bubble using the data-message attribute.

<script src="https://cdn.quiltt.io/v1/widget.js?id={{WIDGET_ID}}" data-message="🔗 Connect your account!" ></script>
AttributeDescription
data-messageA message to show on the Quiltt Floating Launcher button.

Link to this section#Javascript API

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

Link to this section#Open Widget

window.Quiltt.open()

Link to this section#Close Widget

window.Quiltt.close()

Link to this section#Open or Close Widget

window.Quiltt.toggle()