How to add a cookie consent banner in Plasmic

Cookie consent management has become a critical requirement for modern websites due to privacy regulations like GDPR, ePrivacy Directive, CCPA, and Google Ads requirements. These laws require explicit user consent before storing non-essential data like tracking cookies or processing personal information.

While consent banners are legally required, they come with drawbacks including poor user experience, low opt-in rates, inconsistent analytics data, and performance impacts. Before implementing a consent system, consider cookieless analytics as an alternative that eliminates the need for consent banners entirely while still providing valuable insights.

If you need traditional analytics with persistent user tracking, you have two main options for implementing cookie consent:

Option 1: Code integration in your app host

You can implement cookie consent directly in your application code by either building a custom solution or integrating third-party consent management platforms. This approach gives you full control and is required if you need Google-certified CMPs for advertising compliance.

For a custom solution, typically, you would create a code component that you register with Plasmic Studio. This component handles the UI rendering in Studio while all the business logic and backend integration remains in your app host, giving you the best of both worlds.

Option 2: Use Plasmic’s vanilla-cookieconsent component

For most use cases, Plasmic’s built-in solution provides a simpler alternative that’s GDPR-compliant and highly customizable. Under the hood, we use the open-source vanilla-cookieconsent package for cookie management. All features from this package are available and configurable in Plasmic Studio.

Google Ads Requirement: If you plan to serve Google Ads (AdSense, Ad Manager, or AdMob) to users in the EEA, UK, or Switzerland, you must use a Google-certified consent management platform (CMP). Plasmic’s built-in cookie consent component does not meet these certification requirements. See Google’s official CMP requirements and certified provider list for compliant solutions.

  1. Open your Plasmic project in Studio
  2. Go to the Insert panel (+ icon in the left sidebar)
  3. Search for “Cookie Consent” in the components list
  4. Drag and drop the Cookie Consent component onto your page
  5. Select it in the components list to make it visible — it is auto-hidden in the studio by default.

Configuration

Once added, configure the component using the right panel properties:

Basic Settings

  • Consent Mode: Choose “opt-in” (GDPR compliant) or “opt-out” (scripts run by default)
  • Revision: Version number to re-prompt users after policy changes
  • Auto Show: Automatically display banner for new visitors
  • Disable Page Interaction: Block page interaction until consent is given
  • Hide From Bots: Prevent bots/crawlers from indexing modal content
  • Cookie Name: Name of the consent cookie (default: “cc_cookie”)
  • Cookie Domain: Domain for the cookie (auto-detected if empty)
  • Cookie Path: Path for the consent cookie (default: ”/“)
  • Cookie Secure: Enable secure flag for HTTPS connections
  • Cookie Expires After Days: Cookie expiration in days (default: 182)
  • Cookie SameSite: SameSite attribute (“Lax”, “Strict”, or “None”)
  • Use Local Storage: Store consent in localStorage instead of cookies
  • Necessary Category Enabled: Enable necessary cookies (always true)
  • Necessary Category Read Only: Prevent users from disabling necessary cookies
  • Analytics Category Enabled: Enable analytics category by default
  • Analytics Auto Clear Cookies: Comma-separated list of cookies to auto-clear (supports regex)
  • Ads Category Enabled: Enable advertising category by default

Language Settings

  • Default Language: Default language code (default: “en”)
  • Language Auto Detect: Auto-detect from “document” or “browser”
  • RTL Languages: Comma-separated list of right-to-left languages

Configure the Consent Modal object in the right panel to customize the first banner users see:

Layout Options

  • Layout: Choose from “cloud”, “cloud inline”, “box”, or “bar”
  • Position: Select position (“top”, “bottom”, “top left”, “top center”, “top right”, “bottom left”, “bottom center”, “bottom right”)
  • Equal Weight Buttons: Make all buttons the same size
  • Flip Buttons: Reverse the button order

Content Settings

  • Title: Main heading text (default: “We use cookies”)
  • Description: Explanatory text about cookie usage
  • Accept All Button Text: Text for the accept all button
  • Accept Necessary Button Text: Text for the reject all button
  • Show Preferences Button Text: Text for the preferences button
  • Close Icon Label: Label for close button (visible only in box layout)
  • Revision Message: Message shown when revision changes
  • Footer: HTML content for footer links (privacy policy, terms, etc.)

Preferences Modal Configuration

Configure the Preferences Modal object to allow granular consent control:

Layout Options

  • Layout: Choose “box” or “bar” layout
  • Equal Weight Buttons: Make all buttons the same size
  • Flip Buttons: Reverse the button order

Content Settings

  • Title: Modal heading (default: “Manage cookie preferences”)
  • Accept All Button Text: Text for accept all button
  • Accept Necessary Button Text: Text for reject all button
  • Save Preferences Button Text: Text for save button
  • Close Icon Label: Label for close button
  • Service Counter Label: Label format for service counts (e.g., “Service|Services”)

Sections Configuration

Configure the Sections array to define cookie categories and information:

Each section can include:

  • Title: Section heading
  • Description: Explanatory text for the category
  • Linked Category: Connect to a cookie category (“necessary”, “analytics”, “ads”)
  • Cookie Table: Optional table showing specific cookies
    • Caption: Table title
    • Headers: Column headers (name, domain, description)
    • Body: Array of cookie details

Services Configuration

Configure the Services array for granular analytics controls:

Each service includes:

  • Key: Unique identifier (e.g., “ga”, “youtube”)
  • Label: Display name for the service
  • On Accept: Interaction triggered when service is accepted
  • On Reject: Interaction triggered when service is rejected

Styling with design tokens

The cookie consent component uses design tokens for consistent styling. All of them get added to your project automatically when you install the package.

You can override these tokens in your project’s Assets -> Style Tokens panel in the Cookie Consent folders.

Event handlers

Configure these event handlers as interactions to integrate with your analytics or tracking systems:

  • onFirstConsent: Triggered when a user gives consent for the first time

    • cookie: Object containing the user’s consent preferences

  • onConsent: Triggered whenever a user updates their consent preferences

    • cookie: Object containing the updated consent preferences

  • onChange: Triggered when specific consent categories or services change

    • changedCategories: Array of category names that changed
    • changedServices: Object mapping categories to changed services
    • cookie: Object containing the current consent preferences

  • onModalReady: Triggered when a consent modal is ready to be displayed

    • modalName: String indicating which modal is ready (“consentModal” or “preferencesModal”)

  • onModalShow: Triggered when a consent modal is displayed to the user

    • modalName: String indicating which modal was shown

  • onModalHide: Triggered when a consent modal is closed or hidden

    • modalName: String indicating which modal was hidden

Testing your implementation

Before going live, thoroughly test your cookie consent implementation:

  1. Clear browser data and visit your site as a new user
  2. Test all consent flows: Accept all, reject all, custom preferences
  3. Verify cookie behavior: Ensure tracking scripts respect consent choices
  4. Check mobile responsiveness: Test on various screen sizes
  5. Validate compliance: Ensure your implementation meets legal requirements

Is this page helpful?

NoYes