Cómo Crear una App Conversacional sin código

Olvídate de los clásicos chatbots por un momento. Imagina un asistente que pueda hacer algo más que hablar, un asistente que pueda conjurar un elemento de UI más apropiado para la situación... Tales chatbots y sus potentes características no son mitos, se llaman apps conversacionales. Así que, para variar, este artículo te mostrará cómo crear una app conversacional centrándose en añadir los emocionantes elementos de interfaz y fondo que convierten a los chatbots en verdaderas herramientas de flujo de trabajo empresarial.

Un Poco de Contexto

En los últimos años, los chatbots pasaron de la publicidad a la casi oscuridad. Sin embargo, poco a poco, a medida que la tecnología de los chatbots se hizo más sofisticada y más accesible, volvió a la mesa. De hecho, en tiempos de la mayor crisis mundial en décadas - la pandemia COVID-19 - la tecnología de los chatbots, especialmente la del tipo sin código, salió como el héroe del momento.

¿La razón de tal éxito?

Además de los avances en NLP (Natural Language Processing) e inteligencia artificial, que todavía son extraños para la mayoría, los chatbots evolucionaron de interfaces puramente basadas en texto a apps conversacionales. Aplicaciones que no sólo son fáciles de usar, sino también lo suficientemente simples de crear y mantener.

Definición de App Conversacional

Como se explica en nuestra última guía de apps conversacionales, una app conversacional combina la mensajería basada en texto con elementos visuales de interfaz de usuario para una mejor experiencia del usuario. En lugar de un simple intercambio de texto, las apps conversacionales permiten a los usuarios interactuar con botones, carruseles, calendarios, mapas, vídeos, mini formularios, etc. cuando el caso de uso lo requiera.

Al poder pasar de una conversación casual a un flujo estructurado, las aplicaciones conversacionales desmienten el argumento de que las interfaces conversacionales no son la mejor opción para todos los escenarios.

Principales Casos de Uso de Apps Conversacionales

¿Cuándo pueden ser más útiles y ventajosas las apps conversacionales?

Los casos de uso de las apps conversacionales, como con los chatbots, varían significativamente pero hay pocas situaciones en las que estas interfaces conversacionales más estructuradas sean particularmente útiles.

Reservas

Los asistentes conversacionales pueden ofrecer la tranquilidad y el apoyo que los usuarios necesitan cuando intentan reservar un viaje o un lugar. Sin embargo, cuando se trata de la recopilación de datos, muchos consumidores se dieron cuenta que el envío de información sensible, una por una, era taciturno e incómodo. Las apps conversacionales permiten utilizar elementos de interfaz ricos como calendarios, relojes o mini-formularios con campos de datos estructurados para que la transición de la conversación a la conversión sea suave y sin fricciones.

Transacciones

Los chatbots son geniales para conseguir mejorar tus tasas de conversión. Crear una app conversacional permite aumentar la conversión permitiendo que la transacción se realice sin forzar al usuario a abandonar la conversación. Al mismo tiempo, proporcionan una interfaz transaccional familiar.

Recomendaciones de Productos

Cuando se trata de la presentación de un producto, mil palabras no pueden hacer lo que hace una sola imagen o un video. Un chatbot puede hablar todo lo que quiera sobre los beneficios y las grandes características de sus productos, pero no será tan efectivo como ofrecer a sus clientes un estímulo visual. Las apps conversacionales le permiten introducir productos en formas de imágenes, gifs, vídeos e incluso atractivos carruseles.

FAQ/Servicio al Cliente

Cuando se trata de las preguntas frecuentes y el servicio al cliente, es bueno dejar a los clientes espacio para hacer sus propias preguntas. Sin embargo, el texto no siempre es la mejor manera de presentar las respuestas. Por ejemplo, una vez que una app conversacional identifica la intención del usuario, puede presentarle botones o un formulario de chat para ayudar a llegar a la raíz del problema. Alternativamente, la aplicación puede utilizar archivos gif, de vídeo o descargables para ofrecer al usuario la resolución del problema en el formato más relevante posible.

Cómo Crear una App Conversacional Sin Escribir una sola Línea de Código

Dada la variedad de elementos e integraciones que implica crear una app conversacional, y su desarrollo, muchos consideran que es un asunto costoso y que requiere mucho tiempo. Sin embargo, como mencionamos al principio de este artículo, las plataformas low-cost y las de no-code (sin-código) han hecho grandes progresos para hacer esta tecnología accesible y comprensible.

De hecho, hoy en día, es posible crear una app conversacional en cuestión de minutos u horas.

Para demostrarlo, este artículo presentará un tutorial sencillo de cómo crear una app conversacional con una variedad de elementos interactivos de interfaz de usuario sin código.

NOTA: Si deseas seguir este tutorial, haz clic aquí para crear una cuenta gratuita de Landbot!

1. Crea tu “Work Space”

En el tablero de Landbot, haz clic en el botón "Build a Chatbot" en la esquina superior derecha:

