3 minute read

Configuration options (Advanced)

The cookie banner installation wizard will generate the configuration for you.

However you can add it manually using the following config options as a reference.

<script>
  silktideCookieBannerManager.updateCookieBannerConfig({
    // insert config options here
  });
</script>

Background

  • Shows or hides the background on the cookie banner. If enabled the background prevents interaction with your website while the initial banner is displayed or the preferences modal is open. The opacity and blur effect can be modified with CSS.

Either true or false.

background: {
  showBackground: true,
},
  • Can be positioned center, bottomLeft, bottomRight or bottomCenter.
position: {
  banner: "center"
}
  • Can be positioned bottomLeft or bottomRight.
cookieIcon: {
  position: "bottomLeft",
},

An array of cookie type objects. You can provide an onAccept and onReject callback function for each cookie type action.

Use these callback functions to trigger what happens when the user accepts or rejects consent for each cookie type.

The description should contain HTML, we recommend using our installation wizard to generate your config.

cookieTypes: [
  {
    id: "necessary",
    name: "Necessary cookies",
    description: "<p>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.</p>",
    required: true,
    onAccept: function() { console.log('Accepted: Necessary cookies'); },
  },
  {
    id: "performance",
    name: "Performance cookies",
    description: "<p>These cookies help us improve the site by tracking which pages are most popular and how visitors move around the site.</p>",
    defaultValue: true,
    onAccept: function() { console.log('Accepted: Performance cookies'); },
    onReject: function() { console.log('Rejected: Performance cookies'); },
  },
  {
    id: "functional",
    name: "Functional cookies",
    description: "<p>These cookies provide extra features and personalization to improve your experience. They may be set by us or by partners whose services we use.</p>",
    onAccept: function() { console.log('Accepted: Functional cookies'); },
    onReject: function() { console.log('Rejected: Functional cookies'); },
  }
],

Text

This covers wording used throughout the cookie banner such as titles, descriptions, button text and accessible labels etc.

text: {
  banner: {
    description: "<p>We use cookies on our site to enhance your user experience, provide personalized content, and analyze our traffic.</p>",
    acceptAllButtonText: 'Accept all',
    acceptAllButtonAccessibleLabel: 'Accept all cookies',
    rejectNonEssentialButtonText: 'Reject non-essential',
    rejectNonEssentialButtonAccessibleLabel: 'Reject non-essential',
    preferencesButtonText: 'Preferences',
    preferencesButtonAccessibleLabel: 'Toggle preferences',
  },
  preferences: {
    title: "Customize your cookie preferences",
    description: "<p>We respect your right to privacy. You can choose not to allow some types of cookies. Your cookie preferences will apply across our website.</p>",
    creditLinkText: 'Get this banner for free',
    creditLinkAccessibleLabel: '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');
},
Back to top