@gomagaming/messenger

Embeddable chat widget for Goma Gaming platforms. Ships as a Web Component (<goma-messenger>) with Shadow DOM isolation — drop it into any frontend framework or vanilla HTML page.

Quick Start

npm install @gomagaming/messenger

Import once to register the custom element:

import '@gomagaming/messenger'

Add the element to your page:

<goma-messenger
  api-url="https://api.example.com"
  socket-url="https://ws.example.com"
  auth-token="<user-jwt>"
  socket-auth-token="<static-socket-token>"
  user-chat-id="<user-id>"
  locale="en"
  position="fixed"
></goma-messenger>

The widget renders a floating chat bubble (fixed mode) or inline panel (inline mode). It bootstraps automatically once auth-token and api-url are set.

Authentication Flow

1. User authenticates with your backend and obtains a JWT.
2. Set auth-token and user-chat-id attributes on the element.
3. The widget connects to Socket.IO and loads conversations.
4. To log out, remove auth-token — the widget disconnects and hides.

Attributes

| Attribute | Required | Description | |-----------|----------|-------------| | api-url | Yes | Base URL for the Goma social API | | socket-url | Yes | Socket.IO server URL | | auth-token | Yes | User JWT — gates widget rendering | | socket-auth-token | Yes | Static token for socket authentication | | user-chat-id | Yes | Current user's ID in the chat system | | locale | No | Language (en, pt, fr, tr, da). Default: en | | position | No | fixed (bubble+panel) or inline. Default: fixed | | theme | No | JSON string of CSS variable overrides | | enable-ticket-sharing | No | Enable bet ticket sharing (true/false) | | username | No | Display name for the current user | | user-avatar | No | Avatar URL for the current user | | user-code | No | Friend code for adding contacts | | font-url | No | Font stylesheet URL. Defaults to Google Fonts Exo 2. Set to none to disable. | | demo | No | Demo mode — bypasses real API/socket and uses scripted mock data |

See the full attribute reference for all options.

Events

Listen for custom events on the element:

const messenger = document.querySelector('goma-messenger')

messenger.addEventListener('gc:message-received', (e) => {
  console.log('New message:', e.detail)
})

messenger.addEventListener('gc:unread-count', (e) => {
  console.log('Unread:', e.detail.count)
})

Available events: gc:connected, gc:disconnected, gc:message-received, gc:message-sent, gc:unread-count, gc:friend-added, gc:open, gc:close, gc:tail-bet, gc:error.

See the full events reference.

Imperative API

The element exposes two methods for host-driven open/close:

const messenger = document.querySelector('goma-messenger')
messenger.open()   // opens the chat panel
messenger.close()  // closes the chat panel

CSS Theming

Override the default dark theme via the theme attribute:

<goma-messenger theme='{"--gc-bg-primary": "#1a1a2e", "--gc-highlight-primary": "#e94560"}'></goma-messenger>

Pre-built theme presets are also exported and can be applied at runtime:

import { exclusivebetTheme, betssonfranceTheme } from '@gomagaming/messenger'

const messenger = document.querySelector('goma-messenger')
messenger.setAttribute('theme', JSON.stringify(exclusivebetTheme))

See the full CSS variables reference.

Documentation

Full documentation is available in the docs/ directory. To run the docs site locally:

npm run docs:dev

This starts a VitePress dev server at http://localhost:5173. The docs cover integration guides, framework-specific examples (React, Vue, Angular), styling, i18n, and the complete API reference.

Development

npm install
npm run dev          # Watch mode build
npm run demo         # Dev server with demo page
npm run test         # Run tests
npm run build        # Production build

License

Proprietary - Goma Gaming