Embeddable User Interface (Expense Dashboard)

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

1. Initializing the SDK

To initialize the Hurdlr SDK in your project, follow the instructions on Embedding Hurdlr's white-labelled UI.

2. Adding Deduction Finder to your app

If you want to give your users value immediately after linking their Plaid account, then Deduction Finder is your best bet. To render Deduction Finder, you will need to provide the elementId parameter, which is the HTML id of the main <div> where you would like the Deduction Finder to render. After your user has completed the steps to link their Plaid account, and you want to launch the Deduction Finder, you simply need to invoke the following line of javascript:

Hurdlr.renderScreen(elementId, 'deductionFinderLikely');

In addition to "deductionFinderLikely", you can also render "deductionFinderUnlikely" and "deductionFinderQuestionable".

Screen	Purpose
deductionFinderLikely	Displaying transactions that are very likely to be deductible for the given user
deductionFinderUnlikely	Displaying transactions that are not likely to be deductible for the given user (I.e. they are likely personal)
deductionFinderQuestionable	Displaying transactions that require the user to decide whether they are business or personal

3. Adding the Expense Dashboard to your app

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

Hurdlr.renderScreen(elementId, 'expenseDash');

4. Customizing the UI to match your branding

Hurdlr'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.

Some examples of customized experiences are shown below:

5. Plaid Link

If you are using your own Plaid Integration, then you will also want to take advantage of the Hurdlr SDK's registerPlaidLinkListener functionality. By registering a listener, the Hurdlr SDK's existing Plaid-related CTAs will invoke the callback function you provide, so that you can route the user to your own Plaid Link-related UI.

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

Hurdlr.registerPlaidLinkListener(myPlaidLinkCallback);

Whenever a user presses a Plaid Link CTA in Hurdlr's UI, myPlaidLinkCallback will be invoked, with a JSON object as the single argument, containing the following attributes:

Field	Description	Format
type	Type of Plaid Link CTA that was pressed by your user. If PLAID_LINK_RESET then you will need to open Plaid Link Update Mode. If PLAID_LINK_RELINK, then you will need to unlink the user's Plaid Item, and ask them to link again. If PLAID_LINK_UNLINK, then you will need to unlink the user's Plaid Item.	Must be one of the following enumerations: `Hurdlr.PLAID_LINK_NEW`, `Hurdlr.PLAID_LINK_RESET`, `Hurdlr.PLAID_LINK_RELINK`, `Hurdlr.PLAID_LINK_UNLINK`
errorCode	Plaid Item Error code. Only populated if type is `Hurdlr.PLAID_LINK_RESET` or `Hurdlr.PLAID_LINK_RELINK`. Useful for debugging purposes.	Must be one of Plaid's Item Errors
plaidAccessToken	Your user's Plaid access_token; only populated if type is `Hurdlr.PLAID_LINK_RESET`, `Hurdlr.PLAID_LINK_RELINK`, or `Hurdlr.PLAID_LINK_UNLINK`.	Any string
screen	Screen in the Hurdlr SDK where the user initiated Plaid Link. Useful for analytics and/or custom routing in your app.	Any string

An example of the arguments passed to myPlaidLinkCallback for an item requiring a Plaid Link Update is shown below:

{
  type: "PLAID_LINK_RESET", // compare to Hurdlr.PLAID_LINK_RESET
  errorCode: "ITEM_LOGIN_REQUIRED",
  plaidAccessToken: "YOUR_USERS_PLAID_ACCESS_TOKEN",
  screen: "expenseDash"
}

Contact us directly at [email protected] should you need any help understanding how to use Plaid listeners with the Hurdlr SDK.