Configuring your user interface

Design the visuals and display logic for your site's UI

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

Auto-displaying UI

Consent defaults to not show any UI. To change this default and auto-display the banner as needed on a user's first pageview, set 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 on your site.

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

Prebuilt UI by regime

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.

Changing your default regime

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.

Customizing your UI

Create your own UI as a discrete external JavaScript file. Then you can optionally replace the default Transcend UI module and Airgap.js will asynchronously auto-load your module instead:

<script> self.airgap = { ui: '//your-site.example/path-to-your-ui-module.js' } </script>