JavaScript Widget

The GamifyHost JavaScript widget renders the full game experience (game listing, 3 games, leaderboard) inside a Shadow DOM for complete style isolation from your host page.

Installation

Add the widget to any HTML page:

<div id="gamifyhost" style="width:100%;height:80vh;"></div>
<script
  src="https://cdn.gamifyhost.com/widget.js"
  data-public-key="pk_live_your_public_key"
  data-user-id="user_12345"
  data-api-url="https://api.gamifyhost.com"
  data-initial-balance="5000"
></script>

The widget auto-initializes when the script loads. No additional JavaScript is required.

Configuration

All configuration is passed via data-* attributes on the <script> tag:

Attribute	Required	Default	Description
data-public-key	Yes	—	Your GamifyHost public API key
data-user-id	Yes	—	The authenticated user’s ID in your system
data-api-url	No	https://api.gamifyhost.com	GamifyHost API base URL
data-container	No	gamifyhost	ID of the mount container element
data-initial-balance	No	0	Point balance to display before API responds

How It Works

1. The script reads configuration from data-* attributes
2. Finds or creates a container element (id="gamifyhost")
3. Attaches a Shadow DOM for complete CSS isolation
4. Injects bundled CSS and fonts into the shadow root
5. Renders the React app inside the shadow root
6. Fetches the partner theme from the API and applies it dynamically

Shadow DOM Isolation

The widget uses Shadow DOM (mode: "open") to ensure:

• Host CSS cannot affect widget styles — Your site’s .flex { border: red } won’t break the widget
• Widget CSS cannot leak to your page — The widget’s Tailwind classes stay contained
• Fonts load correctly — @font-face rules are injected into both document.head and the shadow root

Theming

The widget automatically fetches your theme configuration from the GamifyHost API. Partners configure theme settings (dark/light mode, primary color as hex) via the dashboard. No data-* attributes are needed for theming.

Container Sizing

The widget fills 100% of its container’s width and height. Control the size by styling the container:

<!-- Full viewport -->
<div id="gamifyhost" style="width:100%;height:100vh;"></div>

<!-- Fixed size -->
<div id="gamifyhost" style="width:800px;height:600px;"></div>

<!-- Responsive -->
<div id="gamifyhost" style="width:100%;height:80vh;max-width:1200px;margin:0 auto;"></div>

Navigation

The widget uses an in-memory router. Page navigation happens internally via React state — no URL changes on the host page. Users can navigate between:

• Game listing (home)
• Neon Wheel
• Cosmic Slots
• Enigma Boxes
• Leaderboard

Example: React Integration

function GameWidget({ userId, publicKey }) {
  return (
    <div
      id="gamifyhost"
      style={{ width: '100%', height: '80vh' }}
      ref={(el) => {
        if (el && !el.shadowRoot) {
          const script = document.createElement('script');
          script.src = 'https://cdn.gamifyhost.com/widget.js';
          script.dataset.publicKey = publicKey;
          script.dataset.userId = userId;
          document.body.appendChild(script);
        }
      }}
    />
  );
}

Example: Vue Integration

<template>
  <div id="gamifyhost" style="width:100%;height:80vh;"></div>
</template>

<script setup>
import { onMounted } from 'vue';

const props = defineProps({
  publicKey: String,
  userId: String,
});

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://cdn.gamifyhost.com/widget.js';
  script.dataset.publicKey = props.publicKey;
  script.dataset.userId = props.userId;
  document.body.appendChild(script);
});
</script>

Bundle Size

The widget bundles React, Tailwind CSS, and all game logic into a single IIFE file. No external dependencies are loaded at runtime (except Google Fonts).

Metric	Size
Raw	~720 KB
Gzipped	~200 KB