Embedding

The Tight Javascript SDK lets you embed Tight pages directly into your web app with no build step and no framework dependency. Load the script, initialize it with an access token, and render a page into an element you already have in your DOM.

Every Tight page supports desktop web, mobile web, and all breakpoints in between.

Get Started

Load the SDK

Add tight.js to your page with a <script> tag:

<script src="https://cdn.sandbox.tight.com/embedded/latest/tight.js"></script>

Swap in the production URL when you’re ready to go live. See Environments.

Initialize with an access token

Tight.init(accessToken);

Render a page

Tight.render("finance-dashboard", "FinancialOverview");

Loading the SDK

Loading the script creates a single global instance at window.Tight. Load it only once per page: a second load logs an error and has no effect.

For convenience, assign window.Tight to a local variable and use that for subsequent calls:

const Tight = window.Tight;

Environments

The script URL selects which Tight API environment the SDK targets:

Environment	Script URL
Sandbox	`https://cdn.sandbox.tight.com/embedded/latest/tight.js`
Production	`https://cdn.prod.tight.com/embedded/latest/tight.js`

Load the URL for the environment you’d like to target, and use an accessToken issued for that same environment. You can obtain an applicable accessToken via the Tight Authentication Endpoint.

Examples on this page use the sandbox URL. Swap in the production URL when you’re ready to launch.

Initializing the SDK

Call init with an access token before rendering anything. This authenticates the SDK and resets it to a clean state, removing any existing page and listeners.

Tight.init(accessToken);

Parameter	Type	Description
`accessToken`	`string`	A valid access token for the current user. Obtain one via the Tight Authentication Endpoint.

init does not render a page by itself. Call render afterward to display content.

Refreshing credentials

Access tokens expire after 3600 seconds. When your token expires or changes, call auth instead of init. It updates the token in place without clearing an already-rendered page or your registered listeners.

Tight.auth(newAccessToken);

Calling init again to refresh a token tears down the rendered page and every registered listener. Use auth for token rotation and reserve init for first-time setup or switching users.

Rendering a page

Call render to display a page inside a container element in your document.

Tight.render(containerId, page);

Parameter	Type	Description
`containerId`	`string`	The `id` of an element already present in your DOM. The page renders inside this element.
`page`	`string`	The page to display. See supported page values.

<div id="finance-dashboard"></div>
<script>
    Tight.render("finance-dashboard", "FinancialOverview");
</script>

Calling render again with a different page value updates the displayed page. Calling it with a different containerId moves the page to that container.

Supported page values

Value	Page
`FinancialOverview`	Financial Overview
`TransactionsDashboard`	Transactions Dashboard
`BanksAndIntegrations`	Banks & Integrations
`ExpenseDashboard`	Expense Dashboard
`IncomeDashboard`	Income Dashboard
`ReportDashboard`	Report Dashboard
`GeneralLedger`	General Ledger
`ChartOfAccounts`	Chart of Accounts
`Journal`	Journal

Listening for events

Use registerListener to react to actions that happen inside the rendered page, such as a form opening or a workflow completing. You might route a user back to your own invoicing product, gate functionality behind your own paywall, or send analytics when a user opens a dashboard tile.

Tight.registerListener(key, listener, options);

Parameter	Type	Description
`key`	`string`	The event to subscribe to. See supported event keys.
`listener`	`(payload: unknown) => void`	Callback invoked when the event fires.
`options.preventDefault`	`boolean` (optional)	When `true`, suppresses the SDK’s default UI behavior for that event while still notifying your listener. Defaults to `false`.

Tight.registerListener("invoice", (payload) => {
    console.log("Invoice event:", payload);
});

To stop listening, call unregisterListener with the same key:

Tight.unregisterListener("invoice");

Supported event keys

Key	Fires on
`plaidLink`	Bank account linking actions (new, reset, relink, unlink, route to bank)
`plaidLinkEvent`	Raw bank-linking flow telemetry
`plaidLinkError`	Bank-linking failure
`gusto`	Gusto payroll connection started
`payroll`	Payroll record opened
`bITile`	A dashboard tile (cash flow, expense, profit & loss) is opened
`conversations`	A conversation/thread is opened
`bill`	A bill is opened
`invoice`	An invoice form is opened
`revenueRecognition`	A revenue recognition record is opened
`expenseAmortization`	An expense amortization record is opened
`assetDepreciation`	An asset depreciation record is opened
`journalEntry`	A journal entry is opened
`transactionForm`	Any transaction form is opened or closed (bank or processor)
`bankTransactionForm`	A bank transaction form is opened or closed
`processorTransactionForm`	A processor transaction form is opened or closed
`customer`	A customer record is opened

Each listener receives a payload describing the result of the action, including whether it succeeded and any associated data or error details.

Full example

<div id="finance-dashboard" style="width: 100%; height: 800px;"></div>

<script src="https://cdn.sandbox.tight.com/embedded/latest/tight.js"></script>
<script>
    const Tight = window.Tight;
    Tight.init(accessToken);

    Tight.registerListener("invoice", (payload) => {
        console.log("Invoice event:", payload);
    });

    Tight.render("finance-dashboard", "FinancialOverview");
</script>

Get Started

React Components

React Native Components

Plain Javascript

Full End-to-end App

Get Started

Loading the SDK

Environments

Initializing the SDK

Refreshing credentials

Rendering a page

Supported page values

Listening for events

Supported event keys

Full example

​Get Started

​Loading the SDK

​Environments

​Initializing the SDK

​Refreshing credentials

​Rendering a page

​Supported page values

​Listening for events

​Supported event keys

​Full example

Get Started

Loading the SDK

Environments

Initializing the SDK

Refreshing credentials

Rendering a page

Supported page values

Listening for events

Supported event keys

Full example