Inline Privacy Settings Embed: Native Consent Without Popups

The Modal Fatigue Problem

Users are tired of popups. Cookie banners. Newsletter modals. Chat widgets. Exit-intent overlays. Every website fires multiple interruptions before showing content.

A UX research firm found that 67% of users report "modal fatigue"—automatically closing popups without reading them. Your carefully crafted consent explanation? Dismissed in 0.8 seconds.

But users still need a way to manage their consent. The solution: give them a dedicated place that isn't a popup. Embed settings in your privacy policy page where users expect to manage preferences.

What Is Inline Embed?

Instead of a popup banner, inline embed places consent controls directly in your page content:

Before (Popup Approach):

Your Privacy Policy Page
├── Privacy Policy Text
└── [User clicks "Cookie Settings" link]
    └── Modal popup appears over page

After (Inline Approach):

Your Privacy Policy Page
├── Privacy Policy Text
├── Cookie Settings Section ← Rendered inline
│   ├── Category toggles
│   ├── Cookie details
│   └── Save button
└── More Privacy Policy Text

The settings are part of the page, not overlaid on top.

Why Inline Embedding Works

No Modal Dismissal

Users can't accidentally close inline content. They scroll to it, interact with it, and save when ready.

Context Preservation

Users stay on the page they're reading. No context switch, no back-button confusion.

Style Inheritance

The embed picks up your site's CSS. Buttons look like your buttons. Text looks like your text. It belongs.

Better Accessibility

Screen readers navigate inline content naturally. Modal trapping and focus management complexities disappear.

SEO Friendly

Content is in the DOM. Search engines can index it. Privacy pages rank better when they include actual content.

How It Works

Architecture

┌─────────────────────────────────────────────────┐
│          Your Privacy Policy Page               │
│                                                 │
│   <div id="cmp-settings-embed"></div>           │
│                                                 │
│   <script src="inline-settings-embed.js">       │
│                                                 │
└─────────────────────────────────────────────────┘
                        ↓
                  Script loads
                        ↓
         ┌──────────────┴──────────────┐
         ↓                             ↓
   Fetch config from               Read current
   GetCookies API                  consent state
         ↓                             ↓
         └──────────────┬──────────────┘
                        ↓
              Render settings UI
              (using site's CSS)

No Shadow DOM

Unlike many embeds, this doesn't use Shadow DOM. Your CSS applies directly:

/* Your existing button styles */
.btn-primary {
  background: #0066cc;
  padding: 12px 24px;
  border-radius: 8px;
}

/* The embed's save button automatically inherits this */

No iframes

Content renders directly in your document. No cross-origin complications, no sizing issues, no scrolling-within-scrolling.

Implementation

Basic Setup

Add to your privacy policy page:

<!-- Where you want the settings to appear -->
<h2>Cookie Preferences</h2>
<div id="cmp-settings-embed"></div>

<!-- Load the embed script -->
<script src="https://cdn.getcookies.co/inline-settings-embed.js"></script>

That's it. The embed appears with sensible defaults.

Production Configuration

Connect to your GetCookies configuration:

<script>
  window.CMP_DOMAIN_ID = 'your-domain-id';
</script>
<div id="cmp-settings-embed"></div>
<script src="https://cdn.getcookies.co/inline-settings-embed.js"></script>

This pulls your category definitions, translations, and styling from the dashboard.

Advanced Options

window.CMP_CONFIG = {
  domainId: 'your-domain-id',
  language: 'de',                    // Override auto-detection
  showCookieDetails: true,           // Show individual cookies
  showVendorList: true,              // Show third-party vendors
  onSave: function(consent) {        // Callback after save
    console.log('Consent saved:', consent);
  }
};

Styling Integration

Automatic Inheritance

The embed uses semantic HTML elements:

• <section> for container
• <h3> for category names
• <p> for descriptions
• <button> for actions
• <input type="checkbox"> for toggles

Your existing styles apply automatically.

CSS Customization

Target embed elements specifically:

/* Container */
#cmp-settings-embed {
  margin: 2rem 0;
  padding: 2rem;
  border: 1px solid #e5e5e5;
}

