> ## 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.

# Embeddable User Interface (Tax Dashboard)

If you want to get up and running quickly with a proven tax profile, estimate, and filing UX that matches your colors, fonts, and branding, then the Embeddable User Interface is your best bet.

## 1. Initializing the SDK

To initialize the Tight SDK in your project, follow the instructions on [Embedding Tight's white-labelled UI](/v5.0/getting-started/quickstart/embedded-ui#2-embedding-hurdlrs-white-labelled-ui-hurdlr-sdk).

## 2. Adding the Tax Dashboard to your app

To render the Tax Dashboard, you will need to provide the `elementId` parameter, which is the HTML `id` of the main `<div>` where you would like the Tax Dashboard to render. When your user taps on your "Taxes" navigation CTA, you simply need to invoke the following line of javascript:

```javascript theme={null}
Hurdlr.renderScreen(elementId, 'taxDash');
```

## 3. Setting custom filters

If desired, you can route your user to a specific filtered view within the Tax Dashboard. Simply provide the filter attribute within the optional options object:

```javascript theme={null}
Hurdlr.renderScreen(elementId, 'taxDash', {filter: 'LAST_YEAR'});
```

The following filters are available:

| Filter                    | View      |
| :------------------------ | :-------- |
| ANNUAL\_PROJECTED         | Annual    |
| YTD                       | Annual    |
| LAST\_YEAR                | Annual    |
| ALL\_QUARTERS             | Quarterly |
| CURRENT\_QUARTER          | Quarterly |
| ALL\_QUARTERS\_LAST\_YEAR | Quarterly |

## 4. Customizing the UI to match your branding

Tight's API team can quickly customize the UI to match your branding. Please follow the instructions on [Customizing the embedded UI to match your branding](/v5.0/getting-started/quickstart/embedded-ui#1-customizing-the-embedded-ui-to-match-your-branding).

Some examples of customized experiences are shown below:

<img src="https://mintcdn.com/tight-7c882d74/Wf-_-tBNZrYWdgZf/v5.0/images/8eb7ef2-zb_taxDash.gif?s=c7b8b41db0c249d16618d3cb126f6030" alt="Tax Dashboard Demo of custom styling" width="640" height="412" data-path="v5.0/images/8eb7ef2-zb_taxDash.gif" />

<img src="https://mintcdn.com/tight-7c882d74/PBb8Gf8jW9PRt_Fg/v5.0/images/4d1c85e-nv_taxDash.gif?s=12b8a3a136e6e207797f2c1b76b0d944" alt="Tax Dashboard Demo of custom styling #2" width="640" height="412" data-path="v5.0/images/4d1c85e-nv_taxDash.gif" />

## 5. Optimizing conversions

In order to help you optimize your UX funnels, Tight exposes listeners for key calls to action (CTAs). By registering a listener, the Tight SDK's existing zero state CTAs will invoke the callback function you provide, so that you can route the user to the proper place in your own UI.

To register a listener, simply add one of the following lines of JS to be ran once after `Hurdlr.init({...})`:

```javascript theme={null}
Hurdlr.registerTaxProfileCTAListener(myTaxProfileCTACallback);
Hurdlr.registerTaxDashZeroStateCTAListener(myTaxDashZeroStateCTACallback);
```

When the user first views the Tax Dashboard, they will be prompted to set up their tax profile. If you would like to utilize Tight's tax profile setup, then you do not need to register a listener for the tax profile. If you have built your own custom tax profile setup, we recommend that you route your user to you tax profile screen:

```javascript theme={null}
var myTaxProfileCTACallback = () => {
	// route to my app’s tax profile screen
}

Hurdlr.registerTaxProfileCTAListener(myTaxProfileCTACallback);
```

When the user completes their tax profile setup, they will be presented with a zero state screen. That screen lets the user know that they need to track income in order to see tax estimates. When that CTA is clicked, we recommend that you route your user to your income (or transactions) screen:

```javascript theme={null}
var myTaxDashZeroStateCTACallback = () => {
  // route to my app's income (or transactions) screen
}

Hurdlr.registerTaxDashZeroStateCTAListener(myTaxDashZeroStateCTACallback);
```