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:

Adding a third button to your cookie banner with the Upod logo
Loading the Upod client library
Handling the button click to trigger login
Handling the OIDC callback after login
Fetching user profile data after authentication

Step 1: Add the Upod Button

Add a third button to your cookie consent banner. The button should include the Upod logo from our server:

<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>
            <button id="upod-button" class="upod-button">
                <img
                    src="https://account.upod.eu/static/logo.svg?variant=dark"
                    alt="Upod"
                />
                Log in with Upod
            </button>
        </div>
    </div>
</div>

For light backgrounds, use variant=dark. For dark backgrounds, use variant=light.

Step 2: Load the Client Library

Include the Upod client library in your page:

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

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',
});

Step 4: Handle Button Click

When the user clicks the Upod button, trigger the login flow:

document.getElementById('upod-button').addEventListener('click', () => {
    // Hide the cookie banner
    hideCookieBanner();

    // Trigger Upod login
    client.login();
});

Step 5: 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) {
            // User successfully logged in with Upod
            loadPersonalizedContent();
        }
    });
});

Step 6: 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' })
        .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;
            }

            .upod-button {
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .upod-button img {
                height: 21px;
                width: 23px;
            }
        </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>
                    <button id="upod-button" class="upod-button">
                        <img
                            src="https://account.upod.eu/static/logo.svg?variant=dark"
                            alt="Upod"
                        />
                        Log in with Upod
                    </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,
                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
                });

            document
                .getElementById('upod-button')
                .addEventListener('click', () => {
                    hideCookieBanner();
                    client.login();
                });

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

            // 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>

Logo URL

The Upod logo 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.

Future: Button Component

In a future update, we'll provide a ready-to-use button component that you can import directly. For now, use the logo URL and implement the button as shown above.

Benefits

✅ Simple integration - just add a 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