Your Company

Getting Started

Quick start guide to integrate Upod into your website

This guide will help you get started with Upod in just a few minutes. We'll cover the basics and help you choose the right integration path.

Prerequisites

Before you begin, you'll need:

  1. A website or web application where you want to integrate Upod
  2. Contact us via email to register your application as an OIDC client
  3. Basic knowledge of JavaScript/HTML (helpful but not required)

Step 1: Register Your Application

Important: Before you can integrate Upod, you must register your application as a new OIDC client. This can be done by contacting us via email.

  1. Contact us via email to request OIDC client registration
  2. Provide us with:
    • Your website URL(s)
    • The redirect URI(s) where users will return after login
  3. We'll register your client_id and redirect_uri(s)
  4. You'll receive your client_id which you'll use in your integration

Step 2: Choose Your Integration Path

Upod offers multiple integration approaches. Choose the one that best fits your needs:

What You Get

All integration paths result in:

  • Authenticated users - Users can log in securely via Upod
  • Anonymized user data - Access to user profile data (gender, age range, residence) without personal identifiers
  • Privacy-first - No cookies required, user data is anonymized and stored securely

Quick Start Example

Here's a minimal example to get you started:

Install the Client Library

Include the Upod client library in your HTML:

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

Initialize Upod

Initialize the client with your credentials:

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

Handle Authentication

Handle the OIDC callback and check authentication status:

client.handleCallbackIfNeeded().then(() => {
    client.isAuthenticated().then(loggedIn => {
        if (loggedIn) {
            // User is logged in
            loadPersonalizedContent();
        } else {
            // User is not logged in
            loadGenericContent();
        }
    });
});

Fetch User Profile Data

Once authenticated, fetch anonymized user profile data:

client.onLogin(() => {
    client.fetch({ path: '/storage/profile', method: 'get' }).then(profile => {
        console.log('Gender:', profile.gender);
        console.log('Age Range:', profile.ageRange);
        console.log('Residence:', profile.residence);

        // Use profile data to personalize content
    });
});

Next Steps

  1. Choose an integration path from the options above
  2. Follow the specific integration guide for your chosen path
  3. Review the API Reference to understand data formats and available methods
  4. Test your integration using our live examples

Need Help?

  • Review the API Reference for detailed information
  • Check out our live examples
  • Contact us if you need assistance with your integration