ClaritiOneDashboard

Cookie Consent Banner Preview

Customize and preview your cookie consent banner. Changes update live on the preview page.

Banner Configuration

Generated Embed Script

<script>// Configure your banner on the dashboard first</script>

Live Preview

The banner appears in the bottom-right corner of this preview area.

↓ Banner will appear here ↓

Sample Page Content

This is sample content to demonstrate how the cookie consent banner overlays on a real page. The banner will appear in the configured position once you click "Apply Settings".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

`; document.getElementById('embedCode').textContent = code; } document.getElementById('brandColor').addEventListener('input', function() { document.getElementById('brandColorHex').value = this.value.toUpperCase(); }); document.getElementById('brandColorHex').addEventListener('input', function() { document.getElementById('brandColor').value = this.value; }); document.getElementById('applyBtn').addEventListener('click', applyBanner); document.getElementById('resetBtn').addEventListener('click', function() { destroyConsent(); document.getElementById('previewArea').innerHTML = `

↓ Banner will appear here ↓

Sample Page Content

This is sample content to demonstrate how the cookie consent banner overlays on a real page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

`; document.getElementById('embedCode').textContent = ''; showToast('Banner reset', 'ok'); }); document.getElementById('showPrefsBtn').addEventListener('click', function() { if (window.CookieConsent && typeof CookieConsent.showPreferences === 'function') { CookieConsent.showPreferences(); } else { showToast('Apply banner settings first', 'warn'); } }); document.getElementById('copyBtn').addEventListener('click', function() { const code = document.getElementById('embedCode'); navigator.clipboard.writeText(code.textContent).then(() => { showToast('Embed code copied to clipboard!', 'ok'); }).catch(() => { const range = document.createRange(); range.selectNodeContents(code); const sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); document.execCommand('copy'); showToast('Embed code copied!', 'ok'); }); }); // Auto-apply on load setTimeout(applyBanner, 500);