Embeddable User Interface (Income Dashboard)

If you want to get up and running quickly with a proven income 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 the Income Dashboard to your app

To render the Income 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 "Income" navigation CTA, you simply need to invoke the following line of javascript:

Hurdlr.renderScreen(elementId, 'incomeDash');

3. 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:

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