GuidesAPI ReferenceChangelogRecipes

JavaScript SDK

Prior to installing our JavaScript SDK, we recommend reviewing your project and environment setup and considering any data privacy legislation you may need to comply with. This will help you make implementation decisions after installing that will best match your business needs.

Determine Your Project & Environment Model

Your Trustfull account is structured in a set of projects and environments. Projects can be thought of as blank slates that are completely independent of one another. Environments are subsets of projects that share definitions (events, segments, and reports) but do not share any data.

When you sign up for Trustfull, you automatically get one Main project with two environments: Production and Development. During implementation, you'll need to decide if this default setup satisfies your requirements, or if you will need to add more.

Generally speaking, most businesses find that keeping all of their data in the Main project and using the two default environments to separate their production and testing data work best. This setup allows you to analyze all of your user interactions in one place. This is essential for tracking each user through their journey converting from a visitor to a customer, using different products, and interacting across your website and mobile apps.

Here are a few cases where it would be best to add additional environments or projects:

  • You have a complex staged deployment process. In this case, we recommend creating environments that align with each stage in the process, such as Local, Integration, Functional, UAT, etc.
  • You have an internal application used by employees only, and you don't want that data to appear when analyzing your users. In this case, you should use a separate project to house data for that application.
  • You have global sites or apps for different countries. A setup with a single project and multiple environments is best suited for this, so you can share common definitions, but keep analysis separate.
  • You have a set of brands or products that do not share a common user base, such as owning multiple businesses. In this case, you'll want to set up multiple environments and projects for each business.

Complete steps for setting up new projects and environments can be found in Projects and Environment. If you're planning to use multiple environments, note that you'll need to copy the correct environment ID from Trustfull into your app during installation.

Data Privacy Legislation Compliance

Trustfull is GDPR compliant and can be configured to meet HIPAA and COPPA compliance standards. If you need to meet GDPR, HIPPA, or COPPA compliance standards with your implementation of Trustfull, we recommend reviewing our FAQs on Data Privacy prior to installation.

Create Your Trustfull Account

To get started with installation, create your Trustfull account. Once you've done so, your JavaScript will be provided for you to install Trustfull on your website or app. See our platform-specific installation guides for complete installation steps.

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

Installation

To get started with Trustfull, 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 Trustfull on both production and staging versions of your site, be sure to use the JS-KEY that corresponds to the environment in Trustfull 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 Trustfull 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 Trustfull 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 Trustfull by just adding the attribute fido-ignore. All descendant elements will also be ignored by Trustfull.

<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="country_code"
  • data-fido-field="email"
  • data-fido-field="tax_id"
  • data-fido-field="submit"

Special mention to data-fido-field="submit" as it represents 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>

Collecting country code

When using the js-sdk to collect user's data Trustfull needs a reliable way to determine the country code for the phone number.

If you have a separate field for the country-code you can use that field to provide Trustfull with the user-selected country code.

In case no country-code field is present on your web page the two available options are:

  • Deduction from the user's IP address: This is the default configuration. We look at the country from which the user is connected and append the proper country code. Eg. If connecting from the US the country code prepended will be +1.
  • Fixed value for all phone numbers: A fixed value will be prepended for all phone numbers received. Eg. all phone numbers will get a +1 prepended

The most accurate and reliable method to collect the correct country code is to have a separate field in the web page and map that field using data-fido-field="country_code" HTML attribute.

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 in 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 it 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 copying/pasting the JS, be sure you have code that includes your JS-KEY in the Trustfullinit 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");

Updated 5 days ago