Skip to main content

ODIN Communicator

ODIN Communicator is a sleek, embeddable voice chat widget for websites. It lets users join a room with a nickname and talk in real-time - without building a custom UI.

Pro tip: Send this URL to your friends and you can directly start a voice chat with them! https://docs.4players.io/voice/web/widgets/odin-communicator/

What it’s good for​

  • “Try ODIN Voice” demo on your product/landing page
  • Community voice hubs (per game / per page / per event)
  • Lightweight party voice on a website

Features​

  • Real-time voice chat (ODIN-powered)
  • Room-based (join by roomId)
  • Modern UI (React + TailwindCSS)
  • Talking indicators / visualizers
  • Simple embed (a single mountOdinCommunicator(...) call)
  • Optional theming (brand colors)

Quickstart (Embed)​

1. Create a container element:​

<!-- Wherever you want the widget to appear on your page -->
<div id="odin-widget-container"></div>

2. Import and mount the widget:​

Please note: The widget is built as a UMD (CJS) module and should therefore work in any environment. Make sure that you place the script tag before the end of the body tag.

<!-- Import the built UMD JS -->
<script src="https://unpkg.com/@4players/odin-communicator@latest"></script>

<script>
    // Mount the widget using the global variable
    // Note: The named export 'mountOdinCommunicator' should be available on the global object
    window.OdinCommunicator.mountOdinCommunicator('app', {
        roomId: 'hello',
        apiKey: 'akR4OU0xV3RYUG9QK1o3UUN4a1BtZz09',
        connectBtnText: 'Connect',
        description: 'Experience next-gen voice chat.',
        title: 'Get in touch with 4Players!',
        height: '1000px'
    }, {
        colors: {
            background: 'transparent', // Dark for UMD test
        }
    });
</script>
info

We also offer a ES Module version of the widget. It has the same API, but is built with ES Modules. You can import it directly import it like so:

import {mountOdinCommunicator} from "@4players/odin-communicator";

The mountOdinCommunicator(...) function takes three arguments:

  • The container element ID
  • The ODIN Communicator configuration object
  • The optional theme object

The container element must be present on the page before calling mountOdinCommunicator(...).

The ODIN Communicator configuration object contains the following properties:

  • apiKey (required): Your Rooms API key (see below on how to get one)
  • roomId (required): The name of the room to join (all users in the same room will talk together)
  • title (optional): The widget title
  • description (optional): A description shown below the title
  • connectBtnText (optional): The text on the connect button
  • height (optional): The height of the widget (defaults to 400px)`

The theme object contains the following properties:

  • colors.primary (optional): The primary color of the widget
  • colors.secondary (optional): The secondary color of the widget
  • colors.background (optional): The background color of the widget (defaults to transparent)
  • colors.panel (optional): The background color of the panel (defaults to dark gray)

3. Getting an API key (via Rooms)​

For easier setup, we leverage the Rooms backend service to manage access of your ODIN Communicator instance.

The easiest path is to create a Rooms instance (includes a free option):

Create a Rooms instance

Once your Rooms instance is ready, navigate to our dashboard to retrive your API-Key for your Rooms-Instance. Just use this link to directly navigate to the dashboard:

Get Rooms API-Key
info

You can also use your own backend to manage access tokens. In this case, you'll need to implement the authentication flow yourself. The source code is open source and available on GitHub: https://github.com/4players/odin-communicator. Clone it, and adjust the OdinTokenService.js script to get tokens based on your backend logic. See Understanding Access Keys for more information.

Follow ODIN Web SDK guidance​

ODIN Communicator is built on top of the ODIN Web SDK. Review the Web SDK docs and follow the recommended authentication patterns for your environment.

ODIN Web SDK docs: https://docs.4players.io/voice/web/