/* Category toggles */
#cmp-settings-embed .cmp-category-toggle {
  /* Your toggle styles */
}

/* Save button */
#cmp-settings-embed .cmp-save-btn {
  /* Override if needed */
}

Brand Alignment

The embed adapts to:

• Font families
• Color schemes
• Spacing systems
• Border radiuses
• Shadow styles

No custom CSS required for basic brand matching.

User Experience

Category Display

Each consent category shows:

• Category name (e.g., "Analytics Cookies")
• Description (e.g., "Help us understand how visitors use our site")
• Toggle switch (on/off)
• Expandable cookie list (optional)

Essential Category

Essential/necessary cookies display differently:

• Toggle disabled (always required)
• Clear explanation why they can't be disabled

Save Behavior

After clicking save:

• Preferences stored locally
• Consent signals updated
• Confirmation message displayed
• Optional callback fired

Integration Patterns

WordPress

<!-- In your Privacy Policy template -->
<div id="cmp-settings-embed"></div>
<script>
  window.CMP_DOMAIN_ID = '<?php echo get_option("getcookies_domain_id"); ?>';
</script>
<script src="https://cdn.getcookies.co/inline-settings-embed.js"></script>

React/Next.js

import { useEffect, useRef } from 'react';

function PrivacySettings() {
  const containerRef = useRef(null);

  useEffect(() => {
    window.CMP_DOMAIN_ID = process.env.NEXT_PUBLIC_GETCOOKIES_ID;
    const script = document.createElement('script');
    script.src = 'https://cdn.getcookies.co/inline-settings-embed.js';
    containerRef.current.appendChild(script);

    return () => {
      // Cleanup if needed
    };
  }, []);

  return (
    <div id="cmp-settings-embed" ref={containerRef} />
  );
}

Vue

<template>
  <div id="cmp-settings-embed"></div>
</template>

<script>
export default {
  mounted() {
    window.CMP_DOMAIN_ID = import.meta.env.VITE_GETCOOKIES_ID;
    const script = document.createElement('script');
    script.src = 'https://cdn.getcookies.co/inline-settings-embed.js';
    this.$el.appendChild(script);
  }
};
</script>

Combining with Popup Banner

The inline embed complements—not replaces—your consent banner:

1. Banner appears on first visit for initial consent
2. Privacy Trigger (floating button) allows reopening
3. Inline Embed provides detailed settings on privacy page

Users get multiple access points:

• Quick decision via banner
• Detailed review via privacy policy page
• Re-access via trigger button

Cookie Details View

Enable detailed cookie information:

window.CMP_CONFIG = {
  domainId: 'your-domain-id',
  showCookieDetails: true
};

This shows:

• Individual cookie names
• Cookie purposes
• Duration/expiration
• Provider information

Helpful for users who want full transparency.

Multi-Language Support

The embed respects language settings:

window.CMP_CONFIG = {
  domainId: 'your-domain-id',
  language: 'de'  // German
};

Or auto-detect:

window.CMP_CONFIG = {
  domainId: 'your-domain-id',
  language: navigator.language.split('-')[0]
};

All 40+ GetCookies languages are supported.

Accessibility

The inline embed is built for accessibility:

• Keyboard navigation: Tab through all controls
• Screen reader support: Proper ARIA labels
• Focus management: Logical focus order
• Color contrast: Meets WCAG AA standards
• Touch targets: Appropriately sized for mobile

Common Use Cases

Privacy Policy Page

The most common placement. Add settings directly to your legal page:

/privacy-policy
├── Introduction
├── What Data We Collect
├── How We Use Your Data
├── Cookie Preferences ← Inline embed here
├── Your Rights
└── Contact Us

Dedicated Settings Page

Create a standalone cookie settings URL:

/cookie-settings
├── Cookie Preferences ← Full-page embed
└── [Footer navigation]

Account Settings

For logged-in users, include privacy preferences in their account:

/account/settings
├── Profile
├── Notifications
├── Privacy Preferences ← Inline embed
└── Security

Getting Started

1. Add the container div to your privacy page
2. Include your domain ID
3. Load the embed script
4. Test the styling integration
5. Verify consent state syncs with banner

The inline embed brings consent settings to where users expect them—inside your content, not on top of it.