Article

cookie-complianceprivacy-managementgdprccpaweb-developmentjavascriptcompliance-automation

Implement a Cookie Consent Banner with OneTrust AI

Get a compliant cookie consent banner on your website using OneTrust AI. This guide walks you through configuring your banner in the OneTrust UI, generating the necessary script, and embedding it into your site's HTML for immediate use.

beginner30 min4 steps

The play

Configure Your Banner in OneTrust AI
Log into your OneTrust AI account and navigate to the 'Cookie Compliance' module. Create a new cookie banner template or customize an existing one. Define its appearance, text, and consent model (e.g., opt-in, opt-out) to align with regulations like GDPR or CCPA.
Generate and Copy the Website Script
Once your banner is configured, go to the 'Scripts' section within the Cookie Compliance module. Select the domain for which you are deploying the banner. OneTrust AI will generate a unique JavaScript snippet. Copy this entire snippet to your clipboard.
Embed the Script in Your Website's HTML
Open the HTML file for your website. Paste the copied OneTrust AI script into the <head> section of your HTML. It's critical to place it as the very first script to ensure it can manage other scripts that may set cookies.
Test the Consent Banner
Open your website in a new incognito browser window to simulate a first-time visit. The OneTrust AI cookie banner should appear. Interact with it (accept, reject, or manage preferences) and then use your browser's developer tools (Application > Cookies) to verify that the 'OptanonConsent' cookie is set correctly based on your choice.

Starter code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OneTrust AI Test Page</title>

    <!-- 1. Paste your OneTrust AI script here. -->
    <!-- This is a placeholder; replace with the script from your OneTrust account. -->
    <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="00000000-0000-0000-0000-000000000000"></script>
    <script type="text/javascript">
        // This function is a callback that fires after the main script loads.
        // You can use it to trigger logic based on consent.
        function OptanonWrapper() { }
    </script>
    <!-- End OneTrust Script -->

    <!-- Example of a script that might set cookies -->
    <script type="text/javascript">
        console.log("This is a standard script in the head.");
    </script>

</head>
<body>

    <h1>My Website</h1>
    <p>If the OneTrust AI script is correctly implemented, you should see a cookie consent banner upon loading this page for the first time in an incognito window.</p>

</body>
</html>