Una vez que lo hagas, verás un pop-up de selección de canales. Elige la opción web:

A continuación, serás redirigido a la biblioteca de plantillas de Landbot, que es la forma más rápida de crear una app conversacional. Sin embargo, seleccionar una plantilla superaría el propósito de este tutorial, así que sigue adelante y haz clic en "Start from Scratch" también en la esquina superior derecha:

¡Tadaaa! Lo convertiste en un constructor visual de arrastrar y soltar de Landbot. Echa un vistazo:

2. Personaliza tu Mensaje de Bienvenida

Antes que nada, ajusta tu mensaje de bienvenida. Este mensaje es lo primero que un usuario verá al interactuar con tu app conversacional. Suele ser un buen lugar para establecer expectativas así como para establecer la personalidad del bot.

Consulta el vídeo para conocer los fundamentos de cómo hacerlo:

Decidí seguir con esta configuración:

3. Delinear el Flujo de la Conversación & Asignar el Formato de la Pregunta

Antes de lanzarse al desarrollo de apps conversacionales, es bueno esbozar los datos que deseas recopilar así como el formato en el que deseas que aparezcan.Por ejemplo, para la inscripción de nuestra conferencia, decidimos reunir la siguiente información:Datos personales:

• Nombre
• Apellido/s
• El nombre o apodo preferido para aparecer en la credencial
• Correo electrónico de la empresa
• Número de teléfono
• Cumplimiento de la normativa GDPR

Datos de la compañía:

• Datos de la empresa
• País
• Redes sociales

Otras informaciones:

• Llegada
• Restricción dietética (Sin restricciones, vegetariano, vegano, alergias)

‘Merchandising’:

• Talla de camisa
• Color preferido

Datos transaccionales:

• Pago

Gracias al esquema, tenemos una mejor visión de cómo será el flujo de la conversación y podemos decidir cómo se presentarán estas preguntas.Por ejemplo:

• Datos personales y de empresa: Opción multi-pregunta
• Otras informaciones: Botones (ricos)
• ‘Merchandising’: Botones/Carrusel
• Datos transaccionales: Integración de las franjas

4. Bloque de Datos Personales Multi-Preguntas

Puedes hacer uso de algunas bromas casuales y luego arrastrar una flecha para seleccionar la opción "Multi-Preguntas" del menú:

Un nuevo bloque y un editor que te acompaña aparecerán en el ‘builder’:

El bloque de Multi-Preguntas es una nueva feature que permite hacer a los usuarios varias preguntas a la vez usando un pequeño formulario de conversación. La herramienta es extremadamente flexible, lo que hace que sea fácil de ajustar a cualquier caso de uso posible:

En primer lugar, ajusta el mensaje multi-preguntas para que se ajuste a la ocasión:

A continuación, crear el primer campo definiendo:

• Tipo de pregunta
• Variable para almacenar los datos en
• Etiqueta de campo (field label)

Para ajustes adicionales, haz clic en "Extra options" para ver más opciones.

De las posibilidades, definimos el "texto de ayuda" y cortamos el ancho de la columna a la mitad (¡aunque siempre se puede hacer más!):

A continuación, repite el proceso para el apellido. Para darte una mejor idea, en la parte delantera, este sencillo ajuste aparecerá así:

Pero aún no hemos terminado!Hay más campos de información personal que necesitamos añadir!

Para campos como el correo electrónico, el número de teléfono y la casilla de la política de privacidad asegúrate de elegir el tipo de pregunta (Question type) apropiado. De esta manera, el bot comprobará automáticamente la información para un formato apropiado:

Algunos de los tipos de preguntas pueden tener campos adicionales como la casilla de verificación configurada con "Add options":

La configuración final de Multi-Preguntas tendrá el siguiente aspecto:

5. Usar Variables para Personalizar el Proceso

Gracias a las variables, se pueden utilizar los datos recopilados en tiempo real para personalizar la experiencia de cada usuario:

6. Continuar la Recopilación de Datos con Preguntas Formateadas

El siguiente conjunto de datos a recopilar es la información relacionada con la empresa:

• Nombre de la compañía
• País
• URL
• Redes sociales

Para asegurarte de que los datos estén en el formato correcto, puedes usar cualquier bloque de tipo de pregunta relevante del menú de características:

Por ejemplo, el uso del bloque de preguntas de URL en lugar del bloque de TEXTO genérico asegurará que la conversación no continúe a menos que se envíe una URL de formulario válida.

Ahora, para preguntar por las redes sociales, podemos usar una vez más el bloque de preguntas múltiples:

Y la parte delantera:

7. Usar Botones para Dinamizar las Opciones

Si necesitas que tus usuarios vean rápidamente las distintas opciones, los botones simples son la mejor manera de hacerlo.

En Landbot, al seleccionar el siguiente bloque, elige la opción de bloque "Buttons" y simplemente edita las preguntas y opciones:

Y el usuario podrá seleccionar la opción relevante, rápidamente y sin complicaciones:

