Cookie Banner Integration

This integration allows you to add Upod as a third button in your existing cookie consent banner. Users can choose to log in with Upod instead of accepting cookies or paying for privacy. This approach keeps the implementation simple for your team.

When to Use This

You already have a cookie consent banner
You want to offer Upod as an alternative to cookies
You prefer a simple button integration over a full widget

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 an existing cookie consent banner implementation

Implementation Overview

The integration requires:

Loading the Upod client library
Adding the Upod login button to your cookie banner
Initializing the Upod client
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>

Add a button to your cookie consent banner to login with Upod. For this, we provide a ready-to-use button that you can simply include in your banner:

<upod-button language="en" />

An example implementation of the button in your cookie consent banner could look like this:

<div class="cookie-banner">
    <div class="cookie-banner-content">
        <p>
            We use cookies to personalize your experience. Choose how you want
            to proceed:
        </p>
        <div class="cookie-banner-buttons">
            <button id="accept-cookies">Accept Cookies</button>
            <button id="pay-for-privacy">Pay for Privacy</button>

            <!-- Use the provided Upod button as a third option -->
            <upod-button language="en" />
        </div>
    </div>
</div>

To change the language of the button, use the language option. Currently supported languages are English (en, the default) and Dutch (nl):

<!-- English (default) -->
<upod-button language="en" />

<!-- Dutch -->
<upod-button language="nl" />

The icon of the button can be changed using the variant option. For light backgrounds, use variant="dark" (this is the default variant). For dark backgrounds, use variant="light":

<!-- For light backgrounds (default) -->
<upod-button variant="dark" />

<!-- For dark backgrounds -->
<upod-button variant="light" />

Step 3: Initialize the Client

Initialize the Upod client:

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,
    widget: true,
    language: 'en', // 'en' or 'nl'
});

Step 4: Handle OIDC Callback

After the user logs in, they'll be redirected back to your site. Handle the callback:

client.handleCallbackIfNeeded().then(() => {
    client.isAuthenticated().then(loggedIn => {
        if (loggedIn) {
            // Hide the cookie banner
            hideCookieBanner();

            // User successfully logged in with Upod
            loadPersonalizedContent();
        }
    });
});

Step 5: Fetch User Profile Data

Once authenticated, fetch the user's anonymized profile data:

client.onLogin(() => {
    // Fetch user profile
    client
        .fetch({
            path: '/storage/profile',
            method: 'get',
            query: { purpose: 'personalisation' },
        })
        .then(profile => {
            console.log('User profile:', profile);
            // Use profile data to personalize content
            // profile.gender, profile.ageRange, profile.residence
        })
        .catch(error => {
            console.error('Failed to fetch profile:', error);
        });
});

Complete Example

Here's a complete example based on our cookie consent example:

<!DOCTYPE html>
<html>
    <head>
        <title>My Website with Cookie Banner</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;
            }

            .cookie-banner-buttons {
                display: flex;
                gap: 1rem;
                margin-top: 1rem;
            }
        </style>
    </head>
    <body>
        <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. Choose how
                    you want to proceed:
                </p>
                <div class="cookie-banner-buttons">
                    <button id="accept-cookies">✅ Accept Cookies</button>
                    <button id="pay-for-privacy">💰 Pay for Privacy</button>
                    <upod-button language="en" />
                </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,
                widget: true,
                language: 'en',
            });

            // Handle cookie banner buttons
            document
                .getElementById('accept-cookies')
                .addEventListener('click', () => {
                    hideCookieBanner();
                    // Your existing cookie acceptance logic
                });

            document
                .getElementById('pay-for-privacy')
                .addEventListener('click', () => {
                    hideCookieBanner();
                    // Your existing payment flow
                });

            function hideCookieBanner() {
                document.getElementById('cookie-banner').style.display = 'none';
            }

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

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

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

Logo URL

The Upod logo used for the <upod-button /> can be used separately and is available at:

Dark variant: https://account.upod.eu/static/logo.svg?variant=dark
Light variant: https://account.upod.eu/static/logo.svg?variant=light

Use the dark variant for light backgrounds, and the light variant for dark backgrounds.

Benefits

✅ Simple integration - just add our ready-to-use button
✅ Works with existing cookie banners
✅ Minimal code changes required
✅ Users redirected back after login

Next Steps

Contact us to register your OIDC client
See our live cookie consent example
Review the anonymized profile data documentation to understand available user data

Cookie Banner Integration

On this page