Índice:
-
Cómo definir la información de contacto en la primera iteración
-
Cómo realizar acciones a partir de determinados eventos de Widget
El widget de chat Blip es la forma de introducir el canal Blip nativo en tu aplicación web o móvil. En estos escenarios, puede ser interesante que algunas acciones y comandos se realicen incluso antes de que comience la interacción usuario x bot.
Observa algunas de las características del widget de chat Blip:
Cómo definir la información de contacto en la primera iteración
Esta función te permite definir la información, como por ejemplo nombre, teléfono y email, para el contacto del usuario, incluso antes de interactuar con el bot.
El siguiente ejemplo muestra cómo almacenar el nombre, el email, el teléfono, la ciudad de un usuario y, dentro del campo extras, el 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>
Cómo realizar acciones a partir de determinados eventos de Widget
Si necesitas realizar algún tipo de acción en cualquier evento de Chat, simplemente usa el método withEventHandler informando el tipo de evento a tratar y la acción a realizar.
Los tipos de eventos pueden ser:
- ENTER_EVENT = Ejecutar alguna acción al abrir el chat
- LEAVE_EVENT = Ejecutar alguna acción al cerrar el chat
- LOAD_EVENT = Ejecutar alguna acción al final de la carga del chat
- CREATE_ACCOUNT_EVENT = Ejecutar alguna acción al crear una cuenta de usuario
Observa el ejemplo a continuación sobre cómo utilizar esta función:
<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>
Deshabilitar el historial de mensajes
Con el método withoutHistory es posible evitar que el historial de mensajes intercambiados entre el usuario y el bot se muestre después de que se cargue el bot.
BlipClient.withoutHistory()
Cómo enviarle mensajes al bot
Puedes enviarle mensajes al bot utilizando el método sendMessage, como en el siguiente ejemplo:
<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>
Además, puedes enviar otros tipos de mensajes, incluidos metadatos que pueden ser útiles para su aplicación.
1) Enviar mensaje con metadatos
Este método se utiliza para enviar metadatos ocultos con mensajes.
<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>
2) Enviar metadatos personalizados en todos los mensajes
Este método define metadatos estándar para todos los mensajes enviados al 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 ({
"origem do usuario" : "browser"
})
.build();
}
})();
</script>
Asociar Blip Chat con un elemento HTML
Si necesitas definir un elemento HTML - como un div por ejemplo - y asociarlo con el Widget, debes usar la función withTarget(), pasando el id del elemento en cuestión como parámetro.
<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>
Abrir o cerrar la ventana de chat
Si deseas abrir o cerrar la ventana de chat, basándote en un evento, por ejemplo, puedes utilizar el método toogleChat, alternativamente. Si la ventana está abierta, se cerrará y así sucesivamente.
blipClient.toogleChat();
Eliminar la instancia del Widget
Es posible que desees eliminar por completo la instancia de Blip Chat de tu sitio web. Con el método destroy, destruirás la instancia del widget y la eliminarás del elemento HTML en el que se encuentra.
Para hacer esto, simplemente llama al método de la siguiente manera:
BlipClient.destroy();
Cómo personalizar el widget
Es posible personalizar la interfaz, botón, colores, entre otras opciones disponibles. Si necesitas hacer este tipo de personalización, échale un vistazo a este artículo: Personalización del widget de chat Blip a través de CSS.
Cómo ejecutar un comando a través del Widget
Supón que necesitas enviar un comando a la API de Blip cuando se carga el chat. Para hacer esto, simplemente usa la función sendCommand(), como se muestra en el siguiente ejemplo:
<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>
Si necesitas conocer más detalles sobre el widget, ve a nuestro repositorio en Github haciendo clic aquí.
Para obtener más información, acceda a la discusión sobre el tema en nuestra comunidad o los videos en nuestro canal. 😃