WidgetBot

Appearance

Crate API ​

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

Crate APIs ​

Toggle ​

Definition

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

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

Usage

js
// Toggle
crate.toggle()

// Toggle open
crate.toggle(true)

// Toggle closed
crate.toggle(false)

Try it:

Notify ​

Definition

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

Displays a notification message to the user. Markdown supported

Usage

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

// Display for 2 seconds + custom avatar
crate.notify({
  content: '`2 seconds`',
  timeout: 2000,
  avatar: 'https://cdn.discordapp.com/avatars/293731150239891456/f7d78d0c7e6522ed296bfa315b3a1969.png'
})

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

Try it:

Update options ​

Definition

ts
type setOptions = (newOptions: Options) => Options

Updates the options for crate in real time. Available options

Usage

js
// 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
})

Try it:

Visibility ​

Definition

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

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

Usage

js
// Button will now disappear
crate.hide()

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

Try it:

Definition

ts
type navigate = (channelID: string) => void

Navigates to a different channel and opens the widget if it's closed

Usage

js
// Navigates to #general
crate.navigate('368427726358446110')

// Navigates to #live-demo
crate.navigate('355719584830980096')

Try it:

Embed API ​

Emit ​

Definition

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

Emits an event to the embed-api

For details, see embed-api commands

Usage

js
// Navigate to a different server/channel
crate.emit('navigate', {
  guild: '299881420891881473',
  channel: '368427726358446110'
})

// Request login
crate.emit('login')

// Log out
crate.emit('logout')

On ​

Definition

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

Listens for a specific event from the embed-api

For details, see embed-api events

Usage

js
// Listens for when the user has signed in
crate.on('signIn', (user) => {
  console.log(`User signed in as ${user.username}`, user)
})

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

// Listen for discord message delete events
crate.on('messageDelete', ({ channel, id }) => {
  console.log(`Message ${id} in #${channel.name} was deleted`)
})