5 minute read

Configuration options (Advanced)

The Consent Manager installation wizard generates a complete configuration for you. This page is the full reference for editing it by hand.

All options live inside the single silktideConsentManager.init({...}) call:

<script>
  window.silktideConsentManager.init({
    // insert config options here
  });
</script>

See Google Consent Mode for the recommended setup — loading the script from your site’s <head> and placing the init() call in a Google Tag Manager Custom HTML tag.

UI options

prompt

Configure the initial consent prompt:

prompt: {
  position: 'bottomRight' // 'center' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'
}

icon

Configure the icon that appears after the user makes their initial choice:

icon: {
  position: 'bottomLeft' // 'bottomLeft' | 'bottomRight'
}

backdrop

Shows or hides the background behind the Consent Manager. When enabled, the backdrop prevents interaction with the rest of the page while the prompt or preferences modal is open. The opacity and blur can be tuned with the --backdropBackgroundColor and --backdropBackgroundBlur CSS variables (see Styling).

backdrop: {
  show: true // Show a backdrop behind the consent prompt (default: false)
}

An array of consent type objects. Each object may include:

  • id (string, required): unique identifier for the consent type. Used as the localStorage key suffix — e.g. id: 'analytics' stores under stcm.consent.analytics.
  • label (string, required): display name shown to users.
  • description (string, required): description shown in the preferences modal. We recommend wrapping your descriptions in <p> tags — if you’ve used the install page to generate your config this is handled automatically.
  • required (boolean): whether this consent type is mandatory and cannot be rejected by the user (default: false).
  • defaultValue (boolean): default state when the user hasn’t made a choice (default: false).
  • gtag (string or array): Google consent parameter(s) to update automatically. See Google Tag Manager integration.
  • scripts (array): scripts to inject when consent is granted. See Script injection.
  • onAccept (function): callback triggered when consent is granted.
  • onReject (function): callback triggered when consent is rejected.
consentTypes: [
  {
    id: 'essential',
    label: 'Essential',
    description: '<p>These are necessary for the website to function and cannot be switched off.</p>',
    required: true,
  },
  {
    id: 'analytics',
    label: 'Analytics',
    description: '<p>These help us understand how visitors interact with the website.</p>',
    defaultValue: true,
    gtag: 'analytics_storage', // Automatic Google Tag Manager / Silktide Analytics integration
  },
  {
    id: 'marketing',
    label: 'Marketing',
    description: '<p>These are used to deliver personalized advertisements.</p>',
    defaultValue: false,
    gtag: ['ad_storage', 'ad_user_data', 'ad_personalization'],
    onAccept: function() {
      console.log('Marketing accepted');
    },
    onReject: function() {
      console.log('Marketing rejected');
    },
  },
]

text

Customize the wording used throughout the Consent Manager: titles, descriptions, button text and accessible labels.

For prompt.description and preferences.description, we recommend wrapping the value in <p> tags. If you’ve used the install page to generate your config this is handled automatically.

text: {
  prompt: {
    description: '<p>We use cookies to enhance your experience.</p>',
    acceptAllButtonText: 'Accept all',
    acceptAllButtonAccessibleLabel: 'Accept all cookies',
    rejectNonEssentialButtonText: 'Reject non-essential',
    rejectNonEssentialButtonAccessibleLabel: 'Reject all non-essential cookies',
    preferencesButtonText: 'Preferences',
    preferencesButtonAccessibleLabel: 'Manage cookie preferences',
  },
  preferences: {
    title: 'Customize your preferences',
    description: '<p>Choose which cookies you want to accept.</p>',
    saveButtonText: 'Save and close',
    saveButtonAccessibleLabel: 'Save your cookie preferences',
    creditLinkText: 'Get this consent manager for free',
    creditLinkAccessibleLabel: 'Visit Silktide Consent Manager',
  },
}

eventName

The Consent Manager pushes a single custom event to the GTM dataLayer whenever consent changes. By default this event is named stcm_consent_update; override it if you need a custom name (for example, to namespace events when running multiple analytics tools).

eventName: 'my_custom_consent_event' // default: 'stcm_consent_update'

