Interface: Fides

Once FidesJS is initialized, it exports this global object to window.Fides as the main API to integrate into your web applications.

You can then use Fides in your JavaScript code to check the user's current consent preferences (e.g. if (Fides.consent.marketing) { ... }), enable FidesJS integrations (e.g. Fides.gtm()), programmaticaly show the FidesJS UI (e.g. Fides.showModal()) and more. See the full list of properties below for details.

NOTE: FidesJS will need to be downloaded, executed, and initialized before the Fides object is available. Therefore, your code should check for the existence of Fides or subscribe to the global FidesInitialized event (see FidesEvent) for details) before using the Fides object in your own code.

Example

<head>
  <script src="path/to/fides.js"></script>
</head>
<body>
  <!--- ...later, in your own application code... --->
  <script>
    // Query the current user's consent preferences
    if (Fides && Fides.consent.data_sales_and_sharing) {
      // Enable advertising scripts
      console.log("Current user has opt-in consent for the `data_sales_and_sharing` privacy notice!");
    }
  </script>
</body>

Properties

consent

consent: Record<string, boolean>

User's current consent preferences, formatted as a key/value object with:

key: the applicable Fides notice_key (e.g. data_sales_and_sharing, analytics)
value: true or false, depending on whether or not the current user has consented to the notice

Note that FidesJS will automatically set default consent preferences based on the type of notice - so, for example a typical "opt-in" analytics notice will be given a default value of false. This allows writing very simple (and readable!) code to check a user's consent preferences.

The specific keys provided in the Fides.consent property are determined based on your Fides configuration, and are provided to the browser based on the user's location, property ID, etc.

Examples

A Fides.consent value showing the user has opted-out of data sales & sharing:

{
  "data_sales_and_sharing": false
}

A Fides.consent value showing the user has opted-in to analytics, but not marketing:

{
  "analytics": true,
  "marketing": false
}

fides_string?

optional fides_string: string

User's current consent string(s) combined into a single value. This is used by FidesJS to store IAB consent strings from various frameworks such as TCF, GPP, and Google's "Additional Consent" string. Additionally, we support passing a Notice Consent string, which is a base64 encoded string of the user's Notice Consent preferences. See FidesOptions.fides_string for more details.

The string consists of four parts separated by commas in the format: TC_STRING,AC_STRING,GPP_STRING,NC_STRING where:

TC_STRING: IAB TCF (Transparency & Consent Framework) string
AC_STRING: Google's Additional Consent string
GPP_STRING: IAB GPP (Global Privacy Platform) string
NC_STRING: Base64 encoded string of the user's Notice Consent preferences.

Example

console.log(Fides.fides_string);
// "CPzHq4APzHq4AAMABBENAUEAALAAAEOAAAAAAEAEACACAAAA,1~61.70,DBABLA~BVAUAAAAAWA.QA,eyJkYXRhX3NhbGVzX2FuZF9zaGFyaW5nIjowLCJhbmFseXRpY3MiOjF9"

initialized

initialized: boolean

Whether or not FidesJS has finished initialization and has loaded the current user's experience, consent preferences, etc.

NOTE: To be notified when initialization has completed, you can subscribe to the FidesInitialized event. See FidesEvent for details.

getModalLinkLabel()

getModalLinkLabel: (options?) => string

The modal's "Trigger link label" text can be customized, per regulation, for each language defined in the experience.

Use this function to get the label in the appropriate language for the user's current locale. To always return in the default language only, pass the disableLocalization option as true.

Parameters

Parameter	Type
`options`?	`object`
`options.disableLocalization`?	`boolean`

Returns

string

Examples

Getting the link text in the user's current locale (eg. Spanish):

console.log(Fides.getModalLinkLabel()); // "Tus preferencias de privacidad"

Getting the link text in the default locale to match other links on the page:

console.log(Fides.getModalLinkLabel({ disableLocalization: true })); // "Your Privacy Choices"

Applying the link text to a custom modal link element:

<button class="my-custom-show-modal" id="fides-modal-link-label" onclick="Fides.showModal()"><button>
<script>
 document.getElementById('fides-modal-link-label').innerText = Fides.getModalLinkLabel();
</script>

showModal()

showModal: () => void

Display the FidesJS modal component on the page, if the current user's session (location, property ID, etc.) matches an experience with a modal component. If the experience does not match, this function has no effect and can be called safely at any time.

This function is designed to be used to programmatically show the FidesJS modal via an onclick handler on a "modal link" element on the page. However, since the modal is optional, this link should only be shown when applicable. To make it easy to dynamically show/hide this "modal link", FidesJS will automatically add the CSS class fides-overlay-modal-link-shown to the <body> when applicable. This class can then be used to show/hide a link on the page via CSS rules - see the example below!

When not used as a click handler, Fides.showModal() can be called programmatically at any time from your own custom JavaScript logic as desired.

NOTE: If using custom JavaScript to show the modal, you may also want to set the modalLinkId global setting on the Fides Privacy Center to prevent the automated searching for, and binding the click event to, the modal link. If using Fides Cloud, contact Ethyca Support for details on adjusting global settings.

This function is not available for Headless experiences.

Returns

void

Examples

Showing the FidesJS modal via an onclick handler on a custom button element:

<button class="my-custom-show-modal" onclick="Fides.showModal()">
  Your Privacy Choices
</button>

Another option, using a custom link element instead:

<a role="button" class="my-custom-show-modal" onclick="Fides.showModal()">
  Your Privacy Choices
</a>

Showing/hiding the custom element using the fides-overlay-modal-link CSS class:

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

Showing the FidesJS modal programmatically in a JavaScript function:

