Funcionalidades do Blip Chat Widget 17 de diciembre de 2024 14:25 Actualización Í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 Deshabilitar el historial de mensajes Cómo enviarle mensajes al bot Enviar mensaje con metadatosEnviar metadatos personalizados en todos los mensajes Asociar Blip Chat con un elemento HTML Abrir o cerrar la ventana de chat Eliminar la instancia del Widget Cómo personalizar el widget Cómo ejecutar un comando a través del Widget Cómo definir la URL del chat clusterizado 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" 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> 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. Enviar mensaje con metadatos Este método se utiliza para enviar metadatos ocultos con mensajes. <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> 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" type="text/javascript"><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. 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" 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> Cómo definir la URL del chat clusterizado Para contratos clusterizados fuera del clúster de Take, debemos agregar una propiedad que indique qué URL debe usar según el nombre del contrato. new BlipChat() .withAppKey('CHAVE_DO_BOT') .withCustomCommonUrl('https://NOME_DO_CONTRATO.chat.blip.ai/') .build(); 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. 😃 Artículos relacionados Cómo personalizar Blip Chat Widget a través de CSS Cómo adicionar un bot en un un sitio web utilizando Blip Chat Mensajes activos - Códigos de error Cómo adicionar Blip Chat en un sitio web de Wordpress Cómo utilizar el Click Tracker para saber cuál anuncio 'Click to WhatsApp' es el mejor para tu negocio.