Guides

Embedding user flows

You can embed the user registration and results page inside your own website or mobile app so the user experience feels like part of your own product.

Suggest Edits

Embed Registration

You can embed the registration with the following html:

<iframe src="https://app.hurdle.bio/register"/>

Embed Results

You can embed the results page with the following html:

<iframe src="https://app.hurdle.bio/dashboard"/>

🚧

Logging in

Unless you provide the partnerCode parameter as outlined bellow, the user will be asked to login.

Customising URLs with parameters

You can customise the look at feel of the embedded component adding the following parameters to the url. e.g. register?partnerCode=test&kiId=ABC00012345. All are optional.

Parameter nameInformationValue
partnerCodeApplies white-label customisationThis is provided to you by your account manager.
publicTokenAuto logs in the userGenerate a public token on your backend.
kitIdPre-fills the kitId during registrationYou can obtain this from the QR code on the box when the user scans it.
hideHeaderHides the entire header when logged intrue or false
hideFooterHides the entire footertrue or false

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 10 months ago