Enabling iFraming of a OneTrust Preference Center

OneTrust offers a comprehensive solution for managing privacy preferences and consent. Integrating a Preference Center into your website allows users to manage their privacy settings conveniently. One way to seamlessly integrate the Preference Center into your site is through iFraming. This guide provides step-by-step instructions on how to enable iFraming of a Preference Center.

Steps

  • Step 1: Create and Configure a Preference Center
  • Step 2: Obtain the iFrame Script
  • Step 3: Embed the iFrame Script

Step 1: Create and Configure a Preference Center

  1. Log in to your OneTrust application.
  2. Navigate to the Universal Consent and Preference Management module.
  3. In the Preference screen, create a new Preference Center or modify an existing one to suit your branding, purposes of consent, content blocks, etc.

Step 2: Obtain the iFrame Script

  1. Within the Preference Center screen, go to the Integrations tab.

  2. Copy the pre-generated iFrame script provided. This script enables the Preference Center to be rendered on a client-hosted page.

    <!-- OneTrust Web Form start -->
    <style>
    .ot-form-wrapper {
        max-width: 750px;
        height: 800px;
        border: 1px solid #c0c2c7;
        margin: auto;
    }
    .ot-form-wrapper iframe {
        width: 100%;
        height: 100%;
        border: none;
    }
    </style>
    <div class="ot-form-wrapper">
    <iframe
        src="https://privacyportaltrial.onetrust.com/ui/#/preferences/multipage/login/80a79f74-e137-4ccd-9794-d727619b368a">
    </iframe>
    </div>
    <!-- OneTrust Web Form end -->
    

Step 3: Embed the iFrame Script

  1. Paste the copied iFrame script into the front-end code of your website page.
  2. Ensure that the domain and page where the Preference Center is displayed are client-hosted.
  3. The Preference Center will persist through the iFrame wherever it is embedded within the page.

Best Practices

The following considerations should be noted before carrying out any action:

  • Frontend User Interface (UI): The customer is responsible for handling authentication to display preferences using data received from OneTrust APIs.
  • Avoid Using OneTrust API Keys or Client Credentials on Frontend:

🚧

It is crucial not to use OneTrust API Keys or Client Credentials on the frontend to prevent users from gaining unauthorized access to the OneTrust APIs. These OneTrust APIs are meant to be used only on the backend servers, not on the frontend.

  • Token ID Usage: The token ID of a user can be stored client-side or pulled in real-time from OneTrust via API when a user logs into their profile.
  • API Calls: OneTrust provides APIs for pulling magic link tokens that allow authenticated access to a Preference Center without the user having to log in. Refer to the documentation for details on using the Get List of Data Subject Tokens API.