Consent Management: Install Fides JS on your Website

10minFidesConsent Management

In this tutorial we will install fides.js, the Fides JavaScript Components, to your website so that your visitors are served the appropriate privacy and consent notices.

Adding Domains

In order for Fides.js to be served on your website, you must first add your domain to the allowed list. Read the guide for adding domains to the allowed list here.

In general, this will require 3 steps:

Adding the fides.js script tag to the source code of your website
Adding a link to the footer of your website to open the Fides overlay/modal
Configuring your tag manager or custom JavaScript tags to enable/disable scripts

When you're done, the edits to your website should look something like this:

Fides.js installation

<head>
  <!-- Step One: Include Fides.js before all other script tags that need consent -->
  <script src="https://privacy.example.com/fides.js"></script>
  <!-- (Optional) Enable the Fides.js Google Tag Manager (GTM) integration -->
  <script>Fides.gtm()</script>
</head>
 
<body>
  <!-- Step Two: Add a custom link/button/etc. to the footer of your site with id="fides-modal-link" -->
  <a href="#" id="fides-modal-link">
    Manage Preferences
  </a>
</body>

Let's get started!

Prerequisites

For this tutorial you'll need:

A Fides Cloud or Fides Enterprise account
The role of Owner or Contributor for your Fides organization.
Access to the source code of your website to add JavaScript.
At least one system with a data use on your Data Map. Read how to add systems to the Data Map now.
At least one privacy notice configured. Read how to configure privacy notices now.
At least one privacy experience configured. Read how to configure privacy experiences now.

Install Fides.js Script on your Website

Fides.js is the JavaScript package that powers Fides privacy and consent experiences on your website. It needs to be installed into the source code of your website to function, which will require some small customizations to suit your preferences.

Use the following template as a guide to update your website:

Fides.js Script Template

<head>
  <!-- Step One: Include Fides.js before all other script tags that need consent -->
  <script src="https://privacy.example.com/fides.js"></script>
  <!-- (Optional) Enable the Fides.js Google Tag Manager (GTM) integration -->
  <script>Fides.gtm()</script>
</head>

Modify this template with:

Replace privacy.example.com with the custom domain of your privacy center, e.g. "privacy.example.com", "privacy.your-brand.com", or "privacy-your-brand.fides-cdn.ethyca.com". If you're not sure what to use, work with your Ethyca customer success team!
Optionally, remove the <script>Fides.gtm()</script> tag if you do not use Google Tag Manager for managing tags on your website

Installation Location

It's important that Fides.js is loaded as early as possible on your site. For this reason, it's recommended to place these tags ahead of all other JavaScript in the <head> of your website.

Test Fides.js Installation

Once you have installed the fides.js script and deployed the changes to your website, you can do some quick tests before fully configuring your consent solution. Here are three easy checks:

Open your updated website in your web browser, e.g. https://www.example.com (opens in a new tab)
Inspect the source code of your website and ensure that the <script src="https://privacy.example.com/fides.js"></script> is present
Open the Developer Console and run window.Fides and ensure that you see a valid Javascript object like:

{consent: {…}, experience: undefined, geolocation: undefined, options: {…}, fides_meta: {…}, …}

If window.Fides is loading, you're almost done!

Step Two: Add a Link or Button to Your Website Footer

For full consent compliance, it's often necessary to have a link or button on your site so that your website visitors can directly manage their consent preferences. Commonly, this will be a link or button element in the footer like "Manage Preferences", "Your Privacy Choices", or similar. The following documents both a simple and then an advanced implementation.

Basic Install

This implementation will cover the majority of use cases. You can either edit an existing element, or add a new element on your page to show the Fides consent overlay by using id="fides-modal-link" on that element:

Fides.js Modal Link

<body>
  <!-- Step Two (simple): Add a custom link/button/etc. to the footer of your site with id="fides-modal-link" -->
  <a href="#" id="fides-modal-link">
    Manage Preferences
  </a>
</body>

Supported Elements

In the above example, we use an <a> element, but you can add the fides-modal-link id on any clickable element: <a>, <button>, <div>, etc. Regardless of which you use, Fides.js will register an onclick handler on this element.

Once you have added this link or button and deployed the changes to your website, Fides.js will automatically look for the element by searching for id="fides-modal-link".

You should be able to click the link and open the Fides overlay! Note that Fides will automatically hide that link by default, and will only show if there are relevant notices in the user's location.

Advanced Install

For more complex or advanced use cases, Fides.js exposes some methods to allow for more control over the interaction between Fides.js and your application. You can either edit an existing element, or add a new element on your page to show the Fides consent overlay by adding an onclick event and a custom class to help display that element correctly:

Fides.js Modal Link

<body>
  <!-- Step Two (advanced): Add a custom link/button/etc. to the footer of your site -->
  <a href="#" class="my-custom-link" onclick="Fides.showModal()">
    Manage Preferences
  </a>
</body>

Fides will also add a class (fides-overlay-modal-link-shown) to the body to be used to control visibility of the footer link. The following is an example of how to use that class to control when the footer link should be visible:

Fides Link Visibility CSS

  /* Hide the modal link by default */
  .my-custom-link {
    display: none;
  }
  /* Only show the modal link when applicable */
  .fides-overlay-modal-link-shown .my-custom-link {
    display: inline;
  }

You should be able to click the link and open the Fides overlay! Note that Fides will automatically hide that link by default, and will only show if there are relevant notices in the user's location.

Configuring Google Tag Manager

Now that you've installed Fides.js and added the modal link, you're ready for the next step - configuring your tag manager!

See Configuring Google Tag Manager now!

(Optional) Integrating Fides.js with Custom JavaScript

For tags that are managed outside of a Tag Manager, or any other custom code which requires user consent, you can check the user’s consent directly in the Fides.consent global variable.

For example, to check for an explicit opt-out from a user you can do the following:

Fides.js for Custom JavaScript

if (Fides && !Fides.consent.data_sales_and_sharing) {
  // User has opted out
} else {
  // User has not opted out
}

Note that, in the above example, data_sales_and_sharing matches a cookie key for a privacy notice created when configuring consent management in Fides Control. The cookie key can be any unique identifier you choose when creating a privacy notice.

Read about creating cookie keys as part of privacy notices here.

Configure TCF 2.2 Configuring Google Tag Manager