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.
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 name | Information | Value |
---|---|---|
partnerCode | Applies white-label customisation | This is provided to you by your account manager. |
publicToken | Auto logs in the user | Generate a public token on your backend. |
kitId | Pre-fills the kitId during registration | You can obtain this from the QR code on the box when the user scans it. |
hideHeader | Hides the entire header when logged in | true or false |
hideFooter | Hides the entire footer | true 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