wozzbot-sdk v2.4.0

wozzbot-sdk

The official JavaScript SDK for Wozzbot. For more information visit www.wozzbot.com.

Installation

In the browser

To use the SDK in the browser, simply:

1. Include the script file in your HTML pages: <script src="https://assets.wozzbot.com/sdk/v2"></script>
2. Initialize the script, see initialization details below.

The /v2 in the URL pins the included script to the major version of this package. This will prevent you from unexpectedly upgrading to a new version with backwards incompatible changes. You can also use https://assets.wozzbot.com/sdk as the URL, that would always serve you the latest version.

Using a bundler, such as webpack

First, install this SDK using npm:

npm install --save-prod wozzbot-sdk

Then, within your application include the SDK into your project:

const wozzbot = require('wozzbot-sdk')

Or:

import wozzbot from 'wozzbot-sdk'

Then, do the initialization.

Initialization

When you initialize the SDK the Wozzbot chat trigger will be rendered in the bottom right corner. Replace <client_identifier> with your client identifier, which you can find in the Wozzbot management interface.

const bot = wozzbot({
  clientIdentifier: '<client_identifier>',
});

Configuration options

Preview

The preview attribute has the following attributes.

Theme

An object with three properties that style these UI attributes:

theme: {
  primaryColor: '#ff0000', // quick replies
  backgroundColor: '#ff69b4', // background color for the panel
  foregroundColor: '#663399', // text color
}

There are some CSS classes available if a more specific customization is required:

1. wozzbot-pane-submit, this styles the submit button for the user
2. wozzbot-pane-input, this styles the input field where the user types
3. wozzbot-pane-suggestion, this styles the buttons for the reply suggestions
4. wozzbot-pane-close, this styles the close button in the message pane, if it's enabled.

To use these classes, just define them in your own stylesheet and the styling should be relected by the SDK components. Sidenote: It may be necessary to use a !important annotation on some already existing styling, such as colors.

Translations

An object with properties that allow you to change the default messages:

translations: {
  inputPlaceholderText: 'Type your message...', // placeholder for text input field
  sendButtonText: 'send', // text inside send button
  paneCloseTooltip: 'Close the chat window', //  The tooltip shown on the close button
}

UI

An object with properties that allow allow you to customize the user interface:

ui: {
  popupSentence: true, // If false the introduction sentence is not shown when the SDK is not initialized but is opened
  closeFromMessagePane: false, // If true, show a close button in the top right of the chat interface.
}

API

The wozzbot initialization function returns the following functions:

Example

<script type="text/javascript">
  const bot = wozzbot({
    clientIdentifier: '...',
  });
</script>

<button onClick="bot.open();">Open</button>
<button onClick="bot.close();">Close</button>
<button onClick="alert(bot.isOpen() ? 'The bot is open.' : 'The bot is closed.');">Bot status</button>