Cookie Decline Overlay

When users decline cookies in your cookie consent banner, you can show an overlay suggesting they try Upod as an alternative. This approach helps users discover Upod as a privacy-friendly option after they've already expressed a preference for privacy.

When to Use This

You want to offer Upod as an alternative after cookie decline
You want to maximize privacy-conscious user engagement
You have a cookie consent banner with a decline option
You want to provide a clear path forward for users who decline cookies

Prerequisites

Before starting, you need to:

Register as a new OIDC client - You must register your application as a new OIDC client by contacting us via email. We'll register your client_id and redirect_uri(s) for you.
Have a cookie consent banner with a decline/reject option

Implementation Overview

The integration requires:

Loading the Upod client library
Initializing the client with the overlay enabled
Detecting when a user declines cookies
Calling a method to show the overlay
Handling the OIDC callback after login
Fetching user profile data after authentication

Step 1: Load the Client Library

Include the Upod client library in your page:

<script src="https://cdn.upod.eu/client/bundle.browser.js"></script>

Step 2: Initialize the Client

Initialize the Upod client with the cookie decline overlay enabled:

const client = upod.initialize({
    authority: 'https://account.upod.eu',
    client_id: 'your-client-id', // Obtained by contacting us
    redirect_uri: location.origin + location.pathname,
    post_logout_redirect_uri: location.origin + location.pathname,
    showCookieDeclineOverlay: true, // Enable the overlay
    language: 'en',
});

When the user declines cookies, call the method to show the overlay:

function handleCookieDecline() {
    // Hide the cookie banner
    hideCookieBanner();

    // Show the Upod overlay
    client.showCookieDeclineOverlay();
}

// In your cookie banner decline button handler:
document.getElementById('decline-cookies').addEventListener('click', () => {
    handleCookieDecline();
});

The overlay is handled automatically by the client library. When the user clicks "Try Upod" in the overlay, they'll be redirected to login. When they click "No thanks", the overlay will be dismissed automatically.

Step 4: Handle OIDC Callback

After login, handle the callback and fetch user data:

client.handleCallbackIfNeeded().then(() => {
    client.isAuthenticated().then(loggedIn => {
        if (loggedIn) {
            // User successfully logged in with Upod
            loadPersonalizedContent();
        }
    });
});

// Listen for login events
client.onLogin(() => {
    loadPersonalizedContent();
});

function loadPersonalizedContent() {
    client
        .fetch({ path: '/storage/profile', method: 'get' })
        .then(profile => {
            console.log('User profile:', profile);
            // Personalize content based on profile
            // profile.gender, profile.ageRange, profile.residence
        })
        .catch(error => {
            console.error('Failed to fetch profile:', error);
        });
}

Complete Example

<!DOCTYPE html>
<html>
    <head>
        <title>My Website with Cookie Decline Overlay</title>
        <script src="https://cdn.upod.eu/client/bundle.browser.js"></script>
        <style>
            .cookie-banner {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background: white;
                padding: 2rem;
                box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
                z-index: 1000;
            }
        </style>
    </head>
    <body>
        <!-- Cookie Banner -->
        <div class="cookie-banner" id="cookie-banner">
            <div class="cookie-banner-content">
                <h2>🍪 We use cookies</h2>
                <p>We use cookies to personalize your experience.</p>
                <div class="cookie-banner-buttons">
                    <button id="accept-cookies">Accept Cookies</button>
                    <button id="decline-cookies">Decline Cookies</button>
                </div>
            </div>
        </div>

        <script>
            const client = upod.initialize({
                authority: 'https://account.upod.eu',
                client_id: 'your-client-id', // Obtained by contacting us
                redirect_uri: location.origin + location.pathname,
                post_logout_redirect_uri: location.origin + location.pathname,
                showCookieDeclineOverlay: true,
                language: 'en',
            });

            // Cookie banner handlers
            document
                .getElementById('accept-cookies')
                .addEventListener('click', () => {
                    document.getElementById('cookie-banner').style.display =
                        'none';
                    // Your cookie acceptance logic
                });

            document
                .getElementById('decline-cookies')
                .addEventListener('click', () => {
                    document.getElementById('cookie-banner').style.display =
                        'none';
                    // Show Upod overlay
                    client.showCookieDeclineOverlay();
                });

            // Handle OIDC callback
            client.handleCallbackIfNeeded().then(() => {
                client.isAuthenticated().then(loggedIn => {
                    if (loggedIn) {
                        loadPersonalizedContent();
                    }
                });
            });

            // Listen for login
            client.onLogin(() => {
                loadPersonalizedContent();
            });

            function loadPersonalizedContent() {
                client
                    .fetch({ path: '/storage/profile', method: 'get' })
                    .then(profile => {
                        console.log('Personalizing content for:', profile);
                        // Personalize your content here
                    });
            }
        </script>
    </body>
</html>

User Flow

User sees cookie consent banner
User clicks "Decline Cookies"
Cookie banner disappears
Upod overlay appears with suggestion (handled automatically by client library)
User can either:
- Click "Try Upod" → Redirected to login → Returns to site → Gets personalized content
- Click "No thanks" → Overlay closes → User gets non-personalized experience

Benefits

✅ Targets privacy-conscious users
✅ Provides clear alternative after cookie decline
✅ Non-intrusive (only shows after user declines)
✅ Simple implementation - just one method call
✅ Overlay UI handled automatically
✅ Users redirected back after login

Next Steps

Contact us to register your OIDC client
Enable the overlay in your cookie consent flow
Test the user journey from cookie decline to Upod login
Review the anonymized profile data documentation to understand available user data

Note: This integration path is still being implemented. The documentation above shows the intended implementation pattern.

Cookie Decline Overlay

On this page