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 and BLiP documentation. 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. 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.

<script src="https://unpkg.com/[email protected]" type="text/javascript"></script>
<script>
   (function () {
      window.onload = function () {
          new BlipWebSDK.ChatBuilder()
            .withApiKey('PUT-YOUR-API-KEY-HERE')
            .build();
          }
        })();
</script>

Via npm

If you are using ES6, simply install the blip-chat-web package from the npm registry.

npm install blip-chat-web

Instantiate the BlipSdkWeb class

import * as BlipWebSDK from 'blip-chat-web';

new BlipWebSDK.ChatBuilder()
  .withApiKey('PUT-YOUR-API-KEY-HERE')
  .build();

Via bower

bower install blip-chat-web

<script src="your-project/bower_components/blip-chat-web/dist/blipWebSdk.js" type="text/javascript"></script>
<script>
  (function () {
    new BlipWebSDK.ChatBuilder()
      .withApiKey('PUT-YOUR-API-KEY-HERE')
      .build();
  })();
</script>

Via AMD

This SDK use UMD to module export. If your project use same AMD, please use 'BlipWebSDK' identifier to resolve the library dependency.

For instance:

A application that use dojo.js as your AMD

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.12.1/dojo/dojo.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]"></script>

<script>
    require(['BlipWebSDK'], function (sdk) {
        new sdk.ChatBuilder()
                  .withApiKey('PUT-YOUR-API-KEY-HERE')
                  .build();
    });
</script>

Optional parameters

You can also define optional parameters passing an object inside build() method, as you can see below:

Options object contains three properties:

Config

| Propertie | Description | | --- | --- | | authType | 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 ** |

∗ 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.

Window

| Propertie | Description | | --- | --- | | target | 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 |

Events

| Propertie | Description | | --- | --- | | onEnter | Callback action on enter chat | | onLeave | Callback action on leave chat |

Examples

BLiP Chat as a widget

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);

BLiP Chat as embedded element using 'Login' authentication type and disabling notifications:

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

Destroy chat widget

To destroy BLiP Chat widget you must use a destroy method on chat builder variable.

Example

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);

Support

• Safari: Version 10.1.1 or later
• Google Chrome: Version 40 or later
• Firefox: Version 48 or later
• Opera: Version 35 or later
• Microsoft EDGE: Version 14 or later
• Internet Explorer: Version 11. Not recommended ∗

∗ It is not recommended to use Internet Explorer due to some restrictions as carousel card not supported and card layout problems.

License

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.