function myCustomShowModalFunction() {
  console.log("Displaying FidesJS consent modal")
  if (window.Fides) {
    window.Fides.showModal();
  }
}

gtm()

gtm: (options?) => void

Enable the Google Tag Manager (GTM) integration. This should be called immediately after FidesJS is included, and once enabled, FidesJS will automatically push all FidesEvent events to the GTM data layer as they occur, which can then be used to trigger/block tags in GTM based on Fides.consent preferences or other business logic.

See the Google Tag Manager tutorial for more.

Parameters

Parameter	Type	Description
`options`?	`object`	Optional configuration for the GTM integration
`options.non_applicable_flag_mode`?	`"omit"` \| `"include"`	Controls how non-applicable privacy notices are handled in the data layer. Can be "omit" (default) to exclude non-applicable notices, or "include" to include them with a default value.
`options.flag_type`?	`"boolean"` \| `"consent_mechanism"`	Controls how consent values are represented in the data layer. Can be "boolean" (default) for true/false values, or "consent_mechanism" for string values like "opt_in", "opt_out", "acknowledge", "not_applicable".

Returns

void

Examples

Basic usage in your site's <head>:

<head>
  <script src="path/to/fides.js"></script>
  <script>Fides.gtm()</script>
</head>

With options to include non-applicable notices and use consent mechanism strings:

<head>
  <script src="path/to/fides.js"></script>
  <script>
    Fides.gtm({
      non_applicable_flag_mode: "include",
      flag_type: "consent_mechanism"
    });
  </script>
</head>

init()

init: (config?) => Promise<void>

Initializes FidesJS with an initial configuration object.

In most cases, you should never have to call this directly, since Fides Cloud will automatically bundle a Fides.init(...) call server-side with the appropriate configuration options for the user's session based on their location, property ID, and the matching experience config from Fides.

However, initialization can be called manually if needed - for example to delay initialization until after your own custom JavaScript has run to set up some config options. In this case, you can disable the automatic initialization by including the query param initialize=false in the Fides script URL (see (Privacy Center FidesJS Hosting)[/docs/dev-docs/js/privacy-center-fidesjs-hosting] for details). You will then need to call Fides.init() manually at the appropriate time.

This function can also be used to reinitialize FidesJS. This is useful when you're working on a single page application (SPA) and you want to modify any FidesJS options after initialization - for example, switching between regular/embedded mode with fides_embed, overriding the user's language with fides_locale, etc. Doing so without passing a config will reinitialize FidesJS with the initial configuration, but taking into account any new overrides such as the fides_overrides global or the query params.

Parameters

Parameter	Type
`config`?	`any`

Returns

Promise<void>

onFidesEvent()

onFidesEvent: (type, callback) => () => void

An alternative way to subscribe to Fides events. The same events are supported, except the callback receives the event details directly. This is useful in restricted environments where you can't directly access window.addEventListener.

Returns an unsubscribe function that can be called to remove the event listener.

Parameters

Parameter	Type	Description
`type`	`any`	The type of event to listen for, such as `FidesInitialized`, `FidesUpdated`, etc.
`callback`	(`detail`) => `void`	The callback function to call when the event is triggered

Returns

Function

Returns

void

Example

const unsubscribe = Fides.onFidesEvent("FidesUpdated", (detail) => {
  console.log(detail.consent);
  unsubscribe();
});

reinitialize()

reinitialize: () => Promise<void>

Returns

Promise<void>

Deprecated

Fides.init() can now be used directly instead of Fides.reinitialize().

shouldShowExperience()

shouldShowExperience: () => boolean

Check if the FidesJS experience should be shown to the user. This function will return true if the user's session (location, property ID, etc.) matches an experience with a banner component, and the user has not yet interacted with the banner (e.g. by accepting or rejecting the consent preferences) or in the case when the previous consent is no longer valid.

Returns

boolean

encodeNoticeConsentString()

encodeNoticeConsentString: (consent) => string

Encode the user's consent preferences into a Notice Consent string. See FidesOptions.fides_string for more details.

Parameters

Parameter	Type	Description
`consent`	`Record`<`string`, `boolean` \| `0` \| `1`>	The user's consent preferences to encode. (Numeric values are supported for smaller string results and will be decoded to boolean values)

Returns

string

Example

const encoded = Fides.encodeNoticeConsentString({data_sales_and_sharing:0,analytics:1});
console.log(encoded); // "eyJkYXRhX3NhbGVzX2FuZF9zaGFyaW5nIjowLCJhbmFseXRpY3MiOjF9"

decodeNoticeConsentString()

decodeNoticeConsentString: (base64String) => object

Decode a Notice Consent string into a user's consent preferences. See FidesOptions.fides_string for more details.

Parameters

Parameter	Type	Description
`base64String`	`string`	The Notice Consent string to decode.

Returns

object

Example

const decoded = Fides.decodeNoticeConsentString("eyJkYXRhX3NhbGVzX2FuZF9zaGFyaW5nIjowLCJhbmFseXRpY3MiOjF9");
console.log(decoded); // {data_sales_and_sharing: false, analytics: true}

geolocation?

optional geolocation: any

The detected geolocation that Fides uses to determine the user's experience. This field is read-only.

Example

{
  "country": "ca",
  "location": "ca-on",
  "region": "on"
}

locale

locale: string

The detected i18n locale that Fides uses to determine the language shown to the user.

Example

"en"

This field is read-only.

identity

identity: Record<string, string>

The user's identity values, which only include a copy of the fides user device id that we store in the fides_consent cookie e.g.

Example

{
  "fides_user_device_id": "1234-"
}

This field is read-only.

Overview FidesEvent