Other options

  • autoShow (boolean): whether to automatically show the prompt on first visit (default: true).
  • namespace (string): namespace for localStorage keys. Useful if you’re running more than one Consent Manager instance on the same domain.
  • debug (boolean): when true, logs helpful messages to the browser console for consent updates and GTM events. Useful while building or troubleshooting (default: false).

Lifecycle callbacks

Top-level callbacks fired by the Consent Manager. (Per-consent-type onAccept / onReject are documented under consentTypes.)

  • onAcceptAll (function): called when the user accepts all consent types.
  • onRejectAll (function): called when the user rejects all non-essential consent types.
  • onPromptOpen (function): called when the consent prompt is shown.
  • onPromptClose (function): called when the consent prompt is closed.
  • onPreferencesOpen (function): called when the preferences modal is opened.
  • onPreferencesClose (function): called when the preferences modal is closed.
  • onBackdropOpen (function): called when the backdrop is shown.
  • onBackdropClose (function): called when the backdrop is hidden.

Script injection

Automatically load third-party scripts when consent is granted. Each script in the array is injected once when consent is accepted.

Note: if the user later revokes consent, the page automatically reloads — this ensures any scripts already running are torn down cleanly.

{
  id: 'analytics',
  label: 'Analytics',
  description: 'Google Analytics tracking',
  scripts: [
    {
      url: 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID',
      load: 'async',          // 'async' | 'defer' | omit for default
      type: 'text/javascript',
      crossorigin: 'anonymous',
      integrity: 'sha384-...' // optional SRI hash
    }
  ],
  onAccept: function() {
    // Initialize analytics
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'GA_MEASUREMENT_ID');
  }
}

Google Tag Manager integration

The Consent Manager integrates with Google Tag Manager in two automatic ways.

1. Consent Mode updates. When consent changes, the Consent Manager calls gtag('consent', 'update', {...}) for any consent types that have a gtag property. gtag can be a single string or an array of strings:

{
  id: 'analytics',
  label: 'Analytics',
  description: 'Analytics tracking',
  gtag: 'analytics_storage', // single parameter
},
{
  id: 'marketing',
  label: 'Marketing',
  description: 'Advertising and marketing',
  gtag: ['ad_storage', 'ad_user_data', 'ad_personalization'], // multiple parameters
}

2. Custom dataLayer event. A single event (stcm_consent_update by default, or whatever you’ve set as eventName) is pushed to window.dataLayer whenever:

  • the user accepts or rejects consent from the initial prompt.
  • the user changes and saves preferences in the modal.
  • the page loads with previously granted consents.

See Google Consent Mode for the full GTM trigger and tag setup.

API methods

init(config) — Initialize the Consent Manager with a configuration object:

window.silktideConsentManager.init({
  consentTypes: [/* ... */],
  // ... other options
});

update(partialConfig) — Update the configuration by deep-merging into the existing config. Useful for changing copy at runtime (for example, on a language change):

window.silktideConsentManager.update({
  text: {
    prompt: {
      description: '<p>New description</p>'
    }
  }
});

resetConsent() — Clear all consent choices and re-show the prompt:

window.silktideConsentManager.resetConsent();

getInstance() — Get the underlying instance for advanced inspection:

const manager = window.silktideConsentManager.getInstance();

// Read a specific consent choice
const analyticsConsent = manager.getConsentChoice('analytics'); // true | false | null

// Get all granted consents
const accepted = manager.getAcceptedConsents(); // { essential: true, analytics: true, ... }

Styling

The Consent Manager exposes its appearance via CSS variables on the #stcm-wrapper element. Override them in your own stylesheet, or in a <style> block alongside your GTM init tag (see Google Consent Mode):

#stcm-wrapper {
  --fontFamily: 'Your Font', sans-serif;
  --primaryColor: #533BE2;
  --backgroundColor: #FFFFFF;
  --textColor: #253B48;
  --boxShadow: -5px 5px 10px 0px #00000012, 0px 0px 50px 0px #0000001a;
  --backdropBackgroundColor: #00000077;
  --backdropBackgroundBlur: 5px;
  --iconColor: #533BE2;
  --iconBackgroundColor: #FFFFFF;
}

All CSS classes and IDs use the stcm- prefix to avoid conflicts with your site’s styles.

Back to top