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.
Note: 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

<!-- 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-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.
Cookie
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


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
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.