Features of the Blip Chat Widget – Blip | Blip Help

Index:

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" type="text/javascript">

<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" type="text/javascript">

<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" type="text/javascript">

<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">&times;</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" type="text/javascript">

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

How to set the clustered chat URL

For clustered contracts outside the Take cluster, we must add a property indicating which URL should be used based on the contract name.

new BlipChat()

.withAppKey('CHAVE_DO_BOT')

.withCustomCommonUrl('https://NOME_DO_CONTRATO.chat.blip.ai/')

.build();

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