Índice:
Canales como Facebook Messenger y Blip Chat admiten el tipo de contenido de enlace web con targets especiales: Self, SelfCompact y SelfTall. De esta forma, es posible mostrar la página web dentro de la propia conversación, sin que el usuario tenga que acceder a un navegador.
Esta es una estrategia muy interesante para los bots que necesitan solicitar datos complejos a los usuarios. Imagínate, por ejemplo, lo difícil que es solicitar a un usuario, solo a través de texto, un conjunto de elementos o incluso un intervalo de fechas. Además de ser difícil manejar todos los formatos de fecha posibles, que alguien puede escribir, es muy frustrante para el usuario ingresar varios caracteres para configurar una fecha compleja.
En este artículo explicaremos, paso a paso, cómo crear una página web y usarla dentro de una conversación de Blip Chat, para solicitar una fecha al cliente.
Para este ejemplo, necesitará:
- Página web (HTML, CSS y JS), debidamente construida, con un elemento datepicker (selector de fecha). Haz clic aquí para descargar una página de ejemplo;
- Agregue un script Javascript (blip-chat-extension) para permitir que tu página envíe contenidos a tu bot;
- Punto final público (con https), que apunta a tu página; (si solo deseas probar, usa el enlace: https://blip-weblink-demo.herokuapp.com/);
- Un bot que envíe el tipo de contenido Weblink con el enlace de la página creada en el paso 1 (usando uno de los destinos: Self, SelfCompact y SelfTall).
Detallando cada paso:
1. Página web
Crea una página web que contenga los componentes necesarios para tu caso de uso. En el ejemplo de este artículo, la página web utilizada (ver imagen a continuación) contiene solo un selector de fecha y un botón de envío. El usuario debe elegir una fecha y luego hacer clic en el botón enviar. Al hacer clic en el botón, la ventana se cerrará y la fecha se enviará al bot. (Ve a la página de ejemplo haciendo clic [a]en este enlace).
Tienes total libertad para usar cualquier componente en tu página web, pero recuerda que los componentes deben ser compatibles con los navegadores más diversos (desktop y mobile).
Otro consejo importante es crear páginas más neutras, sin muchos colores y efectos. Esto evita que el usuario sienta una gran diferencia entre todo el contenido nativo (texto, imágenes, etc.) y el contenido personalizado que estás creando.
2. Agrega la secuencia de comandos blip-chat-extension a la página creada en el paso anterior
Además de mostrarle el contenido al cliente, probablemente también será necesario intercambiar información entre la ventana web y el bot. En este caso, será necesario utilizar la biblioteca de extensiones blip-chat-extension.
En nuestro ejemplo, cada vez que el usuario elige una fecha y hace clic en el botón Enviar, el bot recibe un mensaje con la fecha elegida por el usuario. El fragmento de secuencia de comandos a continuación utiliza el objeto webView para enviar un mensaje en la ventana de conversación en el momento en que el cliente hace clic en el botón Enviar.
<script>
vardatepicker = $('#datepicker').datepicker({
uiLibrary:'bootstrap4'
});
//Carrega webview extensions
var webView = newBlipChatExtension()
$('#button').click(function () {
vardate = datepicker.value();
console.log(date);
$('#value').text(date);
//envia mensagem de texto simples. (Usuário consegue visualizar a mensagem na janela de conversa)
webView.sendMessage(date);
//finalizar webview
webView.closeWebView();
})
</script>
Observación: No olvides agregar la tag script que importa el paquete blip-chat-extension.
<script src="https://unpkg.com/blip-chat-extension@1.0.4" type="text/javascript">
Además de enviar datos desde la página web al bot, también es posible crear una regla que defina cuándo se puede o no cerrar la ventana. En este ejemplo, el usuario no puede cerrar la ventana hasta que se proporcione la fecha. El siguiente código ilustra este proceso.
//Método que define as regras para fechamento da webview
webView.overrideOnClose(function () {
if (datepicker.value() != '') {
//Permite fechar a webiview
return true;
}
alert('Escolha uma data antes de fechar a Webview');
//Impede o fechamento da webiview
returnfalse;
})
3. Crear un endpoint (URL) para tu página
Para poder usar tu página web dentro de la conversación del bot, deberás acceder a la página a través de una URL pública. Este punto final debe ejecutarse necesariamente en un entorno seguro a través de HTTPS.
Para el ejemplo de este artículo, la página web se ejecuta en la URL: https://blip-weblink-demo.herokuapp.com/.
4. Crear un bot que envíe un vínculo web
Finalmente, para que el usuario final reciba una página web, es necesario enviar contenido del tipo Weblink. Para hacer esto, accede a tu bot, selecciona Builder, elige un bloque y agrega contenido de Weblink.
[a]https://blip-weblink-demo.herokuapp.com/
Para obtener más información, acceda a la discusión sobre el tema en nuestra comunidad o los videos en nuestro canal. 😃