Adding your custom chat widget to the website

To help developers to create their own widget, or to customize the standard Buzzeasy widget further than it is possible through the Portal, Geomant has made the code of the widget available to download from GitHub.

Note

The code on GitHub is provided on an "As is" basis, there is no support available as part of the standard support.

Please contact Geomant Professional Services for support or customisation services.

You can build your own chat widget directly by consuming the Microsoft Azure Bot Services DirectLine API. Customer chat monitoring is currently only supported using the buzzeasy chat widget.

Steps to build the sample widget

1. Clone the code from GitHub Repository
2. Initialize the packages used with npm install
3. Edit the code
4. Build your solution npm run build
5. Preview the widget with npm run start and navigating to localhost:8000\demo
6. Copy buzzchat.js to your website host
7. Update your code that you add to your website to embed the chat widget to point to the URL where you host the file

Tip

If you only would like to customise the look and feel of the Widget, carefully edit the src\scss\botchat.scss stylesheet. To enable IE support or to disable use of the buzzeasy portal customisations, comment out the sections required in the \src\scss\includes\colours.scss and src\scss\includes\settings.scss stylesheets. You need to rebuild the widget on every change as the css is embedded into the buzzchat.js file.

Recommended development environment

Visual Studio Code is a recommended tool for edition the code..

You need to have Node.js installed that has NPM that is used to get/update the packages used.