In Game Widget (IGW)

In Game Widget (IGW) for game providers and aggregators to display tournaments with a single script tag. The Unibo Widget is a self contained JavaScript file with zero dependencies.
Note: Unibo IGW currently only works for logged in players.

Prerequisites

  • Unibo provided CDN JavaScript URL e.g., https://<brand-name>.widgets.unibo.io/in-game/widget.js
  • Your site is able to handle JavaScript
  • Your site is able to set user cookies

Quick Start

<!-- 1. Set player cookies -->
<script>
  document.cookie = "unibo_userId=player_123; path=/";
  document.cookie = "unibo_registrationDate=2023-07-30T00:00:00+00:00; path=/";
  document.cookie = "unibo_language=en; path=/";
</script>

<!-- 2. Add a custom styled button to open the widget -->
<button id="unibo-igw-button">Campaigns</button>

<!-- 3. Add the notification layer to your game -->
<div id="unibo-igw-notifications" />

<!-- 4. Load the widget -->
<script src="https://<brand-name>.widgets.unibo.io/in-game/widget.js"></script>
That's it. The widget auto initialises, finds your button, and handles everything else.


Authentication

You have to set two cookies and the widget authenticates automatically with the Unibo services.
Required cookies:
Cookie
Example
Description
unibo_userId
player_123
Your player's unique identifier
unibo_registrationDate
2023-07-30T00:00:00+00:00
Player's registration date
Accepted date formats for unibo_registrationDate
Format
Example
ISO 8601
2023-07-30T00:00:00+00:00
Unix ts (seconds)
1690675200
Unix ts (milliseconds)
1690675200000

Configuration Cookies

Set these cookies to control language and currency display within the widget.
Name
Required
Default
Example
Description
unibo_language
No
en
de
2-letter language code
unibo_currency
Multi-currency setup
Player registered currency
EUR
Currency code for prize display
Note: unibo_currency is only required for platforms with a multi-currency setup where a player can have more than one account currency


Key Components

Unibo In Game Widget consists of two key components.

Button

The button component is where the users will be able to trigger the IGW modal to display their progress, ongoing campaigns and finished.

Notifications

The notification component is where the player will be notified about campaign progress, prize wins, and completions of campaigns.

Button Integration

Use your own button with your own styling. Add an id following this pattern:
id="unibo-igw-button"
The widget finds your button and attaches a click handler automatically. Your existing styles and click handlers are preserved.
<button id="unibo-igw-button" class="your-button-class">
  Campaigns
</button>
Existing click handlers are preserved. If your button already has an onclick, it will still fire alongside the widget open action.


Full Integration Example

Example (HTML/JS)

<!DOCTYPE html>
<html>
<head>
  <title>Example Casino</title>
</head>
<body>
  <nav>
    <button id="unibo-igw-button" class="nav-btn">Tournaments</button>
  </nav>

  <script>
    document.cookie = "unibo_userId=player_123; path=/; Secure; SameSite=Lax";
    document.cookie = "unibo_registrationDate=1690675200; path=/; Secure; SameSite=Lax";
    document.cookie = "unibo_language=en; path=/; Secure; SameSite=Lax";
  </script>

  <script src="https://<brand-name>.widgets.unibo.io/in-game/widget.js"></script>
</body>
</html>

Example (React)

// UniboWidget.jsx
import { useEffect, useRef } from 'react';

const WIDGET_SCRIPT_URL = 'https://<brand-name>.widgets.unibo.io/in-game/widget.js';

function setUniboCookies({ userId, registrationDate, language = 'en', currency = 'EUR' }) {
  const opts = 'path=/; Secure; SameSite=Lax';
  document.cookie = `unibo_userId=${userId}; ${opts}`;
  document.cookie = `unibo_registrationDate=${registrationDate}; ${opts}`;
  document.cookie = `unibo_language=${language}; ${opts}`;
}

export function UniboWidget({ userId, registrationDate, language, currency }) {
  const scriptLoaded = useRef(false);

  useEffect(() => {
    if (!userId || !registrationDate || scriptLoaded.current) return;

    setUniboCookies({ userId, registrationDate, language, currency });

    if (document.querySelector(`script[src="${WIDGET_SCRIPT_URL}"]`)) {
      scriptLoaded.current = true;
      return;
    }

    const script = document.createElement('script');
    script.src = WIDGET_SCRIPT_URL;
    script.async = true;
    document.body.appendChild(script);
    scriptLoaded.current = true;
  }, [userId, registrationDate, language, currency]);

  return null;
}

// Nav.jsx
export function Nav() {
  return (
    <nav>
      <button
        id="unibo-igw-button"
        className="nav-btn"
        type="button"
      >
        Campaigns
      </button>
    </nav>
    <div id="unibo-igw-notifications" />
  );
}


Support

Contact your Unibo account manager or reach out to the integration team for help with your setup.