How to Embed
Your team can add the Embedded experience into your product in parallel with the Hurdlr team customizing the look and feel to match your product. Once the Hurdlr team has completed the custom design implementation, they will automatically be associated with your Hurdlr API client_id and show up in your Embedded experience.
Embedding Hurdlr's white-labelled UI (Hurdlr SDK)
To add the latest release of Hurdlr Embedded to your web app, simply add the following to your HTML <head>:
<script src="https://cdn.prod.hurdlr.com/embedded/latest/hurdlr.js"></script>
Initializing Hurdlr Embedded
To initialize Hurdlr Embedded, you will need to provide the following data parameters:
| Field | Description | Format |
|---|---|---|
| clientId | Your app's client_id | Reach out to [email protected] to obtain |
| accessToken | Your user's access_token | Received when Registering a User |
| showAnimations | Whether elements show be animated as they load | Boolean; defaults to true |
Simply add this one line of javascript, to be ran once after your app's initialization:
Hurdlr.init({clientId: $(client_id), accessToken: $(access_token)});
Mobile browser support
To render the mobile version of Hurdlr Embedded in your mobile web app, simply add
viewport: "mobile"to the data parameters:
Hurdlr.init({clientId: $(client_id), accessToken: $(access_token), viewport: "mobile"});Note: if you would like Hurdlr to auto-detect whether it should render the desktop or mobile viewport, set
viewport: "auto".
Embedding Specific Components
The Embedded experience allows you to embed your choice of Hurdlr components into your app wherever you feel best suits your users. To embed a component, you will need to provide an elementId parameter and the name of the component that you wish to embed by simply invoking the following line of JavaScript, providing the HTML id of the element you wish to render it under, the name of the component you wish to embed, and an options object specific to the component.
Hurdlr.renderScreen(elementId, 'componentName', options)
You can find the numerous components under the left-hand navigation pane of our Embeddable UI documentation. For an example of this, see the Transactions Dashboard.
Embedding a Specific Release
Hurdlr Embedded follows a semantic versioning numbering scheme, major.minor.patch. To use a specific release version , you can replacelatest with the version number you wish to use. Thus, to use version 1.2, embed:
<script src="https://cdn.prod.hurdlr.com/embedded/1.2/hurdlr.js"></script>
Note
In your sandbox environment, we generally recommend using:
<script src="https://cdn.sandbox.hurdlr.com/embedded/latest/hurdlr.js"></script>
Updated about 1 month ago