User Interface

Now that you've registered a user, you have the Hurdlr API and SDK at your disposal. Many developers opt to start off with the Hurdlr SDK, which includes embeddable UI (battle-tested with 700k+ users), to get a working product out in less than a week. Then, they start building their own custom UI and utilizing the Hurdlr API directly.

Note: The SDK uses the Hurdlr API behind the scenes, so both methods can be used interchangeably depending on the desired use cases, without users knowing the difference. For example, you could embed the Hurdlr SDK's tax dashboard UI into your app (in less than a day), and then display a more concise version of that same data in your own custom home dashboard by pulling that tax data from the Hurdlr API.

1. Embedding Hurdlr's white-labelled UI (Hurdlr SDK)

To add the Hurdlr SDK to your web app, simply add the following to your HTML <head>:

<script src="https://cdn.hurdlr.com/sdk/stable/hurdlr.js"></script>

To initialize the Hurdlr SDK, you will need to provide the following data parameters:

FieldDescriptionFormat
clientIdYour app's client_idReach out to [email protected] to obtain
accessTokenYour user's access_tokenReceived when Registering a User
environmentThe Hurdlr API environment that you are app is usingMust be one of the following: "SANDBOX", "PROD"

Simply add this one line of javascript, to be ran once after your app's initialization:

Hurdlr.init({clientId: $(client_id), accessToken: $(access_token), environment: "SANDBOX"});

📘

Mobile browser support

To render the mobile version of the Hurdlr SDK in your mobile web app, simply add viewport: "mobile"to the data parameters:

Hurdlr.init({clientId: $(client_id), accessToken: $(access_token), environment: "SANDBOX", viewport: "mobile"});

Note: if you would like the Hurdlr SDK to auto-detect whether it should render the desktop or mobile viewport, set viewport: "auto".

2. Customizing the embedded UI to match your branding

Hurdlr's API team is here to help! Simply email [email protected] with the subject line "Custom Branded UI", and provide the following info:

a. Your brand's color palette, including hex codes
b. Screenshots of any existing UI designs that you have
c. Font packages used in your UI
d. Your logo, ideally as an SVG

Our API team will respond back within 5 business days with sample designs, which will be tied to your App's client_id, so that it is quickly available for you to develop with.

3. Adding specific screens into your app

Nearly any screen from Hurdlr's app can be custom-branded and embedded into your app, without any mention of Hurdlr. The following are the most popular starting points:

a. Expense Dashboard
b. Income Dashboard
c. Tax Dashboard
d. Invoicing Dashboard
e. Report Dashboard
f. Accounting Dashboards
g. Business Intelligence Tiles

Each of the above includes all necessary "child" screens and edge cases. For example, the Tax Dashboard includes zero state UI for a user who has not set up their tax profile, a tax profile setup flow, a more advanced tax profile, the ability to track tax payments, drill down into individual quarterly tax estimates, and more. And remember, all that info is available to you via API as well.


What’s Next