White-label customisation

Make the Hurdle pages look like yours.

Suggest Edits

What can be white-labeled

All user-facing pages hosted by Hurdle can be customised to your brand. This includes:

  • test registration flows
  • user dashboards used by end users to access their results (when applicable)
  • internal dashboard for your in-house usage (e.g. in-house clinicians placing orders and consulting results)

In addition, you can speak to account management about white-labelling physical product boxes.

How white-labelling works

Defining and applying the branded look

A set of color codes and logos is defined once for your account, and then reused in any front-end, by passing a partner code in the URL parameters, or via detection of a test kit coming from one of your orders.

At the moment this one-off definition happens by contacting your account management; they will ask you for the branding guidelines and we will translate that into the right parameters on our side. In the near future, you will be able to manage this directly from our developer portal.

When and how is white-labelling applied

The colors and logos defined as per the above paragraph will be applied when either of the following points applies:

  • the Hurdle URL contains a partnerCode parameter matching your setup
  • the kit ID being registered is detected to be linked with an order that originally came from your account (the kit ID itself can be embedded into the URL via the kitId parameter, or entered in the first step of the Hurdle-branded generic page that starts the registration process; in the latter case, the branding will switch from generic to yours on the next page)

Customising URLs with search parameters

In addition, the URLs themselves may be customised if you embed our pages in an iframe and pass the corresponding parameters. For example, the URL mytests.healthcompany.com, hosted on your side, might contain a simple HTML body including <iframe src="https://app.hurdle.bio/?partnerCode=healthCompany"/>.

And you could correspondingly have a URL mytests.healthcompany.com/register with a similar content but using the URL app.hurdle.bio/register?partnerCode=healthCompany.

The partner code is a code attributed to your company by Hurdle. In the near future it will be possible to see this from the partner portal, however for now this is information you need to receive from your customer success manager.

Here is a list of search parameters that allow customisation of the user flow:

  • partnerCode
    • e.g. partnerCode=test
  • publicToken
    • e.g. app.hurdle.bio/register?publicToken=ALONGTOKEN
    • this is a token generated by the Users API to identify users without logging in on our side. This is explained more in depth in Linking user accounts.
  • kitId
    • e.g. app.hurdle.bio/register?kitId=ABC00012345
    • allows to skip the first step of the registration flow, in which a kit Id is asked for. For certain products, this can be used in tandem with the white-labelling of the physical product box, so that there is a QR code on the box taking the user to your URL with the kit Id already pre-populated (speak to you account manager about this).
  • hideFooter
    • used in combination with partnerCode, hides the Hurdle footer
    • e.g. app.hurdle.bio/register?hideFooter=true
  • hideHeader
    • used in combination with partnerCode, hides the Hurdle header entirely or the header logo on pages where the user is logged in
    • e.g. app.hurdle.bio/register?hideHeader=true

These parameters can be combined to achieve the desired user experience.

Complete HTML example

Here is a complete example (only for illustration purposes) of an HTML page that loads the iframe and passes the partnerCode silently while transferring any kit ID received in the URL:

<html>
  <head>
  </head>
  <body>
    <iframe id="iframe" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;">
    </iframe>
  </body>
    <script>
        var urlParams = new URLSearchParams(window.location.search);
        var kitId = urlParams.get("kitId");
        var iframeSrc = "https://app.hurdle.bio/register?partnerCode=ABCD";
        if (kitId) {
          iframeSrc += "&kitId=" + kitId;
        }
        document.getElementById("iframe").src = iframeSrc;
    </script>
</html>

In this example, the partner code must be changed from ABCD to the partner code that has been attributed to you. If you host this page under https://mytests.mybrand.com then your customers will be able to access https://mytests.mybrand.com and see a page asking for the kit ID under your branding, and they will also be able to access https://mystests.mybrand.com?kitId=ABC12345 and reach the start of the registration flow with the kit ID already informed.

Updated about 1 month ago