DisWeb Documentation

To get started with DisWeb, first you must invite the bot to your server.

After you add one of the bots to your server, you need to pick a format to use in your website.
You can choose between Crate and one of our inline formats.

If you would like to disable sending messages from your site to Discord, revoke the "Send Messages" permission for the DisWeb bot user in every channel you want to disable sending messages to.

• Crate (recommended): Shows a little chat button in the corner of your website. It shows message notifications and provides an API. Crate is a JS library that transforms DisWeb into a sexy button, available in the bottom right of your site.

Inline Formats

These let you put a chat box in your site you can change the size, etc.

• iframe: Use this when you can't use JavaScript. It does not provide access to the embed-api.
• html-embed: A lightweight iframe wrapper which provides access to the embed-api. Requires JavaScript.
• react-embed: Provides access to the embed as a React component, and lets you use the embed-api.

Choose one of the formats to continue the tutorial and learn about adding the embed to your website.

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

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

and much more.

DisWeb Crate provides a little elegant chat button in the corner of your website. It shows message notifications from your server and provides an extensive API.

Getting Started

To get started with Crate, add the following basic code to your website. This goes in your site's HTML source at the end of your website's head, right before the closing tag. This might be in your theme or layout's code.

<script src="https://cdn.jsdelivr.net/npm/@widgetbot/[email protected]" async defer>
  new Crate({
    server: '410198229980938242',
    channel: '410205844471414784',
    shard: 'https://disweb.deploys.io'
  })
</script>

Once you add this code to your site, you should see the little crate button in the bottom right corner.
If you click it, it should show you the official deploys.io server.

Setting your server

As you can see, there are 3 parts to this code: the Server ID, Channel ID, and shard.

You can get the Server and Channel IDs from Discord.

• One way is to open Discord in your browser and take them from the URL. The URL has the following format: https://discordapp.com/channels/SERVERID/CHANNELID.
• Another way is to go to the Appearance tab in User Settings, and turn on Developer Mode. Then, right-click the server icon or channel and click Copy ID.

The shard part should be left alone in order to use deploys.io high-speed servers to handle your requests.

Note: The Channel ID you choose will be the default channel that will show when Crate opens. However, the user can switch the channel.
Once you set the Server ID and Channel ID, the widget should now show your server when you open it.

You have successfully set up DisWeb. However you can further customize DisWeb to your needs. Read below for more info.

You can pass custom options to crate when initializing it, for example:
new Crate({ server: '410198229980938242', shard: 'https://disweb.deploys.io', location: ['top', 'left'] })

type url = string
        type size = string

        export type horizontal = 'top' | 'bottom' | number
        export type vertical = 'left' | 'right' | number

        interface Options {
        // Server + channel IDs
        server: string
        channel?: string

        // Where the button should appear on-screen
        location?: [horizontal, vertical]

        // The color of the button
        color?: string
        // The glyph to display on the button
        glyph?: [url, size]
        // Custom CSS to be injected into the Shadow root
        css?: string

        // Message notifications
        notifications?: boolean
        // Unread message indicator
        indicator?: boolean
        // Notification timeout
        timeout?: number

        // Only load the widget once the user opens it
        defer?: boolean
        }

        export default Options

Once you've initialised a new constructor, you can manipulate it using the following methods.

Toggle

Toggles the widget's visibility, with an optional param to set it.

type toggle = (open?: boolean) => void

// Toggle
        crate.toggle()

        // Toggle open
        crate.toggle(true)

        // Toggle closed
        crate.toggle(false)

Notify

Displays a notification message to the user. Markdown supported.

type notify = (
        content:
        | string
        | Notification & {
        content: string
        timeout?: number
        }
        ) => { hide: Function; delete: Function }

// Hello world
        crate.notify(`**hello** world`)

        // Display for 2 seconds + custom avatar
        crate.notify({
        content: '`2 seconds`',
        timeout: 2000,
        avatar: 'https://cdn.samdd.me/samdd-logo/variations/logo.png'
        })

        // Programmatically hide notification
        const notification = crate.notify({
        content: 'Test',
        timeout: false
        })
        /* business logic */
        notification.hide()

Update options

Updates the options for crate in real time. Available options

type setOptions = (newOptions: Options) => Options

// Update an option by mutating it
crate.options.color = '#'+Math.random().toString(16).slice(2, 8) // random color

// Update options by passing an object
crate.setOptions({
  location: [-Math.random() * 200), 'right'], // Random position
})

Visibility

Hides / un-hides the crate instance, eg. the button, notifications and widget

type hide = () => void
        type show = () => void

// Button will now disappear
crate.hide()

// Button will now re-appear
crate.show()

Async

See the Pen Standard Crate by CodeCo (@CodeCo) on CodePen.

See the Pen Custom crate object by CodeCo (@CodeCo) on CodePen.

See the Pen Multiple crate instances by CodeCo (@CodeCo) on CodePen.

