Documentation
Request Access

How to Embed

Suggest Edits

Your team can add the Embedded experience into your product in parallel with the Tight team customizing the look and feel to match your product. Once the Tight team has completed the custom design implementation, they will automatically be associated with your Tight API client_id and show up in your Embedded experience.

Embedding Tight's white-labelled UI (Tight SDK)

To add the latest release of Tight Embedded to your web app, simply add the following to your HTML <head>:

<script src="https://cdn.prod.hurdlr.com/embedded/latest/hurdlr.js"></script>

Initializing Tight Embedded

To initialize Tight Embedded, you will need to provide the following data parameters:

FieldDescriptionFormat
clientIdYour app's client_idReach out to [email protected] to obtain
accessTokenYour user's access_tokenReceived when Registering a User
showAnimationsWhether elements show be animated as they loadBoolean; defaults to true

Simply add this one line of javascript, to be ran once after your app's initialization:

Hurdlr.init({clientId: $(client_id), accessToken: $(access_token)});

📘

Mobile browser support

To render the mobile version of Tight Embedded in your mobile web app, simply add viewport: "mobile"to the data parameters:

Hurdlr.init({clientId: $(client_id), accessToken: $(access_token), viewport: "mobile"});

Note: if you would like Tight to auto-detect whether it should render the desktop or mobile viewport, set viewport: "auto".

Embedding Specific Components

The Embedded experience allows you to embed your choice of Tight components into your app wherever you feel best suits your users. To embed a component, you will need to provide an elementId parameter and the name of the component that you wish to embed by simply invoking the following line of JavaScript, providing the HTML id of the element you wish to render it under, the name of the component you wish to embed, and an options object specific to the component.

Hurdlr.renderScreen(elementId, 'componentName', options)

You can find the numerous components under the left-hand navigation pane of our Embeddable UI documentation. For an example of this, see the Transactions Dashboard.

📘

Read-Only View

Sometimes, you'll want to limit a user's ability to make changes. You can do this by setting the userRole when creating an account, but for more fine-grained control, you can disable their ability to make changes on a per-screen basis with the readOnly option. Set the option to true when calling Hurdlr.renderScreen on the screen you want to be read-only.

Hurdlr.renderScreen(elementId, 'componentName', { readOnly: true })

Embedding a Specific Release

Tight Embedded follows a semantic versioning numbering scheme, major.minor.patch. To use a specific release version , you can replacelatest with the version number you wish to use. Thus, to use version 1.2, embed:

<script src="https://cdn.prod.hurdlr.com/embedded/1.2/hurdlr.js"></script>

📘

Note

In your sandbox environment, we generally recommend using:

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

Updated 26 days ago