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

Integrations

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="https://cdn.jsdelivr.net/npm/@widgetbot/[email protected]" async defer>
  new Crate({
    server: '299881420891881473',
    channel: '355719584830980096',
    shard: 'https://disweb.dashflo.net'
  })
</script>

html-embed

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

<widgetbot
  server="299881420891881473"
  channel="355719584830980096"
  width="800"
  height="600"
  shard="https://disweb.dashflo.net"
></widgetbot>
<script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>

react-embed

@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 = () => (
  <WidgetBot
    server="299881420891881473"
    channel="355719584830980096"
    shard="https://disweb.dashflo.net"
  />
)

export default App