npm install blip-chat-web
Blip Chat for Web
======
SDK to easily add BLiP Chat widget in your Web page. Put your chatbot in your web page. For more information see [BLiP portal][1] and [BLiP documentation][2]. See supported browser versions here.
Installation
--------
Add the script element inside the body of your web page. Put your apikey as asked. To get your apikey go to [BLiP portal][3]. On the left menu access Publications -> Blip Chat. You will also need to add domains from the websites where Blip Chat is inclued, in order to enabled them in your chatbot.
That's all :)
For publishing purpose, prefer download the script and reference it locally. CDN can have availability problem and cause blip chat instability.
``html
`
blip-chat-web
Via npm
--------
If you are using ES6, simply install the package from the npm registry.
npm install blip-chat-web
`
$3
javascript
`
import * as BlipWebSDK from 'blip-chat-web';
new BlipWebSDK.ChatBuilder()
.withApiKey('PUT-YOUR-API-KEY-HERE')
.build();
bower install blip-chat-web
Via bower
--------
`
html
`
`
Via AMD
--------
This SDK use UMD to module export. If your project use same AMD, please use 'BlipWebSDK' identifier to resolve the library dependency.
$3
A application that use dojo.js as your AMD
html
`
authType
Optional parameters
-------
You can also define optional parameters passing an object inside build() method, as you can see below:
Options object contains three properties:
$3
| Propertie | Description |
| --- | --- |
| | User authentication type (BlipWebSDK.AuthType) ∗ |
user
| | User data with id, password, name and email properties |
showNotification
| | Enable notification for new messages when tab is not active ** |
target
∗ Possible values for authType are: 'Guest', 'Login' and 'Dev'. You can access them using 'BlipWebSDK.AuthType' class. 'Guest' type will be used as default If you do not define 'authType'. To see more details about authentication types click here
∗∗ The notifications are active by default.
$3
| Propertie | Description |
| --- | --- |
| | Target element id for embedding sdk |
title
| | Title of chat window |
iconPath
| | Icon url for chat window |
zIndex
| | Define zIndex value for chat window. (Default value: 16000001) |
widgetColor
| | Define color value for chat widget. (Default value: '#546E7A') |
hideMenu
| | Define if contextual menu should be hidden |
onEnter
$3
| Propertie | Description |
| --- | --- |
| | Callback action on enter chat |
onLeave
| | Callback action on leave chat |
`
Examples
---------
$3
javascript
`
var options =
{
window: {
title: 'Send a message',
widgetColor: '#546E7A',
iconPath: 'https://takenetomni.blob.core.windows.net/media-db/blip-app-white.png',
hideMenu: false
},
events: {
onEnter: function() {
console.log("I'm in the chat!");
},
onLeave: function() {
console.log("I'm out the chat!");
}
}
};
new BlipWebSDK.ChatBuilder()
.withApiKey('PUT-YOUR-API-KEY-HERE')
.build(options);
`
$3
javascript
`
var options =
{
config: {
authType: BlipWebSDK.AuthType.LOGIN,
showNotification: false
},
window: {
title: 'Send a message',
target: 'your-element-id',
hideMenu: false
},
events: {
onEnter: function() {
console.log("I'm in the chat!");
},
onLeave: function() {
console.log("I'm out the chat!");
}
}
};
new BlipWebSDK.ChatBuilder()
.withApiKey('PUT-YOUR-API-KEY-HERE')
.build(options);
`
Advanced features
$3
To destroy BLiP Chat widget you must use a destroy method on chat builder variable.
$3
javascript
``
var options =
{
window: {
title: 'Send a message'
},
events: {
onEnter: function() {
console.log("I'm in the chat!");
},
onLeave: function() {
console.log("I'm out the chat!");
}
}
};
var chatBuilder = new BlipWebSDK.ChatBuilder()
.withApiKey('PUT-YOUR-API-KEY-HERE');
chatBuilder.build(options);
//To destroy widget use:
chatBuilder.destroy();
//To recreate widget use:
chatBuilder = new BlipWebSDK.ChatBuilder()
.withApiKey('PUT-YOUR-API-KEY-HERE')
.build(options);