Skip to content

Getting started

Getting started

WidgetBot provides a rich client-sides wrappers around the widgets. Each wrapper provides access to the embed-api, allowing your website to programatically:

  • Listen for message events
  • Send messages through WidgetBot
  • Sign in with a specific username

and more


Crate (recommended)

@widgetbot/crate provides a little chat button in the corner of your website. It shows message notifications from your server and provides an extensive API.

<script src="" async>
  const crate = new Crate({
    server: '299881420891881473',
    channel: '355719584830980096'

  /*crate.notify('Test notification')
  crate.on('signIn', data => {
    console.log(`Guest signed in as ${}`)
    crate.emit('sendMessage', 'Hello world')


@widgetbot/html-embed is a lightweight iframe wrapper, which provides access to the embed-api. It can be used with any framework and has no dependencies.

<script src=""></script>

  const embed = document.getElementById('embed')

  /*embed.on('signIn', data => {
    console.log(`Guest signed in as ${}`)
    embed.emit('sendMessage', 'Hello world')


@widgetbot/react-embed provides access to the embed as a React component. It provides syntactical sugar for the embed-api, with 100% type safety (using typescript).

import * as React from 'react'
import WidgetBot from '@widgetbot/react-embed'

const App = () => (
    onAPI={(api) => {
      /*api.on('signIn', user => {
        console.log(`Guest signed in as ${}`, user)
        api.emit('sendMessage', 'Hello world')

export default App