Aunque siempre puedes llevar los botones al siguiente nivel, sólo tienes que hacer clic en los tres pequeños puntos de la esquina superior derecha del bloque para abrir un editor de botones avanzado:

Haz clic en el icono de configuración para abrir una sección de edición para cada uno de los botones. Allí puedes cambiar el estilo de los botones para incluirlos:

• Icon
• Emoji
• Imagen

Por ejemplo, selecciona la opción de emoji y asigna uno para cada opción de botón:

En la parte ‘front end’, los botones de emoji se verán de la siguiente manera:

8. Configurar la Opción Múltiple

Sin embargo, sólo hemos raspado la superficie del editor avanzado del botón. Si te desplazas hacia abajo, verás que le ofrece la posibilidad de:

• Redefinir la alineación de los botones
• Mostrar los botones como opciones de búsqueda
• Permitir la selección de opciones múltiples
• ¡Y guarda la respuesta del usuario bajo una variable única como con el resto de los bloques!

Hasta ahora, hemos salido de cada bloque de Botones a través de la opción púrpura DEFAULT porque no hubo desviación de flujo basada en las respuestas del usuario. Sin embargo, ahora, necesitaremos un poco más de información de los que seleccionan "Soy Alérgico" (I’m Allergic).

Por lo tanto, esta vez, dibuja una flecha del botón "I’m Allergic" y crea otro bloque de botones Y activa la opción de elección múltiple. Después de todo, una persona puede ser alérgica a más de una cosa:

Cuando un usuario llega a este punto de la conversación, se le presentará una tabla de opciones múltiples muy sencilla:

De esta manera, los usuarios que elijan una de las tres primeras opciones podrán continuar directamente, y sólo aquellos que tengan una alergia completarán este paso extra.

9. Crear un Carrousel

A continuación, es hora de pasar a la recopilación de datos para el ‘merchandising’:

Además de los botones clásicos, de imágenes, de iconos o de emoji, puedes cambiar las cosas utilizando la función de carrusel (ideal para la visualización de productos). En el constructor de Landbot, el carrusel se puede encontrar bajo el nombre de "Picture Choice". La configuración es muy similar a la del trabajo con botones. Necesitas definir el título, la imagen y (si es relevante) una URL:

Usando esta característica, la experiencia final del usuario se verá así:

10. Insertar el Elemento de Transacción

Introducir un elemento transaccional en la conversación nunca ha sido tan fácil. Todo lo que necesitas hacer es seleccionar Integración de Stripe del menú y configurar la conexión:

Sin embargo, esta disposición sólo aparece si estás configurando una nueva cuenta. Si ya tienes una, todo lo que tienes que hacer es:

• Definir la cantidad a pagar (puede ser fija o @variable en función de las elecciones del usuario, por ejemplo, en función de lo que se ha añadido al carrito)
• Selecciona la moneda en la que se cobrará el importe
• Definir el mensaje que aparecerá con el formulario de pago

En la parte 'front end', el pago de Stripe aparecerá de la siguiente manera:

11. Integrar, Integrar, Integrar

Hasta ahora, han visto elementos que mejoran la experiencia del usuario final.

Sin embargo, las apps conversacionales pueden hacer por tus flujos de trabajo internos tanto como lo hacen por el UX.

Gracias a las integraciones listas para usar o a la configuración simplificada de webhook, puedes conectar tu aplicación conversacional a tu flujo de trabajo existente sin problemas.

Por ejemplo, una de las formas más fáciles de gestionar la exportación, importación y actualización de datos con Landbot es utilizar la integración de Google Sheets:

De manera similar, puedes conectarte fácilmente a Mailchimp, Slack, Salesforce, etc.

Sin embargo, muchos aprovechan la configuraciónsimplificada del API webhook para conectar sus apps conversacionales con herramientas como Airtable:

Si no te apetece configurar un webhook tú solo, siempre puedes consultar la biblioteca de ‘Bricks’ de Landbot. Los ‘Bricks’ en Landbot funcionan como plugins. Son fracciones de flujo reutilizables. Puedes crear los tuyos propios o usar los disponibles en la biblioteca pública:

Por ejemplo, el ‘brick’ de validación de correo electrónico ya viene con un webhook preestablecido que se conecta a una base de datos de verificación de correo electrónico. Las notas dentro del ‘brick’ te guían para hacer los más pequeños ajustes para personalizarlo según tus necesidades.

Lo lograste!

Aprender a crear una app conversacional nunca ha sido tan simple. Puedes darles vida fácilmente en cuestión de horas o incluso minutos.

Este tutorial muestra cómo crear una app conversacional para la web, pero puedes ajustar fácilmente la configuración de una aplicación de mensajería como Messenger o WhatsApp (respetando sus limitaciones de interfaz de usuario, por supuesto). Por lo tanto, si quieres probarla, ¡sólo tienes que registrarte gratis y probar todas las funciones avanzadas como parte de tu prueba gratuita!