Configuring your user interface

Setting up the user facing interface of Transcend Consent involves:

  1. Logic for auto-displaying a banner
  2. Design and configure the visuals for your banner, if applicable
  3. Logic for displaying UI appropriate to your user’s consent regime

Our Consent Manager defaults to not show any UI. To change this default and auto-display the banner as needed on a user's first pageview, set the data-prompt="auto" attribute on your airgap.js script tag.

To auto-display the banner after a user reaches a certain number of pageviews, set data-prompt="{number of visits to trigger banner display}". For example, data-prompt="3" will make the banner auto-display on and after a user's third pageview.

Once dismissed, the banner will stay dismissed for that user.

If desired, there are two ways to integrate Consent into the user interface of your site and auto-display a consent banner to your users:

  1. Use Transcend’s pre-built UI
  2. Directly calling appropriate functions of airgap.js from your custom front-end code

The pre-built UI adapts to the user’s location and will automatically display an interface appropriate to their appropriate consent regimes, e.g. CPRA if the user is in California or the GDPR if the user is in Europe. These are the default UI banners, by region:

Note: If we do not detect any applicable privacy legal regimes, we will not show any UI by default.

Our prebuilt UI can be configured by visiting the “Display Settings” page. Here, you can edit the font color, the theme color, as well as the link to your company's Privacy Policy.

We suppress automatic consent prompts for users who have active privacy signals that opt out every configurable tracking purpose. This means that users with Do-Not-Track enabled will never be auto-prompted for consent via transcend.autoShowConsentManager(). Likewise, users with Global Privacy Control enabled in CPRA-like privacy legal regimes will also not be auto-prompted for consent.

transcend.showConsentManager() always shows the consent manager, and is the recommended API for displaying a consent prompt as the result of a button click. transcend.autoShowConsentManager() is used by our data-prompt="[# of pageviews to trigger prompt]" auto-prompting feature.

You can customize the default privacy regime (that is, the regime that is reported whenever no applicable regimes are otherwise detected) by adding a data-default-regime="CPRA" (or "GDPR", etc.) attribute on your Airgap.js script tag.

You can directly set the privacy regime (e.g. if you want to use your own first-party tools to aid in regime detection) by adding a data-regime="CPRA" (or "GDPR", etc.) attribute on your Airgap.js script tag.

By default, airgap.js will display a persistent floating widget after the consent banner is dismissed to provide users an easy way to get back to the banner. This floating widget can be disabled by setting data-dismissed-view-state="Closed" on your airgap.js script tag.

You can swap out our default UI with your own UI as a discrete external JavaScript file. First, clone and build our open source reference UI. Then you can optionally replace the default Transcend UI module via data-ui="/path/to/your-ui-module.js" on your script tag and airgap.js will auto-load your UI module instead.