Skip to content

JS Widget

The widget SDK allows you to run the DialoX chat widget on your site.

Installation and configuration

Please consult the Chat widget documentation on how to install and configure the widget for your website.

API

Once loaded the SDK exposes a global BotSqd object which has the following functions:

BotSqd.event(name, payload)

Send an event to the chat. The chat window needs to be opened already.

BotSqd.openChat()

Open the chat widgets when it was closed.

BotSqd.closeChat()

Closes the chat widget when it was open.

BotSqd.setUserId(id)

Set the user ID that is to be used in the chat. This will re-open the chat window when the user id changes. When the widget it still closed, nothing happens.

BotSqd.getUserId()

Retrieve the current user id that will be sent to DialoX.

Overriding CSS in the chat widget

The widget runs isolated from the main website via an dynamically created iframe. It is therefore not possible to simply override style sheet rules by adding them to the hosting site. Instead, if you want to override any CSS rules in the widget, these CSS rules need to be specified as part of the widget.yml file that is part of the bot.

For instance, to make the background color of the chat frame in the widget the color red, add the following extra_css to the widget YAML:

extra_css: |
  #botsquad-bubble #botsquad-frame .chat-messages {
    background-color: red;
  }