Cookie modal

Show a pre-cookie banner modal that explains Upod and offers signup, login, or manual dismiss

<upod-cookie-modal> is a web component in the Upod browser bundle. Use it to show a full-screen modal before your own cookie banner appears. The modal explains what Upod does, shows a short animation of cookie banners being handled automatically, and gives the user three choices: create an Upod account, log in, or continue without Upod.

The modal does not replace your cookie banner. You still show your banner when the user closes the modal or picks the manual dismiss option.

When to use this

You want a dedicated moment to explain Upod before the user sees your CMP
You need more room than a single <upod-button /> inside a banner
You want signup, login, and "dismiss myself" actions in one place

If you only need a login button inside an existing banner, see Our button in your cookie banner instead.

Prerequisites

A registered OIDC client (client_id and matching redirect_uri)
The Upod browser bundle on the page
upod.initialize(...) called before the user interacts with the modal

Step 1: Load the bundle

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

This registers <upod-cookie-modal> along with the rest of the Upod client.

Place the element once, near the end of <body>. It stays hidden until you call show().

<upod-cookie-modal id="cookie-modal"></upod-cookie-modal>

Set language to "nl" or "en". The default is "en". Pass language="nl" when your site is Dutch.

Step 3: Initialize the client

Initialize Upod on page load. Hide the default floating widget if you do not need it on the same page:

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

The modal uses this client instance when the user clicks Create Upod or Log in with Upod.

Call show() when you want the modal to appear. A typical pattern is to show it on first visit, before your cookie banner:

const cookieModal = document.getElementById('cookie-modal');

function maybeShowUpodModal() {
    if (shouldShowUpodPitch()) {
        cookieModal.show();
        return;
    }
    showYourCookieBanner();
}

document.addEventListener('DOMContentLoaded', maybeShowUpodModal);

show() sets the open attribute, displays the overlay, and starts the preview animation.

To close the modal from your own code:

cookieModal.hide();

The modal emits custom events when the user picks an action. Listen on the element:

cookieModal.addEventListener('upod-cookie-modal-close', () => {
    showYourCookieBanner();
});

cookieModal.addEventListener('upod-cookie-modal-tertiary', () => {
    // User chose to dismiss cookies manually
    showYourCookieBanner();
});

cookieModal.addEventListener('upod-cookie-modal-primary', () => {
    // User clicked "Create Upod". client.register() was already called.
});

cookieModal.addEventListener('upod-cookie-modal-secondary', () => {
    // User clicked "Log in with Upod". client.login() was already called.
});

Event	What happened
`upod-cookie-modal-close`	User clicked the close control. Modal is hidden.
`upod-cookie-modal-primary`	User clicked create account. `client.register()` runs automatically.
`upod-cookie-modal-secondary`	User clicked log in. `client.login()` runs automatically.
`upod-cookie-modal-tertiary`	User chose manual dismiss. Modal is hidden.

Primary and secondary do not hide the modal before redirect. Close and tertiary call hide() for you.

Step 6: Handle the OIDC callback

After signup or login, Upod redirects back to your redirect_uri. Call handleCallbackIfNeeded() on every page load at that URI:

client.handleCallbackIfNeeded().then(() => {
    client.isAuthenticated().then(loggedIn => {
        if (loggedIn) {
            cookieModal.hide();
            // Skip your cookie banner or apply stored consent (see below)
        }
    });
});

client.onLogin(() => {
    cookieModal.hide();
});

Call handleCallbackIfNeeded() on your registered redirect URI. Without it, the user returns from Upod with query params in the URL but no active session.

Once the user is logged in, you can fetch stored cookie preferences instead of showing your banner again. See Handling users' cookie consent.

API summary

Methods

Method	Description
`show()`	Open the modal and start the animation.
`hide()`	Close the modal and stop the animation.

Attributes

Attribute	Type	Description
`open`	boolean	Reflects whether the modal is visible. Set by `show()` and `hide()`.
`language`	`"nl"` \| `"en"`	UI language. Defaults to `"en"`.

CSS customization

The modal uses shadow DOM. Style it through CSS parts on the host element:

upod-cookie-modal::part(overlay) { /* backdrop */ }
upod-cookie-modal::part(modal) { /* dialog panel */ }
upod-cookie-modal::part(close-button) { /* desktop close button */ }
upod-cookie-modal::part(primary-button) { /* create account */ }
upod-cookie-modal::part(secondary-button) { /* log in */ }
upod-cookie-modal::part(tertiary-button) { /* manual dismiss */ }

To change stacking order, set --upod-z-index-cookie-modal on the host or a parent. The default is 2147483646.

Complete example

<!doctype html>
<html lang="en">
    <head>
        <title>My site with Upod cookie modal</title>
        <script src="https://cdn.upod.eu/client/bundle.browser.js"></script>
    </head>
    <body>
        <upod-cookie-modal id="cookie-modal"></upod-cookie-modal>

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

            const cookieModal = document.getElementById('cookie-modal');

            cookieModal.addEventListener('upod-cookie-modal-close', showCookieBanner);
            cookieModal.addEventListener('upod-cookie-modal-tertiary', showCookieBanner);

            function showCookieBanner() {
                // Your CMP or cookie banner logic
            }

            if (shouldShowUpodPitch()) {
                cookieModal.show();
            } else {
                showCookieBanner();
            }

            client.handleCallbackIfNeeded().then(() => {
                client.isAuthenticated().then(loggedIn => {
                    if (loggedIn) cookieModal.hide();
                });
            });

            client.onLogin(() => cookieModal.hide());
        </script>
    </body>
</html>

Next steps

Try the live cookie modal example
Read Handling users' cookie consent to apply stored preferences after login
Browse the API Reference for the full client API

Cookie modal

On this page