Documentation Index
Fetch the complete documentation index at: https://docs.tight.com/llms.txt
Use this file to discover all available pages before exploring further.
Overview
Tight’s Business Intelligence Embedded experience makes it easy for you to provide your users with an easily digestible
overview of their business’s key performance indicators. It also serves as a great way to onboard new users, as it gives
them a glimpse of what kind of business intelligence they will receive by simply following a few quick onboarding steps.
Embedding the Business Intelligence Tiles
To initialize the Tight Embedded experience using plain Javascript in your project, follow the instructions
on Embedding Tight’s white-labeled UI.
Below is an example JS embedding of the Business Intelligence Tiles:
Tight.renderScreen(elementId, 'biTiles', options);
Options
Modifying the displayed tiles
If you’d like to alter or reorder the tiles being displayed, you can do so by populating a biTiles array within the options object as follows:
Tight.renderScreen(elementId, 'biTiles', { biTiles: [Tight.biTiles.profitLoss, Tight.biTiles.cashFlow, Tight.biTiles.invoice]});
The tiles array can contain any of the following values:
| Value | BI Tile Name |
|---|
Tight.biTiles.profitLoss | Profit & Loss |
Tight.biTiles.cashFlow | Cash Flow |
Tight.biTiles.invoice | Invoices |
Tight.biTiles.expense | Expenses |
Tight.biTiles.revenue | Income |
Tight.biTiles.tax | Taxes |
Using the tiles to onboard new users
The Business Intelligence tiles give users a glimpse into what kind of intelligence they will receive once they complete a few simple onboarding steps, including linking a bank account and setting up their tax profile. To encourage your users to fully onboard, you should include the optional showOnboarding parameter in the options object as follows:
Tight.renderScreen(elementId, 'biTiles', { showOnboarding: true, biTiles: [Tight.biTiles.profitLoss, Tight.biTiles.cashFlow, Tight.biTiles.invoice]});
The above code will display applicable banners encouraging your users to complete the following key onboarding steps:
- Bank account linking
- Invoice setup, including ability to accept credit cards
- Tax profile setup
Routing the tiles
In order to control where your user is routed when they click on a BI tile, you will want to take advantage of the Tight Embedded experience’s registerBITileListener functionality. By registering a listener, the Tight Embedded experience will invoke the callback function you provide whenever a CTA is pressed by your user, so that you can route the user to the most relevant location within your app.
To register the listener, simply add the following line of JS to be run once after Tight.init({...}):
Tight.registerBITileListener(myBITileCallback);
Whenever a user presses a Business Intelligence CTA in Tight’s UI, myBITileCallback will be invoked, with a JSON object as the single argument, containing the following attributes:
| Field | Description | Format |
|---|
| type | Type of Business Intelligence CTA that was pressed by your user. | Must be one of the following enumerations: Tight.PROFIT_LOSS_TILE, Tight.CASH_FLOW_TILE, Tight.INVOICE_TILE, Tight.EXPENSE_TILE, Tight.REVENUE_TILE, Tight.TAX_TILE, Tight.LINK_ACCOUNT |
An example of the arguments passed to myBITileCallback when a user presses on the Profit & Loss tile is shown below:
{
type: "PROFIT_LOSS_TILE", // compare to Tight.PROFIT_LOSS_TILE
}
For each of the available BI tile types, Tight recommends routing your user as follows:
| Type | Ideal Routing |
|---|
| Tight.PROFIT_LOSS_TILE | Profit & Loss Report |
| Tight.CASH_FLOW_TILE | Cash Flow Statement |
| Tight.INVOICE_TILE | Invoice Dashboard |
| Tight.EXPENSE_TILE | Expense Dashboard |
| Tight.REVENUE_TILE | Income Dashboard |
| Tight.TAX_TILE | Tax Dashboard |
| Tight.LINK_ACCOUNT | Plaid Link |
Contact Tight directly at api@tight.com should you need any help understanding how to use BI Tile listeners with the Tight Embedded experience.
To give your users more context around the Business Intelligence Tiles, you can enable tooltips. Tooltips improve usability by providing quick explanations without cluttering the interface and help users understand tile data. To display them, you can include the optional showTileTooltips parameter in the options object as follows:
Tight.renderScreen(elementId, 'biTiles', { showTileTooltips: true, showOnboarding: true, biTiles: [Tight.biTiles.profitLoss, Tight.biTiles.cashFlow, Tight.biTiles.invoice]});