> ## 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. # How to Embed 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](/v5.0/getting-started/quickstart/embedded-ui#1-customizing-the-embedded-ui-to-match-your-branding). 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 ``: ```html theme={null} ``` ### Initializing Tight Embedded To initialize Tight Embedded, you will need to provide the following data parameters: | Field | Description | Format | | :------------- | :--------------------------------------------- | :--------------------------------------------------------------------------------- | | clientId | Your app's client\_id | Reach out to [api@tight.com](mailto:api@tight.com) to obtain | | accessToken | Your user's access\_token | Received when [Registering a User](/v5.0/getting-started/quickstart/user-creation) | | showAnimations | Whether elements show be animated as they load | Boolean; defaults to true | Simply add this one line of javascript, to be ran once after your app's initialization: ```javascript theme={null} 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: > > ```javascript theme={null} > 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. ```javascript theme={null} Hurdlr.renderScreen(elementId, 'componentName', options) ``` You can find the numerous components under the left-hand navigation pane of our [Embeddable UI](/v5.0/embeddable-ui/embeddable-white-labeled-experience) documentation. For an example of this, see the [Transactions Dashboard](/v5.0/embeddable-ui/bank-transactions/transaction-dashboard-component). > 📘 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](https://docs.tight.com/reference/postpartneraccount), 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. > > ```javascript JavaScript theme={null} > 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 replace`latest` with the version number you wish to use. Thus, to use version 1.2, embed: ```html HTML theme={null} ``` > 📘 Note > > In your sandbox environment, we generally recommend using: > > ```html theme={null} > > ```