npm install blip-sdk-web
Blip SDK for Web
======
SDK to easily add BLiP conversations (chatbots) in your Web page. For more information see [BLiP portal][1] and [BLiP documentation][2]. See supported 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.
That's all :)
``html
`
blip-sdk-web
Via npm
--------
If you are using ES6, simply install the package from the npm registry.
npm install blip-sdk-web
`
$3
javascript
`
import * as BlipWebSDK from 'blip-sdk-web';
new BlipWebSDK.ChatBuilder()
.withApiKey('PUT-YOUR-API-KEY-HERE')
.build();
bower install blip-sdk-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 |
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
$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') |
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'
},
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
},
window: {
title: 'Send a message',
target: 'your-element-id'
},
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 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')
.build(options);
//To destroy widget use:
chatBuilder.destroy();
//To recreate widget use:
chatBuilder = new BlipWebSDK.ChatBuilder()
.withApiKey('PUT-YOUR-API-KEY-HERE')
.build(options);