BLiP Chat Widget — Tips and Tricks

Written by:
@andrebnassis — https://github.com/andrebnassis
@phabh — https://github.com/phabh

Introduction

BLiP Chat is the messaging channel created by BLiP, used on websites and apps. On this tutorial, We will show you some tips and tricks about its use.

Script

How to install it on a website

To install it on a website, just follow the steps on this article:
https://help.blip.ai/docs/channels/blip-chat/adicionar-bot-site-blip-chat/

How to test it as localhost

1. Install node LTS
https://nodejs.org/en/download/

2. Install package serve
npm -g i serve --save

3. Execute the command ‘serve’ inside the folder that the webpage script (with BLiP Chat script on it) is located.
serve

Image for post
Image for post

4. Open the localhost url created (in this example, http://localhost:5000) and BLiP Chat Widget will show up in the lower left corner.

Usage Tips

Basic script example

<script src="https://unpkg.com/blip-chat-widget" type="text/javascript">
</script>
<script>
(function () {
window.onload = function () {
new BlipChat()
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withButton({"color":"#2CC3D5","icon":""})
.build();
}
})();
</script>

A) Defining a userId

  • function withAuth()
.withAuth({
authType: BlipChat.DEV_AUTH,
userIdentity: '1234567',
userPassword: 'passwrd',
})

To generate a random id, you could use the followed function:

function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}

Resulting the script below:

(function () {
window.onload = function () {

function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}

var blipClient = new BlipChat();
blipClient .withAppKey('YOUR-BLIPCHAT-API-KEY')
.withAuth({
authType: BlipChat.DEV_AUTH,
userIdentity: uuidv4(),
userPassword: 'passwrd',
})
.build();
}
})();

B) Setting contact information on the first interaction

  • function withAccount()

— Option 01 (Recommended) Use the message metadata to send updated informations (item G of this article). Next, inside the Builder Framework, you can access the message metadata and update the contact information using Set Contact action.

— Option 02: Call the update contact information command (using BLiP SDK or HTTP request). Next, inside the Builder framework, you must create a SetContact action, to update the cache contact of the Builder Framework, and then you could access the updated contact information on Builder.

(function () {
window.onload = function () {
var blipClient = new BlipChat();
blipClient
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withAccount({
fullName: 'John Doe',
email:'johndoe@gmail.com',
phoneNumber: '+15055034455',
city: 'Decatur',
extras:{
key: 'value'
}
})
.build();
}
})();

C) Do something based on BLiP Chat Widget events

  • function withEventHandler()
(function () {
window.onload = function () {
var blipClient = new BlipChat()
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withEventHandler(BlipChat.ENTER_EVENT, function () {
console.log('enter')
})
.withEventHandler(BlipChat.LEAVE_EVENT, function () {
console.log('leave')
})
.withEventHandler(BlipChat.LOAD_EVENT, function () {
console.log('chat loaded')
})
.withEventHandler(BlipChat.CREATE_ACCOUNT_EVENT, function () { console.log('account created')
})
blipClient.build()
}
})();

D) Sending a message

  • function sendMessage()
(function () {
window.onload = function () {
var blipClient = new BlipChat();
blipClient
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withEventHandler(BlipChat.LOAD_EVENT, function () {
blipClient.sendMessage({
"type": "text/plain",
"content": "Start"
});
})
.build();
}
})();

E) Sending a hidden message

  • function sendMessage() + metadata
(function () {
window.onload = function () {
var blipClient = new BlipChat();
blipClient
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withEventHandler(BlipChat.LOAD_EVENT, function () {
blipClient.sendMessage({
"type": "text/plain",
"content": "Start",
"metadata":{
"#blip.hiddenMessage": true
}
});
})
.build();
}
})();
  • function sendMessage() + chatstate
(function () {
window.onload = function () {
var blipClient = new BlipChat();
blipClient
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withEventHandler(BlipChat.LOAD_EVENT, function () {
blipClient.sendMessage(
{
"type":"application/vnd.lime.chatstate+json",
"content": {
"state": "starting"
}
});
})
.build();
}
})();

F) Disable message thread history

  • function withoutHistory()
(function () {
window.onload = function () {
var blipClient = new BlipChat();
blipClient
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withoutHistory()
.build();
}
})();

G) Sending custom metadata in all messages sent by user

  • function withCustomMessageMetadata()
(function () {
window.onload = function () {
var blipClient = new BlipChat()
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withCustomMessageMetadata({ "user origin" : "browser" });
blipClient.build();
}
})();

H) Targeting BLiP Chat to an HTML element

  • function withTarget()
<html>
<head>
</head>
<body id="sdkTarget">
<script src="https://unpkg.com/blip-chat-widget" type="text/javascript">
</script>
<script>
(function () {
window.onload = function () {
new BlipChat()
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withButton({"color":"#2CC3D5","icon":""})
.withTarget('sdkTarget')
.build();
}
})();
</script>
</body>
</html>

I) Allow user to send files

https://help.blip.ai/docs/channels/blip-chat/permitir-envio-de-arquivos-blip-chat/

J) Execute command to open or close BLiP Chat window

  • function toogleChat()

K) Delete the BLiP Chat Widget

  • function destroy()

L) Setting BLiP Chat icon button

  • function withButton()
(function () {
window.onload = function () {
new BlipChat()
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withButton({"color":"#EF3340","icon":"https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"})
.build();
}
})();

M) Customizing BLiP Chat through CSS

  • function withCustomStyle()
(function () {
window.onload = function () {
var customStyle = `#message-input {
box-sizing: border-box;
border: 1px solid #0CC8CC;
border-radius: 6px;
background: #252B39;
}
#message-input textarea {
background: #252B39;
font-size: 12px;
color: white;
}`
var blipClient = new BlipChat()
.withAppKey('YOUR-BLIPCHAT-API-KEY')
.withCustomStyle(customStyle);
blipClient.build();
}
})();

N) Customizing BLiP Chat through BLiP Portal given options

https://help.blip.ai/docs/channels/blip-chat/customizacoes-disponiveis-blip-chat/

O) Set BLiP Chat Start Screen

  1. On the BLiP portal, enter in your chatbot page.
Image for post
Image for post

3. In the menu appeared on the left side of the screen, click on Welcome Screen

Image for post
Image for post

4. Activate the screen by pressing the upper button and fill the informations

Image for post
Image for post

To learn more about:

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store