Use this guide for complete steps to install Fido on the web. Fido is currently not available for mobile applications (iOS and Android).

Installation

To get started with Fido, paste the following code javascript before your website's closing tag. When using this JS, remember to replace FIDO-XXX with the ID of the environment to which you want to send data. You can find this ID on your dashboard.

<script type="text/javascript">
  (function(f,i,d,o,c,od,e){f['FidoObject']=c;f[c]=f[c]||function(){
    (f[c].q=f[c].q||[]).push(arguments)},f[c].l=1*new Date();od=i.createElement(d),
    e=i.getElementsByTagName(d)[0];od.async=1;od.src=o;e.parentNode.insertBefore(od,e)
  })(window,document,'script','https://code.fido.id/fd.js','fido');

  fido("create","FIDO-YOUR-JS-KEY");
</script>

📘
Note that fido.js is always loaded over SSL.

❗️
If you're installing Fido on both production and staging versions of your site, be sure to use the JS-KEY that corresponds to the environment in Fido you want to send data to. If you send data to the wrong environment, it will pollute the data in that environment.

Auto capture

One of the core features of the fido JS is the auto-capture mode. Enabled by default allows the javascript to automatically map form fields and values collecting information whenever a user completes a submission. When the system collects enough information it will calculate a score and you will be able to see it in the dashboard. If you plan to use Fido API, auto-capture should be turned off.

If you want to disable the auto-capture feature completely you can add the following call to the JS:

<script type="text/javascript">
  (function(f,i,d,o,c,od,e){f['FidoObject']=c;f[c]=f[c]||function(){
    (f[c].q=f[c].q||[]).push(arguments)},f[c].l=1*new Date();od=i.createElement(d),
    e=i.getElementsByTagName(d)[0];od.async=1;od.src=o;e.parentNode.insertBefore(od,e)
  })(window,document,'script','https://code.fido.id/fd.js','fido');

    fido("create", "FIDO-YOUR-JS-KEY");
    fido("auto_capture", false); 
</script>

If there's a sensitive element you don't want auto captured, you can hide it from Fido by just adding the attribute fido-ignore. All descendant elements will also be ignored by Fido.

<input type='text' fido-ignore='true'>

No events triggered on the element will be captured by Fido.

Auto capture - mappings

By adding the data-fido-field data attribute to your form you can ensure correct capture of all the fields.

Supported values are:

data-fido-field="first_name"
data-fido-field="last_name"
data-fido-field="phone"
data-fido-field="email"
data-fido-field="zip"
data-fido-field="tax_id"
data-fido-field="submit"

Special mention to data-fido-field="submit" as it represent the submit object (button/link).

<!DOCTYPE html>
<html>
  <body>

    <form action="/action_page.php">
      <label for="fname">First name:</label>
      <input id="fname" value="Tony" data-fido-field="first_name" />
      <label for="lname">Last name:</label><br/>
      <input id="lname" value="Stark"  data-fido-field="last_name"><br/><br/>
      <input type="submit" value="Submit" data-fido-field="submit" />
    </form> 

  </body>
</html>

<-- Example with input hidden, value should be synced with the actual field -->
<input type="hidden" value="Tony" data-fido-field="first_name" />

<-- Example with classic input hidden -->
<input type="text" data-fido-field="first_name" >
  
<-- Inside a form -->
<form action="/action_page">
  <label for="anyID">First name:</label>
  <input type="text" id="anyID" name="anyName" data-fido-field="first_name">
</form>

<-- Example with input hidden, value should be synced with the actual field -->
<input type="hidden" value="Stark" data-fido-field="last_name" />

<-- Example with classic input hidden -->
<input type="text" data-fido-field="last_name" >
  
<-- Inside a form -->
<form action="/action_page">
  <label for="anyID">Last name:</label>
  <input type="text" id="anyID" name="anyName" data-fido-field="last_name">
</form>

Using the API or the Postback

An additional requirement to query the API (or receive a postback event) is to provide the user-id via Fido JS.
The user-id is a unique identifier attached to an identity, it can even be a token or cookie id in case the user is not logged or still need identification.

To provide the JS with your user id you can make the following call:

<script type="text/javascript">
  (function(f,i,d,o,c,od,e){f['FidoObject']=c;f[c]=f[c]||function(){
    (f[c].q=f[c].q||[]).push(arguments)},f[c].l=1*new Date();od=i.createElement(d),
    e=i.getElementsByTagName(d)[0];od.async=1;od.src=o;e.parentNode.insertBefore(od,e)
  })(window,document,'script','https://code.fido.id/fd.js','fido');

    fido("create","FIDO-YOUR-JS-KEY");
    fido("auto_capture", false);
    fido("customer_id", "YOUR-USER-ID");
</script>

Example:

fido("customer_id", "287e24ef-b67c-40ef-8ca5");

When you call the API you will then provide the same user-id :

curl --request POST \
  --url https://api.fido.id/1.0/score/ \
  -H 'Content-Type: application/json' \
  -H 'x-api-key: b627d048-85b1-40b2-a48e' \
  -d @- <<'EOF'
  {
    "email": "[email protected]", 
    "msisdn": "01123456789", 
    "first_name": "tony", 
    "last_name": "stark", 
    "customer_id":"287e24ef-b67c-40ef-8ca5"
  }
EOF

Webhook

It is also possible to specify a webhook address in the javascript integration. In this way, at the end of the enrichment of the data captured by the javascript, the result will be sent to the specified webhook.

Example:

<script type="text/javascript">
  (function(f,i,d,o,c,od,e){f['FidoObject']=c;f[c]=f[c]||function(){
    (f[c].q=f[c].q||[]).push(arguments)},f[c].l=1*new Date();od=i.createElement(d),
    e=i.getElementsByTagName(d)[0];od.async=1;od.src=o;e.parentNode.insertBefore(od,e)
  })(window,document,'script','https://code.fido.id/fd.js','fido');

  fido("create","FIDO-YOUR-JS-KEY");
  fido("webhook_url", "http://my-webhook.com/hook");
</script>

Troubleshooting

Having trouble installing Fido? Here's a list of some typical things to look out for. If your issue isn't addressed here, please email us at [email protected]

Typos in the Fido JS

If you received the Javascript copy/pasted into an email or another document, it's easy for typographical elements in the JS to get reformatted. For example, you may end up with curly double quotes instead of straight quotes, or + signs may have been stripped. When in doubt, copy/paste the javascript directly from the developer documentation into your app.

Other

If you've double-checked all of the reasons above and are still having trouble, reach out to [email protected] with full-screen screenshots of the developer console on both tabs, or a video of what you are experiencing.

Data Latency

We open your Fido dashboard once data from your users hit our servers so you're not faced with an empty page. Usually, this happens in a matter of minutes, but sometimes it's longer. We call this latency. Normal latency is under 30 minutes. Anytime beyond this, please feel free to contact us at [email protected]

Missing JS-KEY

When copy/pasting the JS, be sure you have code that includes your JS-KEY in the fido init call.
If you get the javascript from the install page after you sign up, or from our developer docs while logged in, this won't be a problem. However, if you copy a version while logged out, you might end up with a code that won't work. Example:

fido("create", "FIDO-YOUR-JS-KEY");