⚠️ Important Legal Notice: Making these customizations will render Osano's "No Fines, No Penalties" guarantee null and void.
Custom CA Banner Text
This page demonstrates a standard Osano Cookie Consent configuration, except that users in California (CA) will see custom language on the consent banner. All other users see the default Osano banner text. This customization uses the Osano JavaScript API to modify banner content.
To implement this, add the following script immediately after your Osano.js script tag:
<script>
function customizeBanner() {
if (window.Osano?.cm?.jurisdiction === 'us-ca') {
const targetNode = document.body || document.documentElement;
let messageUpdated = false;
const observer = new MutationObserver((mutations, obs) => {
const message = document.querySelector('.osano-cm-content__message.osano-cm-message');
if (message && !messageUpdated) {
message.textContent = 'Your custom banner message here';
messageUpdated = true;
setTimeout(() => obs.disconnect(), 1500);
}
});
observer.observe(targetNode, { childList: true, subtree: true });
}
}
if (window.Osano?.cm?.jurisdiction) {
customizeBanner();
} else {
window.Osano?.cm?.addEventListener?.('osano-cm-initialized', customizeBanner);
document.addEventListener('DOMContentLoaded', customizeBanner, { once: true });
}
</script>
⚠️ Implementation Note: The JavaScript script must be loaded after the Osano script tag to ensure Osano is available when the script runs. This customization only affects California users and leaves all other users with the default banner experience. The script includes safeguards to handle cases where Osano may initialize before or after the script loads.
⚠️ Important: This customization uses a MutationObserver to detect when the banner message appears and then modifies the text. The observer automatically disconnects after making the change to prevent unnecessary processing.
Additional Jurisdiction Targeting Examples
To target a different region, replace 'us-ca' with the desired jurisdiction code (e.g., 'us-tx' for Texas).
Here's the editable version for Texas targeting:
<script>
function customizeBanner() {
if (window.Osano?.cm?.jurisdiction === 'us-tx') {
const targetNode = document.body || document.documentElement;
let messageUpdated = false;
const observer = new MutationObserver((mutations, obs) => {
const message = document.querySelector('.osano-cm-content__message.osano-cm-message');
if (message && !messageUpdated) {
message.textContent = 'This is an example of custom jurisdiction-based text for Texas users only. Feel free to replace this with your own legal or marketing language.';
messageUpdated = true;
setTimeout(() => obs.disconnect(), 1500);
}
});
observer.observe(targetNode, { childList: true, subtree: true });
}
}
if (window.Osano?.cm?.jurisdiction) {
customizeBanner();
} else {
window.Osano?.cm?.addEventListener?.('osano-cm-initialized', customizeBanner);
document.addEventListener('DOMContentLoaded', customizeBanner, { once: true });
}
</script>
Note: Replace 'us-tx' with your desired jurisdiction code and update the message text as needed.
To target multiple regions, use ['us-ca','us-tx','us-ny'].includes(window.Osano?.cm?.jurisdiction) instead of the single region check.
Here's the editable version for multiple state targeting:
<script>
function customizeBanner() {
if (['us-ca', 'us-tx', 'us-ny'].includes(window.Osano?.cm?.jurisdiction)) {
const targetNode = document.body || document.documentElement;
let messageUpdated = false;
const observer = new MutationObserver((mutations, obs) => {
const message = document.querySelector('.osano-cm-content__message.osano-cm-message');
if (message && !messageUpdated) {
message.textContent = 'This is an example of custom jurisdiction-based text for multiple states. Feel free to replace this with your own legal or marketing language.';
messageUpdated = true;
setTimeout(() => obs.disconnect(), 1500);
}
});
observer.observe(targetNode, { childList: true, subtree: true });
}
}
if (window.Osano?.cm?.jurisdiction) {
customizeBanner();
} else {
window.Osano?.cm?.addEventListener?.('osano-cm-initialized', customizeBanner);
document.addEventListener('DOMContentLoaded', customizeBanner, { once: true });
}
</script>
Note: Modify the array ['us-ca', 'us-tx', 'us-ny'] to include your desired jurisdictions and update the message text.
To target an entire country (using US as an example), use window.Osano?.cm?.jurisdiction?.startsWith('us-') instead of the single region check.
Here's the editable version for entire US targeting:
<script>
function customizeBanner() {
if (window.Osano?.cm?.jurisdiction?.startsWith('us-')) {
const targetNode = document.body || document.documentElement;
let messageUpdated = false;
const observer = new MutationObserver((mutations, obs) => {
const message = document.querySelector('.osano-cm-content__message.osano-cm-message');
if (message && !messageUpdated) {
message.textContent = 'This is an example of custom jurisdiction-based text for all US users. Feel free to replace this with your own legal or marketing language.';
messageUpdated = true;
setTimeout(() => obs.disconnect(), 1500);
}
});
observer.observe(targetNode, { childList: true, subtree: true });
}
}
if (window.Osano?.cm?.jurisdiction) {
customizeBanner();
} else {
window.Osano?.cm?.addEventListener?.('osano-cm-initialized', customizeBanner);
document.addEventListener('DOMContentLoaded', customizeBanner, { once: true });
}
</script>
Note: Change 'us-' to target different countries (e.g., 'ca-' for Canada) and update the message text as needed.