⚠️ Important Legal Notice: Making these customizations will render Osano's "No Fines, No Penalties" guarantee null and void.
Custom Consent Text Replacement
This page demonstrates a standard Osano Cookie Consent configuration, except that US users will see custom category descriptions and labels in the consent interface. All other users see the default Osano consent interface.
The script uses a MutationObserver to detect when Osano's consent drawer elements are added to the DOM, then replaces the default category descriptions and labels with custom text. It specifically targets US jurisdictions (those starting with 'us-') and English locale users, ensuring the customization only applies to the intended audience. This customization uses the Osano JavaScript API to modify consent interface content.
To implement this, add the following script after your Osano.js script tag:
Main Implementation Script
Here's the complete script for customizing consent text:
<script>
window.Osano?.cm?.addEventListener('osano-cm-initialized', () => {
if (window.Osano?.cm?.jurisdiction?.startsWith('us-')) {
const observer = new MutationObserver((mutations, obs) => {
if (window.Osano?.cm?.locale !== 'en') {
return;
}
const essentialDescription = document.querySelector('#osano-cm-drawer-toggle--category_ESSENTIAL--description');
const marketingDescription = document.querySelector('#osano-cm-drawer-toggle--category_MARKETING--description');
const personalizationDescription = document.querySelector('#osano-cm-drawer-toggle--category_PERSONALIZATION--description');
const analyticsDescription = document.querySelector('#osano-cm-drawer-toggle--category_ANALYTICS--description');
const optOutDescription = document.querySelector('#osano-cm-drawer-toggle--category_OPT_OUT--description');
if (essentialDescription && marketingDescription && personalizationDescription && analyticsDescription && optOutDescription) {
essentialDescription.textContent = 'This is an example of custom essential description text for US users. Feel free to replace this with your own legal or marketing language.';
marketingDescription.textContent = 'This is an example of custom marketing description text for US users. Feel free to replace this with your own legal or marketing language.';
personalizationDescription.textContent = 'This is an example of custom personalization description text for US users. Feel free to replace this with your own legal or marketing language.';
analyticsDescription.textContent = 'This is an example of custom analytics description text for US users. Feel free to replace this with your own legal or marketing language.';
optOutDescription.textContent = 'This is an example of custom opt-out description text for US users. Feel free to replace this with your own legal or marketing language.';
const labels = document.querySelectorAll('.osano-cm-toggle__label');
labels.forEach(label => {
if (label.textContent.includes('Essential')) {
label.textContent = 'Custom Essential';
} else if (label.textContent.includes('Targeted Advertising')) {
label.textContent = 'Custom Marketing';
} else if (label.textContent.includes('Personalization')) {
label.textContent = 'Custom Personalization';
} else if (label.textContent.includes('Analytics')) {
label.textContent = 'Custom Analytics';
} else if (label.textContent.includes('Do Not Sell')) {
label.textContent = 'Custom Do Not Sell';
}
});
obs.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
});
</script>
Additional Customization Examples
To change the custom descriptions, edit the strings inside textContent = '...' to your preferred messages.
<script>
window.Osano?.cm?.addEventListener('osano-cm-initialized', () => {
if (window.Osano?.cm?.jurisdiction?.startsWith('us-')) {
const observer = new MutationObserver((mutations, obs) => {
if (window.Osano?.cm?.locale !== 'en') {
return;
}
const essentialDescription = document.querySelector('#osano-cm-drawer-toggle--category_ESSENTIAL--description');
const marketingDescription = document.querySelector('#osano-cm-drawer-toggle--category_MARKETING--description');
const personalizationDescription = document.querySelector('#osano-cm-drawer-toggle--category_PERSONALIZATION--description');
const analyticsDescription = document.querySelector('#osano-cm-drawer-toggle--category_ANALYTICS--description');
const optOutDescription = document.querySelector('#osano-cm-drawer-toggle--category_OPT_OUT--description');
if (essentialDescription && marketingDescription && personalizationDescription && analyticsDescription && optOutDescription) {
essentialDescription.textContent = 'Your custom essential description here';
marketingDescription.textContent = 'Your custom marketing description here';
personalizationDescription.textContent = 'Your custom personalization description here';
analyticsDescription.textContent = 'Your custom analytics description here';
optOutDescription.textContent = 'Your custom opt-out description here';
obs.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
});
</script>
To change the custom labels, edit the strings inside label.textContent = '...' to your preferred labels.
<script>
window.Osano?.cm?.addEventListener('osano-cm-initialized', () => {
if (window.Osano?.cm?.jurisdiction?.startsWith('us-')) {
const observer = new MutationObserver((mutations, obs) => {
if (window.Osano?.cm?.locale !== 'en') {
return;
}
const labels = document.querySelectorAll('.osano-cm-toggle__label');
labels.forEach(label => {
if (label.textContent.includes('Essential')) {
label.textContent = 'Your Custom Essential Label';
} else if (label.textContent.includes('Targeted Advertising')) {
label.textContent = 'Your Custom Marketing Label';
} else if (label.textContent.includes('Personalization')) {
label.textContent = 'Your Custom Personalization Label';
} else if (label.textContent.includes('Analytics')) {
label.textContent = 'Your Custom Analytics Label';
} else if (label.textContent.includes('Do Not Sell')) {
label.textContent = 'Your Custom Do Not Sell Label';
}
});
obs.disconnect();
});
observer.observe(document.body, { childList: true, subtree: true });
}
});
</script>
To target a different region, replace 'us-' with the desired jurisdiction prefix (e.g., 'gb-' for Great Britain users).
<script>
window.Osano?.cm?.addEventListener('osano-cm-initialized', () => {
if (window.Osano?.cm?.jurisdiction?.startsWith('gb-')) {
const observer = new MutationObserver((mutations, obs) => {
if (window.Osano?.cm?.locale !== 'en') {
return;
}
const essentialDescription = document.querySelector('#osano-cm-drawer-toggle--category_ESSENTIAL--description');
const marketingDescription = document.querySelector('#osano-cm-drawer-toggle--category_MARKETING--description');
const personalizationDescription = document.querySelector('#osano-cm-drawer-toggle--category_PERSONALIZATION--description');
const analyticsDescription = document.querySelector('#osano-cm-drawer-toggle--category_ANALYTICS--description');
const optOutDescription = document.querySelector('#osano-cm-drawer-toggle--category_OPT_OUT--description');
if (essentialDescription && marketingDescription && personalizationDescription && analyticsDescription && optOutDescription) {
essentialDescription.textContent = 'This is an example of custom description text for Great Britain users only. Feel free to replace this with your own legal or marketing language.';
marketingDescription.textContent = 'This is an example of custom description text for Great Britain users only. Feel free to replace this with your own legal or marketing language.';
personalizationDescription.textContent = 'This is an example of custom description text for Great Britain users only. Feel free to replace this with your own legal or marketing language.';
analyticsDescription.textContent = 'This is an example of custom description text for Great Britain users only. Feel free to replace this with your own legal or marketing language.';
optOutDescription.textContent = 'This is an example of custom description text for Great Britain users only. Feel free to replace this with your own legal or marketing language.';
obs.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
});
</script>
To target users NOT in the US, use !window.Osano?.cm?.jurisdiction?.startsWith('us-') instead of the startsWith check.
<script>
window.Osano?.cm?.addEventListener('osano-cm-initialized', () => {
if (!window.Osano?.cm?.jurisdiction?.startsWith('us-')) {
const observer = new MutationObserver((mutations, obs) => {
if (window.Osano?.cm?.locale !== 'en') {
return;
}
const essentialDescription = document.querySelector('#osano-cm-drawer-toggle--category_ESSENTIAL--description');
const marketingDescription = document.querySelector('#osano-cm-drawer-toggle--category_MARKETING--description');
const personalizationDescription = document.querySelector('#osano-cm-drawer-toggle--category_PERSONALIZATION--description');
const analyticsDescription = document.querySelector('#osano-cm-drawer-toggle--category_ANALYTICS--description');
const optOutDescription = document.querySelector('#osano-cm-drawer-toggle--category_OPT_OUT--description');
if (essentialDescription && marketingDescription && personalizationDescription && analyticsDescription && optOutDescription) {
essentialDescription.textContent = 'This is an example of custom description text for non-US users only. Feel free to replace this with your own legal or marketing language.';
marketingDescription.textContent = 'This is an example of custom description text for non-US users only. Feel free to replace this with your own legal or marketing language.';
personalizationDescription.textContent = 'This is an example of custom description text for non-US users only. Feel free to replace this with your own legal or marketing language.';
analyticsDescription.textContent = 'This is an example of custom description text for non-US users only. Feel free to replace this with your own legal or marketing language.';
optOutDescription.textContent = 'This is an example of custom description text for non-US users only. Feel free to replace this with your own legal or marketing language.';
obs.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
});
</script>
To target multiple regions, use ['us-ca','us-tx','gb-eng'].includes(window.Osano?.cm?.jurisdiction) instead of the startsWith check.
<script>
window.Osano?.cm?.addEventListener('osano-cm-initialized', () => {
if (['us-ca', 'us-tx', 'gb-eng'].includes(window.Osano?.cm?.jurisdiction)) {
const observer = new MutationObserver((mutations, obs) => {
if (window.Osano?.cm?.locale !== 'en') {
return;
}
const essentialDescription = document.querySelector('#osano-cm-drawer-toggle--category_ESSENTIAL--description');
const marketingDescription = document.querySelector('#osano-cm-drawer-toggle--category_MARKETING--description');
const personalizationDescription = document.querySelector('#osano-cm-drawer-toggle--category_PERSONALIZATION--description');
const analyticsDescription = document.querySelector('#osano-cm-drawer-toggle--category_ANALYTICS--description');
const optOutDescription = document.querySelector('#osano-cm-drawer-toggle--category_OPT_OUT--description');
if (essentialDescription && marketingDescription && personalizationDescription && analyticsDescription && optOutDescription) {
essentialDescription.textContent = 'This is an example of custom description text for multiple regions. Feel free to replace this with your own legal or marketing language.';
marketingDescription.textContent = 'This is an example of custom description text for multiple regions. Feel free to replace this with your own legal or marketing language.';
personalizationDescription.textContent = 'This is an example of custom description text for multiple regions. Feel free to replace this with your own legal or marketing language.';
analyticsDescription.textContent = 'This is an example of custom description text for multiple regions. Feel free to replace this with your own legal or marketing language.';
optOutDescription.textContent = 'This is an example of custom description text for multiple regions. Feel free to replace this with your own legal or marketing language.';
obs.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}
});
</script>
Best Practices
When implementing custom consent text replacement, consider these important guidelines:
- Legal Compliance: Ensure your custom text complies with applicable privacy laws (GDPR, CCPA, etc.)
- Clear Communication: Use clear, user-friendly language that explains what each category does
- Consistency: Maintain consistent terminology across your website and consent interface
- Testing: Test your implementation across different browsers, devices, and jurisdictions
- Performance: The script uses MutationObserver efficiently to avoid performance issues
- Fallbacks: The script includes proper error handling and fallbacks
- Documentation: Keep your customization code well-documented for future maintenance
- Updates: Regularly review and update your custom text as your privacy practices evolve