On Site Widget (OSW)

Display tournaments on your site with a single script tag. The Unibo Widget is a self contained JavaScript file with zero dependencies.

Unibo OSW currently only works for logged in players at your Casino.

Prerequisites

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

Quick Start

Set player cookies
Add a custom styled button to open the widget
Load the widge

<!-- 1. Set player cookies -->
<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>

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

<!-- 3. Load the widget -->
<script src="https://<brand-name>.widgets.unibo.io/on-site/widget.js"></script>

That’s it. The widget auto initialises, finds your button, and handles everything else.

Authentication

Casino sets 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 the language and currency displayed in the widget.

unibo_currency is only required for platforms with a multi-currency setup where a player can have more than one account currency.

Cookie	Required	Default	Example
`unibo_language`	No	en	de
`unibo_currency`	Multi-currency setup	Player registered currency	EUR

Button Integration

Use your own button with your own styling. Add an id following this pattern:

id="unibo-osw-custom-{number}"

The widget finds your button and attaches a click handler automatically. Your existing styles and click handlers are preserved.

Single button

<button id="unibo-osw-custom-1" class="your-button-class">
  Tournaments
</button>

Multiple buttons (e.g. header and footer)

<!-- Header -->
<button id="unibo-osw-custom-1" class="header-btn">Tournaments</button>

<!-- Sidebar -->
<a href="#" id="unibo-osw-custom-2" class="sidebar-link">View Promotions</a>

<!-- Footer -->
<button id="unibo-osw-custom-3" class="footer-btn">Campaigns</button>

Works with any HTML element

<!-- Button -->
<button id="unibo-osw-custom-1">Open</button>

<!-- Div -->
<div id="unibo-osw-custom-3" role="button">Click here</div>

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-osw-custom-1" 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/on-site/widget.js"></script>
</body>
</html>

Example (React)

UniboWidget.jsx

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

const WIDGET_SCRIPT_URL = 'https://<brand-name>.widgets.unibo.io/on-site/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-osw-custom-1"
        className="nav-btn"
        type="button"
      >
        Tournaments
      </button>
    </nav>
  );
}

Support

Contact your Unibo Partner Manager or the Integration Team for help with your setup.

Was this helpful?