Our button in your cookie banner

<upod-button> is a custom element that ships with our browser bundle. Drop it anywhere in your existing UI — a cookie banner, a settings page, a header — and clicking it kicks off the Upod login flow. Our client library handles the redirect back from the IdP for you.

When to use this

You want full control over where the login trigger lives in your UI
You don't want to build the login button itself
You're happy to use the Upod client library to handle the OIDC callback

Step 1: Add the script

Include the Upod client bundle so <upod-button> is registered as a custom element:

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

Step 2: Place `<upod-button>` in your UI

<upod-button> is a custom HTML element. Put it wherever you'd put your own login button:

<upod-button />

A common case is a cookie consent banner, where Upod is offered as a third option alongside "accept cookies" and "pay for privacy":

<div class="cookie-banner">
    <p>How would you like to continue?</p>
    <button id="accept-cookies">Accept cookies</button>
    <button id="pay-for-privacy">Pay for privacy</button>
    <upod-button />
</div>

You can match the button to your design with the variant and language attributes:

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

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

<!-- English is the default; pass language for Dutch -->
<upod-button language="nl" />

language accepts "nl" or "en". Defaults to "en".

Step 3: Initialize the client

Initialize the Upod client on page load. The same client_id, redirect_uri, and post_logout_redirect_uri you registered with us:

const client = upod.initialize({
    authority: 'https://account.upod.eu',
    client_id: 'your-client-id',
    redirect_uri: location.origin + location.pathname,
    post_logout_redirect_uri: location.origin + location.pathname,
});

The <upod-button> element automatically wires itself to this client instance, so clicking the button triggers client.login() — no extra event listeners needed.

Step 4: Handle the OIDC callback on the redirect URI

After login, Upod redirects the browser back to your redirect_uri with ?code=…&state=… query parameters. Call client.handleCallbackIfNeeded() on every page load at that URI — it's a no-op when there's nothing to handle, and consumes the code when there is:

client.handleCallbackIfNeeded().then(() => {
    client.isAuthenticated().then(loggedIn => {
        if (loggedIn) {
            hideCookieBanner();
            loadPersonalizedContent();
        } else {
            showCookieBanner();
        }
    });
});

Always call handleCallbackIfNeeded() on the page registered as your redirect_uri — without it, the user lands back on your site with login params in the URL but no active session. It's safe to call on every page load.

You can also react to the login event via client.onLogin(...):

client.onLogin(() => {
    hideCookieBanner();
    loadPersonalizedContent();
});

client.onLogout(() => {
    showCookieBanner();
});

Step 5: Use the profile data

Once authenticated, fetch the anonymized profile and use it for personalisation:

function loadPersonalizedContent() {
    client
        .fetch({
            path: '/storage/profile',
            method: 'get',
            query: { purpose: 'personalisation' },
        })
        .then(profile => {
            // profile.gender, profile.ageRange, profile.residence
            renderArticles(profile);
        });
}

See Purpose values for the list of allowed purpose strings, and the Anonymized profile data reference for the full schema.

Complete example

<!doctype html>
<html>
    <head>
        <title>My site with a cookie banner</title>
        <script src="https://cdn.upod.eu/client/bundle.browser.js"></script>
    </head>
    <body>
        <div class="cookie-banner" id="cookie-banner">
            <p>How would you like to continue?</p>
            <button id="accept-cookies">Accept cookies</button>
            <button id="pay-for-privacy">Pay for privacy</button>
            <upod-button />
        </div>

        <main id="content"></main>

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

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

            function loadPersonalizedContent() {
                client
                    .fetch({
                        path: '/storage/profile',
                        method: 'get',
                        query: { purpose: 'personalisation' },
                    })
                    .then(profile => {
                        document.getElementById('content').textContent =
                            `Personalised for ${profile.gender} in ${profile.residence}`;
                    });
            }

            // Handle the redirect back from Upod
            client.handleCallbackIfNeeded().then(() => {
                client.isAuthenticated().then(loggedIn => {
                    if (loggedIn) {
                        hideCookieBanner();
                        loadPersonalizedContent();
                    }
                });
            });

            client.onLogin(() => {
                hideCookieBanner();
                loadPersonalizedContent();
            });
        </script>
    </body>
</html>

Next steps

See the live cookie consent example
Read the API Reference for client.fetch() and the full client API
Need to drive login from your own auth stack instead? See Your own OIDC library

Our button in your cookie banner

On this page