Chat bubble via Code

Chat bubble via Code

Import latest version of JS bundle

Blits chat is designed to integrate with your existing website using JavaScript. You can add the blits chat to your website using a script tag:

<script src="https://blitsproduction.z6.web.core.windows.net/chat/production/latest/bundle.js"></script>

Once the script loads, you will have access to the Blits external chat via the function: window.BlitsBotChat.

Initialize a bot

You can start the chat using the init function. It takes an object with the following function:
data.window.BlitsBotChat.init({ 
     botId: "YOURBOTID", 
     code: "YOURSNIPPETCODE", 
     userId: "YOURUSERID" 
})

The userId is optional.

Render a bot

If you don’t like the Blits styling but still want to integrate the chat, you can use the render function. The first argument is the same as the init function (an object with data). However, this function expects an additional argument – the html element in which you want the chat.
window.BlitsBotChat.render({ 
    botId: "YOURBOTID", 
    code: "YOURSNIPPETCODE", 
    userId: "YOURUSERID" 
}, 
document.getElementById("CHATELEMENTID"))
Both the init and render functions return a promise that resolves once the conversation with the bot is initialised. The promise fulfils with the directLine of the conversation. Using the directLine you can subscribe to bot and user activities and you can access the conversation id.


Directline of a bot

You can also get the directLine using the getDirectLine function.

window.BlitsBotChat.getDirectLine()

 
Other functions

You can open/close the chat using the open and close functions (only works for the Blits styled chat).

window.BlitsBotChat.open()
window.BlitsBotChat.close()

If you want to get rid of the chat, use the destroy function.
Window.BlitsBotChat.destroy()

Advance integration

Instead of using botId and code you can start the chat with a directline token or key. Just pass dlToken in the init or render functions.
window.BlitsBotChat.init({ 
    dlToken: "YOURDIRECTLINE_TOKEN" 
})

If you want to use predefined settings, you can pass them under settings.

window.BlitsBotChat.init({ 
    settings: { YOUR_SETTINGS } 
})

Here is a list of the settings:

title: string;
avatar: string;
bubbleIcon: string;
defaultChatScreen: 'small' | 'big'
position: 'top-left' | 'top-center' | 'top-right' | 'center-center' | 'bottom-left' | 'bottom-center' | 'bottom-right'
startOpened: boolean;
isMainColor: boolean;
mainColor: string;
isMainTextColor: boolean;
mainTextColor: string;
hasPopupMessages: boolean;
popupMessages: {
  message: string;
  delay: number; // in seconds
}[];
hasButton: boolean;
closeWithoutButton: boolean;
hasUploadButton: boolean;
hasMicButton: boolean;
hasPoweredBy: boolean;

You also have the ability to run multiple chat instances at the same time. You just need to pass in an id for each instance. If you don’t provide an id, it defaults to and empty string "".

window.BlitsBotChat.init({ 
    dlToken: "YOURDIRECTLINE_TOKEN" 
})

window.BlitsBotChat.render({ 
    id: "second", 
    botId: "YOURBOTID", 
    code: "YOURSNIPPETCODE" 
})

window.BlitsBotChat.init({ 
     id: "third", 
     botId: "YOURBOTID", 
     code: "YOURSNIPPETCODE" 
})

When calling the other functions (getDirectLine, destroy, etc.), you will have to provide an id to target a specific chat instance. If you don’t provide an id, it defaults to an empty string "". 

window.BlitsBotChat.getDirectLine("second")
window.BlitsBotChat.open() // Opens the chat without id (the first one)
window.BlitsBotChat.open("third") // Opens the chat with id "third"

If you want to use the test version of your flows, you need to pass in useStagingVersion and set it to true.

window.BlitsBotChat.init({ 
    useStagingVersion: true 
})

If you want to start/test a subflow function, you can pass in the subflow name under flowName.

window.BlitsBotChat.init({ 
    flowName: "YOURSUBFLOWNAME" 
})

    • Related Articles

    • Web Chat Bubble

      The web chat bubble is the easiest way to integrate any chatbot on an existing website. The Blits chat is designed to integrate with your existing website using a small piece of JavaScript code. You can add the Blits chat to your website by placing ...

    • Web Chat Bubble

      The web chat bubble is the easiest way to integrate any chatbot on an existing website. The Blits chat is designed to integrate with your existing website using a small piece of JavaScript code. You can add the Blits chat to your website by placing ...

    • Chat bubble settings

      You can set various settings for your web chat bubble. Chat Bubble screen size Here, you can pick whether the size of the chat screen should be big or small. Chat Bubble position Here, you can pick the location where your Chat Bubble should emerge. ...

    • How to embed a Chat Bubble on your website

      Using Javascript code Go the tab 'Chat Bubble'  in your bot's settings. If the tab is disabled you may have to upgrade your account. Create a new Chat Bubble. Give it a name, this is just for your convenience. Something to help you set this bubble ...

    • How do I enable the Chat Bubble?

      Go to your Bot -> Settings -> Configuration -> Chat Bubble -> Click 3 vertical dots -> Select 'Enable'