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.
Updated over 1 year ago