See the Pen Updating crate state by CodeCo (@CodeCo) on CodePen.

See the Pen Dynamically interacting with crate by CodeCo (@CodeCo) on CodePen.

Sync

We recommend using the async version of the API, as it'll make your website way faster. The synchronous version should only be used if it's being dynamically inserted into your website after the page's initial load (eg. A custom JS script)

See the Pen Sync crate by CodeCo (@CodeCo) on CodePen.

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

Getting Started

<widgetbot
  server="410198229980938242"
  channel="410205844471414784"
  shard="https://disweb.deploys.io"
></widgetbot>
<script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed" async defer></script>

Once you add this code to your site, you should see the widget, showing the official deploys.io server.

Setting your server

As you can see, there are 3 parts to this code: the Server ID, Channel ID, and shard.

You can get the Server and Channel IDs from Discord.

• One way is to open Discord in your browser and take them from the URL. The URL has the following format: https://discordapp.com/channels/SERVERID/CHANNELID.
• Another way is to go to the Appearance tab in User Settings, and turn on Developer Mode. Then, right-click the server icon or channel and click Copy ID.

The shard part should be left alone in order to use deploys.io high-speed servers to handle your requests.

Note: The Channel ID you choose will be the default channel that will show when Crate opens. However, the user can switch the channel.
Once you set the Server ID and Channel ID, the widget should now show your server when you open it.

You have successfully set up DisWeb. However you can further customize DisWeb to your needs. Read below for more info.

You can pass custom attributes to the <widgetbot> element, to change the options when initializing it, for example:

<widgetbot
  server="410198229980938242"
  shard="https://disweb.deploys.io"

  channel="410205844471414784"
  width="500"
  height="500"

  id="embed"
></widgetbot>
<script src="https://cdn.jsdelivr.net/npm/@widgetbot/[email protected]" async defer></script>

Available options

type url = string

        interface Attributes {
        // Server + channel IDs
        server: string
        channel?: string

        // The height and width. You can specify a number to
        // use pixels or use CSS units eg. 100%
        width?: number | string
        height?: number | string
        }

        export default Attributes

Once you've created a new WidgetBot element, the html-embed script adds the API methods onto the Elements prototype.

You can access them by simply querying the <widgetbot> element, example:

<widgetbot
  server="410198229980938242"
  shard="https://disweb.deploys.io"
  id="embed"
></widgetbot>

<script>
const embed = document.getElementById('embed')
// embed.emit()
</script>

Emit

Emits an event to the embed-api

type emit = (event: Event, data: Events[Event]) => void

// Send a message on the active Discord channel
embed.emit('sendMessage', 'hi')

// Send a message on a specific Discord channel
embed.emit('sendMessage', {
  channel: '123456789',
  message: 'hi'
})

On

Listens for a specific event from the embed-api

type on = (event: Event, (data: Events[Event]) => void) => void

// Listens for when the user has signed in
embed.on('signIn', (user) => {
  console.log(`Guest signed in as ${user.name}`, user)
})

// Listen for discord message events
embed.on('message', ({ message, channel }) => {
  console.log(`New message in ${channel}`, message)
})

// Listen for discord message delete events
embed.on('messageDelete', ({ channel, id }) => {
  console.log(`Message in ${channel} with an ID of ${id}, was deleted`)
})

DisWeb 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"
    onAPI={(api) => {
      /*api.on('signIn', user => {
        console.log(`Guest signed in as ${user.name}`, user)
        api.emit('sendMessage', 'Hello world')
      })*/
    }}
  />
)

export default App

Props

The DisWeb component accepts the following props.

  interface IProps {
    server?: string
    channel?: string
    shard?: string

    defer?: boolean

    className?: string
    onAPI?: (api: Client) => void

    style?: React.CSSProperties
    height?: number
    width?: number

    options?: { [key: string]: string }
  }

  export default IProps

Welcome to the iframe tutorial.

Getting Started

To get started, add the following code where you want the widget to display.

<iframe src="https://disweb.deploys.io/channels/410198229980938242/410205844471414784" height="600" width="800"></iframe>

Once you add this code to your site, you should see the widget, showing the official deploys.io server.

Setting your server

The DisWeb URL has the following format: https://disweb.deploys.io/channels/SERVERID/CHANNELID

In the example code, the SERVERID is 410198229980938242, and the Channel ID is 410205844471414784.
To set it to your server, you must change the Server ID, and Channel ID.

You can get the Server and Channel IDs from Discord.

• One way is to open Discord in your browser and take them from the URL. The URL has the following format: https://discordapp.com/channels/SERVERID/CHANNELID.
• Another way is to go to the Appearance tab in User Settings, and turn on Developer Mode. Then, right-click the server icon or channel and click Copy ID.

Note: The Channel ID you choose will be the default channel that will show when Crate opens. However, the user can switch the channel.

You have successfully set up DisWeb.

A special thanks to everyone who has contributed to WidgetBot, the code behind DisWeb.