Cookie Consent (JavaScript API Demo)

Osano JavaScript API Demo

This page demonstrates how to use the Osano JavaScript API to dynamically update page content based on user consent preferences.

The page background will change color based on your consent choices:

Try changing your cookie preferences using the link below to see how the page responds in real-time!

Update Cookie Preferences

Thanks for accepting all categories! Here's a happy puppy!

Happy smiling dog

Implementation Examples and Instructions

Expand an example below. Add your scripts, iframes, or content inside the conditional section.

Only show content when PERSONALIZATION is accepted

View live example →

<!-- Conditional content (hidden unless Personalization is ACCEPT) --> <div class="conditional-content" id="conditional-content" style="display:none;"> <h3>Personalization Content</h3> <p>Place your third-party embeds, scripts, or content here.</p> </div> <div class="consent-required-message" id="consent-message"> <p>Enable Personalization in your <a href="javascript:void(0)" onclick="Osano.cm.showDrawer()">Cookie Preferences</a> to view this content.</p> </div> <script> function updatePageBasedOnConsent(consent) { if (!consent) return; var content = document.getElementById('conditional-content'); var message = document.getElementById('consent-message'); if (consent.PERSONALIZATION === 'ACCEPT') { content.style.display = 'block'; message.style.display = 'none'; } else { content.style.display = 'none'; message.style.display = 'block'; } } document.addEventListener('DOMContentLoaded', function() { if (typeof Osano !== 'undefined' && Osano.cm) { Osano.cm.addEventListener('osano-cm-initialized', function(consent) { updatePageBasedOnConsent(consent); }); Osano.cm.addEventListener('osano-cm-consent-saved', function(consent) { updatePageBasedOnConsent(consent); }); } }); </script>
Only show when all non-essential categories are accepted

View live example →

<!-- Show only when all non-essential categories are ACCEPT --> <div class="conditional-content" id="all-accepted-content" style="display:none;"> <h3>All Non-Essential Accepted</h3> <p>This appears only if Analytics, Marketing, and Personalization are all accepted.</p> </div> <div class="consent-required-message" id="all-accepted-message"> <p>Accept all non-essential categories in your <a href="javascript:void(0)" onclick="Osano.cm.showDrawer()">Cookie Preferences</a> to view this content.</p> </div> <script> function updateAllAccepted(consent) { if (!consent) return; var content = document.getElementById('all-accepted-content'); var message = document.getElementById('all-accepted-message'); var categories = ['ANALYTICS','MARKETING','PERSONALIZATION']; var allAccepted = true; for (var i = 0; i < categories.length; i++) { if (consent[categories[i]] !== 'ACCEPT') { allAccepted = false; break; } } if (allAccepted) { content.style.display = 'block'; message.style.display = 'none'; } else { content.style.display = 'none'; message.style.display = 'block'; } } document.addEventListener('DOMContentLoaded', function() { if (typeof Osano !== 'undefined' && Osano.cm) { Osano.cm.addEventListener('osano-cm-initialized', function(consent) { updateAllAccepted(consent); }); Osano.cm.addEventListener('osano-cm-consent-saved', function(consent) { updateAllAccepted(consent); }); } }); </script>
iFrame Example when MARKETING is accepted

View live example →

<!-- Iframe appears only when Marketing is ACCEPT --> <div class="conditional-content" id="iframe-content" style="display:none;"> <h3>Embedded Content</h3> <iframe width="560" height="315" src="https://domain.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe> </div> <div class="consent-required-message" id="iframe-message"> <p>Enable Marketing/Targeted Advertising in your <a href="javascript:void(0)" onclick="Osano.cm.showDrawer()">Cookie Preferences</a> to view the embed.</p> </div> <script> function updateIframe(consent) { if (!consent) return; var content = document.getElementById('iframe-content'); var message = document.getElementById('iframe-message'); if (consent.MARKETING === 'ACCEPT') { content.style.display = 'block'; message.style.display = 'none'; } else { content.style.display = 'none'; message.style.display = 'block'; } } document.addEventListener('DOMContentLoaded', function() { if (typeof Osano !== 'undefined' && Osano.cm) { Osano.cm.addEventListener('osano-cm-initialized', function(consent) { updateIframe(consent); }); Osano.cm.addEventListener('osano-cm-consent-saved', function(consent) { updateIframe(consent); }); } }); </script>
How it works

This page demonstrates practical implementation of the Osano JavaScript API for responsive content based on user privacy choices. Here's what happens:

1. Initial Consent Detection

When the page loads, the osano-cm-initialized event provides the current consent state.

2. Save Events

When users save preferences, the osano-cm-consent-saved event fires with the updated consent object.

3. Conditional Rendering

Your functions read the consent object and show/hide content accordingly. Example consent object:

{
  ANALYTICS: "ACCEPT"|"DENY",
  MARKETING: "ACCEPT"|"DENY",
  PERSONALIZATION: "ACCEPT"|"DENY",
  ESSENTIAL: "ACCEPT",
  OPT-OUT: "ACCEPT"|"DENY",
  STORAGE: "ACCEPT"|"DENY"
}
Update Cookie Preferences