The cookie banner wizard will generate the config for you however you can add the config manually using the following config options as a reference.
<script>
silktideCookieBannerManager.updateCookieBannerConfig({
// insert config options here
});
</script>Background
Either true or false.
background: {
showBackground: true,
},Banner
Can be positioned center, bottomLeft, bottomRight or bottomCenter.
position: {
banner: "center"
}Cookie Icon
Can be positioned bottomLeft or bottomRight.
cookieIcon: {
position: "bottomLeft",
},Cookie Types
An array of cookie type objects. You can provide an onAccept and onReject callback function for each cookie type action.
Use these callbacks to run your scripts.
cookieTypes: [
{
id: "necessary",
name: "Necessary cookies",
description: "These cookies are necessary for the website to function properly and cannot be switched off. They help with things like logging in and setting your privacy preferences.",
required: true,
onAccept: function() { console.log('Accepted: Necessary cookies'); },
},
{
id: "performance",
name: "Performance cookies",
description: "These cookies help us improve the site by tracking which pages are most popular and how visitors move around the site.",
defaultValue: true,
onAccept: function() { console.log('Accepted: Performance cookies'); },
onReject: function() { console.log('Rejected: Performance cookies'); },
},
{
id: "functional",
name: "Functional cookies",
description: "These cookies provide extra features and personalization to improve your experience. They may be set by us or by partners whose services we use.",
onAccept: function() { console.log('Accepted: Functional cookies'); },
onReject: function() { console.log('Rejected: Functional cookies'); },
}
],Compliance
complianceLink – URL to your cookie policy page
showRejectButton – true or false
compliance: {
complianceLink: "https://your-website.com/cookie-policy",
showRejectButton: false
},Text
This covers wording used throughout the cookie banner such as headings, description, button labels, link text etc.
text: {
banner: {
description: "We use cookies on our site to enhance your user experience, provide personalized content, and analyze our traffic.",
policyLinkText: "Cookie Policy",
acceptAllButtonText: "Accept all cookies",
rejectOptionalButtonText: "Reject optional cookies",
preferencesLinkText: "Preferences"
},
preferences: {
title: "Customize your cookie preferences",
description: "We respect your right to privacy. You can choose not to allow some types of cookies. Your cookie preferences will apply across our website.",
credit: "Get this banner for free"
}
},Optional Callbacks
We have included callbacks that can be added to the config object that trigger when certain events happen such when interacting with the cookie banner.
These callbacks allow developers to add custom functionality in response to user actions, like showing additional content after consent is given.
Below are examples of the available callbacks:
onBackdropOpen: function() {
console.log('Custom onBackdropOpen callback triggered');
},
onBackdropClose: function() {
console.log('Custom onBackdropClose callback triggered');
},
onPreferencesOpen: function() {
console.log('Custom onPreferencesOpen callback triggered');
},
onPreferencesClose: function() {
console.log('Custom onPreferencesClose callback triggered');
},
onBannerOpen: function() {
console.log('Custom onBannerOpen callback triggered');
},
onBannerClose: function() {
console.log('Custom onBannerClose callback triggered');
},
onAcceptAll: function() {
console.log('Custom onAcceptAll callback triggered');
},
onRejectAll: function() {
console.log('Custom onRejectAll callback triggered');
},