Features of the Blip Chat Widget Help Center January 24, 2023 12:53 Updated Index: How to define contact information in the first interaction How to perform actions from certain Widget eventsa Disable message history How to send messages to the bot Send message with metadata Send customized metadata in all messages Associate Blip Chat with an HTML element Open or close the chat window Delete the widget instance How to customize the widget How to execute a command through the Widget The Blip Chat Widget is the way to introduce the native Blip channel to your web or mobile application. In these scenarios, it may be interesting that some actions and commands are performed even before the user x bot interaction begins. See some features of the Blip Chat Widget: How to define contact information in the first interaction This function allows you to define information, such as name, phone and email, for example, for the user's contact, even before interacting with the bot. The example below shows how to store a user's name, email, phone, city and, within the extra field, the plan. <script src="https://unpkg.com/blip-chat-widget@1.6.*" type="text/javascript"></script><script> (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:{ plan: 'gold' } }) .build(); } })();</script> How to perform actions from certain Widget events If you need to perform any type of action on any Chat event, just use the withEventHandler method informing the type of event to be treated and the action to be performed. The types of events can be: ENTER_EVENT = Take action when opening Chat LEAVE_EVENT = Take action when closing Chat LOAD_EVENT = Take action at the end of the Chat loading CREATE_ACCOUNT_EVENT = Take action when creating user account See the example below on how to use this function: <script src="https://unpkg.com/blip-chat-widget" type="text/javascript"></script><script>(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() } })();</script> Disable message history With the withoutHistory method it is possible to prevent the history of messages exchanged between the user and the bot from being displayed after the bot is loaded. BlipClient.withoutHistory () How to send messages to the bot You can send messages to bot using the sendMessage method, as in the example below: <script src="https://unpkg.com/blip-chat-widget" type="text/javascript"></script><script>(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(); } })();</script> In addition, you can send other types of messages, including metadata that may be useful for your application. Send message with metadata This method is used to send hidden metadata with messages. <script src="https://unpkg.com/blip-chat-widget@1.6.*" type="text/javascript"></script><script>(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(); } })();</script> Send customized metadata in all messages This method defines a standard metadata for all messages sent to the bot. <script src="https://unpkg.com/blip-chat-widget@1.6.*" type="text/javascript"></script><script>(function () { window.onload = function () { var blipClient = new BlipChat() .withAppKey('YOUR-BLIPCHAT-API-KEY') .withCustomMessageMetadata ({ "user origin" : "browser" }) .build(); } })();</script> Associate Blip Chat with an HTML element If you need to define an HTML element, such as a div, for example, and associate the Widget with it, you need to use the withTarget () function, passing the id of the element in question as a parameter. <div id="myModal"> <div class="myModalContent"> <span class="close">×</span> <div class="iframe-chatbot" id="iframe"></div> </div></div><script src="https://unpkg.com/blip-chat-widget" type="text/javascript"></script><script>(function () { window.onload = function () { new BlipChat() .withAppKey('YOUR-BLIPCHAT-API-KEY') .withTarget('iframe') .build(); } })();</script> Open or close the chat window If you want to open or close the chat window, based on an event, for example, you can use the toogleChat method, alternately. If the window is open, it will be closed and so on. blipClient.toogleChat (); Delete the widget instance You may want to completely remove the Blip Chat instance from your website. With the destroy method you will destroy the widget instance and remove it from the HTML element it is in. To do this, just call the method as below: BlipClient.destroy (); How to customize the widget It is possible to customize the interface, button, colors, among other available customizations. If you need to do this type of customization, take a look at this article: Customizing the Blip Chat Widget through CSS How to execute a command through the Widget Suppose you need to send a command to the Blip API when the chat is loaded. To do this, just use the sendCommand () function, as shown in the example below: <script src="https://unpkg.com/blip-chat-widget@1.6.*" type="text/javascript"></script><script>(function () { window.onload = function () { var blipClient = new BlipChat(); blipClient.withAppKey('YOUR-APP-KEY') .withEventHandler(BlipChat.LOAD_EVENT, function () { blipClient.sendCommand({ id: "ag0asd0as-daasdasd0a", to: 'postmaster@ai.msging.net', method: Lime.CommandMethod.GET, uri: '/entities' }) .build(); } })();</script> If you need to know more details about the widget, access our repository on GitHub. For more information, visit the discussion on the subject in our community or the videos on our channel. 😃 Related articles How to customize Blip Chat Widget using CSS How to add a bot to a website using Blip Chat How to add Blip Chat to a WordPress site How to add Blip Chat to a Wix site How to identify users coming from an ad campaign
