how-to-create-a-chatbot-for-website

Cada día hay más ruido con el bombo del marketing conversacional. Los blogs, las revistas online y las persuasivas estadísticas de los chatbots te animan a crear tu propio chatbot. Y es que, como crear un chatbot web será decisivo para dominar tu servicio de atención al cliente o la generación de clientes potenciales al siglo XXI.

¿Pero cómo? ¿Cómo crear un chatbot web? ¿Alguien dio un curso a toda la humanidad pero se olvidó de invitarte? ¿Crear un chatbot sin programación? ¿O un chatbot sin código?

No eres un programador. Tampoco eres una corporación con un gran presupuesto para jugar con conceptos futuristas de inteligencia artificial y procesamiento de lenguaje natural.

No.

Tienes que cuidar tu negocio, y tus clientes potenciales.

¿Y qué? ¿Deberías renunciar a todos los increíbles beneficios conversacionales de los que todo el mundo habla?

Por supuesto que no!

Estamos aquí para decirte que hacer chatbots no es una ciencia exacta. Tú puedes hacerlo. Mejor aún, dale una oportunidad al constructor de chatbot adecuado, ¡puedes hacerlo en unos pocos minutos!

No es broma.

Nunca bromeamos sobre los chatbots web 🤖.

Te enseñaremos cómo hacer un bot rápidamente.

Para ser más precisos, te enseñaremos cómo crear un chatbot para tu web. Amigable y personalizado que tus clientes adoran – rápidamente 🤓 – un bot que responda a las preguntas de clientes y que atraiga a clientes potenciales cualificados!

Así que, olvida la complejidad y las quejas sobre las conversaciones robóticas, monótonas y aburridas con las que la gente no se emociona. Aquí hablamos sobre cómo crear un chatbot web, página de aterrizaje (landing page), pop-up o messenger en sólo unos minutos.

¿Preparado? Vamos allá.

Haz tu propio chatbot desde cero (en unos minutos 🤩)

Crear un chatbot web no debería costar un brazo y una pierna.

Tampoco debería requerir contratar a un desarrollador de chatbot. No cuando eres una pequeña empresa, y no cuando necesitas iniciar campañas de chatbot en un chasquido de un dedo.

Usando la plataforma de chatbot de Landbot.io, puedes. Es fácil, es bonito y (sin una pizca de exageración y prejuicio) es divertido!

Déjame mostrarte…

1. Configura tu Chatbot Web (rápido & gratis)

Antes que nada, debes visitar la página principal de Landbot y crear tu cuenta gratuita haciendo clic para inscribirte o pulsando “¡Sí! Crear mi bot”.

crear-tu-propio-chatbot

Después de un proceso de registro indoloro (si es que se puede llamar así), aterrizarás en el dashboard de Landbot.

2. Selecciona el siguiente paso (plantilla vs bot en blanco)

El dashboard te permite elegir entre una variedad de estructuras de chatbot conversacional que hemos creado para ayudarte a empezar:

haz-un-chatbot-landbot-plantillas

O tienes la opción de desarrollar tus propios formatos de bot para tu página de destino, Facebook Messenger o WhatsApp.

crea-un-chatbot-online

En este sencillo tutorial “Cómo crear un bot”, te mostraremos cómo construir un bot usando Landbot desde cero.

3. Crear un chatbot (desde cero – sin programación)

crea-chatbot-para-web

Pasa el cursor por encima de “Create a new Landbot” (Crear un nuevo Landbot), y luego selecciona “Bot en blanco” – te dirigirá al nuevo constructor y editor de bots.👇

chatbot-sin-codigo

¡No sólo es bonito en la superficie! Crear bots con Landbot es extremadamente simple. Por ejemplo, acabas de entrar y ya hay un atractivo mensaje de bienvenida que inicia el flujo de la conversación 💁‍♀️👇.

flow-conversacional-mensaje-bienvenida

El texto en el recuadro resaltado es lo que tu bot dirá al interactuar con un nuevo usuario (junto con el Gif). Eres libre de cambiar esto completamente si lo deseas, nada está escrito en piedra.

Debajo están tus “botones”. Los botones son formas sencillas para que los usuarios puedan responder a tu bot, usando, si quieres, ciertas palabras clave.

Dado que esta es una secuencia de bienvenida, mantenerla simple con una sola respuesta ayuda a acelerar el proceso.

En este ejercicio, crearemos un bot de suscripción para una revista ficticia de juegos online “GameWorld”.

Ajustemos nuestro mensaje de bienvenida y el GIF:

  • Mensaje: Simplemente escribe lo que quieras decir para dar la bienvenida al usuario
  • GIF: Haz clic en el icono del lápiz de edición en la esquina superior izquierda del GIF (¡Puedes buscar “GIF” directamente desde el constructor del bot Landbot!)

hacer-bot-sin-codigo

4. Añade tu primera secuencia

Para añadir una nueva secuencia a tu mensaje de bienvenida, simplemente arrastra la flecha verde:

En este caso, sólo teníamos “¡Hola!” como respuesta del usuario, por lo que deberás arrastrar la flecha verde del botón “¡Hola!”.

A continuación, selecciona “Mensaje simple” como tu nuevo tipo de bloque.

Para editarlo, simplemente escribe tu mensaje.

haz-tu-propio-bot-online

5. Haz una pregunta

En primer lugar, arrastra la flecha verde/punto de nuevo desde tu último bloque de mensajes.

Esto te permitirá crear otro tipo de bloque.

bot-sin-codigo-tipos-bloque

Para nuestro próximo bloque, preguntaremos a nuestros visitantes cómo han llegado a nuestra página web.

Les daremos varias opciones para elegir, y evitar así la interminable variedad de respuestas, manteniendo el control de la conversación!

Así que, para crear una pregunta que pueda ser respondida haciendo clic en una determinada selección de respuestas, selecciona la opción “Buttons” (Botones).

Se abrirá un nuevo bloque.

  • Utiliza el cuadro de texto para escribir la pregunta que tu bot hará al usuario.
  • Para editar las respuestas haz clic en el botón y escribe tu respuesta.
  • Si quieres añadir otra opción de respuesta, haz clic en el pequeño “+” que aparece cuando pasas el ratón por encima del área del botón. También puedes usar el icono 🗑 para eliminar la respuesta.

facil-chatbot-builder-botones

6. Diversificar el flujo de la conversación (cuando sea necesario)

A partir de aquí, tienes una serie de opciones sobre cómo seguir creando tu robot.

En primer lugar, puedes hacer cualquiera de las dos cosas:

  1. Arrastrar la flecha verde de las opciones de respuesta individuales, como “Google” y “Facebook”.
  2. Arrastrar la flecha verde del botón “Default” (Por defecto) para conectar con todas las respuestas anteriores.

Entonces, ¿cuál es la diferencia?

Arrastrando varias flechas de diferentes respuestas, puedes adaptar la conversación a diferentes segmentos de clientes.

Por ejemplo, arrastrando → la flecha verde → de Google. De este modo, podrías preguntar a tus usuarios si es la primera vez que visitan tu web. Por otro lado, para Facebook, puedes crear un flujo de conversación separado, específico para ese segmento de tu tráfico.

¿Por qué deberías hacer eso?

Diferentes segmentos de clientes responden mejor a diferentes mensajes. El tráfico frío de Facebook responderá a una campaña de forma muy diferente que los usuarios que conocen ya tu marca y vienen de Google.

PERO

No queremos hacer eso en este momento. En nuestro ejemplo, queremos saber cómo los nuevos usuarios se enteraron de Game World, pero nuestro objetivo es diferente 👉 obtener una suscripción!

Así que, arrastraremos una flecha desde el botón “Default” (Por defecto) y haremos nuestra siguiente pregunta!

chatbot-para-ti

Hay una serie de opciones de preguntas para elegir, todas adaptadas para ser la herramienta perfecta para tu objetivo.

Para darte una idea general… Además de las opciones de preguntas de Mensaje Simple, Medios o Botón, puedes preguntar por:

7. Desarrollar las ramas de la conversación

¡Aquí es donde las cosas se ponen interesantes! Nuestra última pregunta le dio a los usuarios dos opciones claras:

  • Suscribirse a
  • Más información sobre GameWorld

Naturalmente, el flujo de la conversación debe ramificarse en diferentes direcciones.

Hilo de “Suscribir”

Por otro lado, aquellos que elijan “Suscribirse” podrán completar el proceso como parte de la conversación!

  • Primero, pedimos un nombre seleccionando la opción “Preguntas” y luego “Nombre”.
  • Elige el ajuste o cíñete a la pregunta predeterminada. Cuando termines, haz clic en “Guardar”.

construye-chatbot-sin-codigo

  • Ahora podemos darle al bot un toque más personal incluyendo el nombre del usuario en nuestra respuesta. Arrastra la flecha verde y crea otro campo de “Mensaje simple” y escribe: Gracias, @nombre.

crear-chatbot-online

  • Continúa el hilo pidiendo un correo electrónico.

chatbot-builder-sencillo

¡Y ya tenemos nuestro primer suscriptor! Aunque siempre es un buen detalle dejar que la gente compruebe su información. ¡Es humano hacer errores tipográficos!

  • Inserta un mensaje simple con la información introducida para que el usuario la revise
  • Dales opciones para corregir los campos individuales o para continuar si todo está bien.

crear-chatbot-en-linea

  • Agradece al visitante por suscribirse y…

crear-chatbot-desde-cero

  • Conecta con el bloque final de “Adiós” (es un verdadero placer). Arrastra la flecha verde y desplázate por los tipos de bloques y selecciona “Adiós”.

crear-website-chatbot-gratis

Abre el bloque y personalízalo en el panel que aparecerá a tu izquierda. Podrás:

  • Personalizar el mensaje de despedida
  • Activar los botones para compartir en redes sociales
  • Activar el botón “Comenzar de nuevo” para cualquiera que quiera volver a la conversación
  • Redirige el chat a una URL

chatbot-para-website

En nuestro caso de texto para “GameWorld”, decidimos personalizar y redirigir a los suscriptores a la página principal. De ese modo, podrán empezar a explorar.

¿Lo mejor? ¡Puedes establecer una cuenta atrás para redireccionar!

website-chatbot

Hilo “Learn More”

¡Espero que no te hayas olvidado del hilo “Learn More” (Aprende más)!

Para esta opción puedes:

  • Proporcionar una breve descripción o un resumen convincente de la historia de tu empresa (selecciona “Mensaje Simple”)
  • Mostrar a tu visitante un video corto sobre tu empresa o servicio (opción “Medios”)
  • Enviarles a tu blog o tu página “About Us” (Selecciona “Preguntas” & “URL”)

Decidimos combinar un par de mensajes simples con un video!

Consejo profesional: Si tu mensaje escrito es demasiado largo para un chat, puedes dividir la información (haciendo clic en “+” para crear un nuevo campo – ver más abajo). Para aprender a crear una conversación natural de chatbot, consulta “Cómo crear una conversación de chatbot que convierta”.

como-crear-un-chatbot

Una vez completado el texto, crea un campo más y cambia a los medios. Podrás introducir un enlace de YouTube a tu vídeo.

Después de la introducción, preguntamos de nuevo si el usuario quiere suscribirse o (esta vez) proceder a navegar por la revista.

  • Conecta el botón “Suscribir” al hilo de Suscribir que creaste para la otra respuesta.
  • Conecta “Examinar la revista” al bloque “Adiós” creado anteriormente.

Voila! Ya has terminado!

8. Prueba tu chatbot en “Vista previa”

Ahora puedes probar tu creación directamente en el editor para asegurarte de que fluye como esperabas.

Para ello, haz clic en el botón “Preview” (Previsualización) de tu panel.

Desde aquí, puedes activar directamente el nuevo bot. Sólo tienes que seguir las diferentes cadenas de respuestas y consultas para ver cómo te fue en el proceso de construcción e identificar los posibles errores que deberás corregir.

Incluso puedes probar el bot en una vista de móvil!

Así que, acabamos de crear un chatbot de suscripción que funciona en cuestión de minutos.

Hemos dejado atrás la parte “difícil” 😉

9. ¡Integra tu bot con herramientas que ya utilizas!

Ahora que hemos creado el chatbot y asegurado que el flujo funciona perfectamente, es hora de CONECTARLO a las herramientas que importan y ORGANIZAR la información en tu propia base de datos.

No te preocupes!

Puedes configurarlo para recibir notificaciones por email; en un canal de Slack; actualizar datos en una hoja de cálculo de Google o directamente en Mailchimp; enviar tus prospectos a Salesforce; e incluso crear secuencias de NLP (Natural Language Processing) con la integración de Dialogflow.

Veamos cómo configurar las notificaciones por correo electrónico para cada nuevo suscriptor!

En primer lugar, elimina la conexión de la flecha verde, en el momento de definir el punto en el que quieres recibir la notificación.

interfaz-arrastrar-soltar

 

A continuación, arrastra la flecha verde y desplázate hacia abajo por el menú de tipos de bloque y selecciona “Email”

optimizar-notificacion-email

  1. Introduce todas las cuentas de email donde quieras recibir notificaciones por correo electrónico.
  2. Ajusta el asunto del correo electrónico según tus necesidades
  3. Introduce las variables necesarias en el mensaje de correo electrónico
  4. Haz clic en “Guardar”

 

preparar-notificaciones-email

Arrastra la flecha verde del bloque de correo electrónico al mensaje final para cerrar el hilo.

landbot-builder

¡¡Y hemos terminado!!

Así es como aparece la notificación por correo electrónico:

landbot-email-notificacion

10. Personaliza tu marca de Chatbot para una mejor experiencia

Bien, hemos construido un chatbot en cuestión de minutos. ¿Y ahora qué?

Bueno, el siguiente paso para perfeccionar la conversación es darle un “look” consistente para una mejor experiencia del cliente.

Ya que te tomaste la molestia de crear un chatbot desde cero, ¡mejor que coincida con la marca y el color de tu sitio web!

Así que, ¡hagámoslo! Landbot te da muchas opciones para darle más peso y personalidad a tu marca.

Para mostrar los elementos de diseño, haz clic en el pequeño artista que aparece a mano derecha.

mensaje despedida

¡Te abrirá un nuevo mundo de opciones! En el lado izquierdo verás una gran lista de características de personalización:

personaliza-tu-landbot

  • Plantillas de diseño: Permiten seleccionar atractivas plantillas chatbot de Landbot ya creadas. Estas son útiles cuando necesitas que el robot de chat salga al mundo rápidamente.
  • Colores y fondo: Te dan un control absoluto sobre la combinación de colores de tu bot, por lo que aquí es donde lo personalizarás.
  • Logo y Avatar: Te permite modificar el logo y el texto que aparece en el encabezado del chat así como el avatar del chatbot.
  • Fuentes: Naturalmente, aquí es donde personalizas la fuente de tu bot, lo cual es genial, especialmente si una fuente específica es parte de tu marca.
  • Avanzado: Bueno, si tienes la suerte de saber un poco de codificación o de tener un programador a bordo, aquí podrás hacer los cambios más significativos – el único límite es tu creatividad (y tus conocimientos de programación 🙈)

En sólo unos pocos clics, hemos seleccionado un diseño que nos gustó, ajustado la marca, el mensaje y el logo en el encabezado, así como nuestro avatar:

landbot preview

Una vez que estés satisfecho, recuerda presionar “Guardar y publicar” en la esquina superior derecha!

11. Habilitar un chatbot en tu web (o hacer una página de aterrizaje de chatbot!)

Ahora que nuestro landbot se sometió al necesario cambio de imagen de “marca”, podemos mostrarlo al mundo y empezar a recoger suscriptores y clientes potenciales.

Siento repetirme, pero (una vez más) la plataforma del bot Landbot hace este proceso súper fácil!

En el dashboard de Landbot, fíjate en la parte superior central de tu pantalla y haz clic en la encantadora palabra “Share” (Compartir).

compartir-bot-redes-sociales

Desde aquí, puedes hacer cualquiera de las dos cosas:

  • Compartir el landbot directamente en redes sociales
  • Habilitar el chatbot en tu web

opciones-habilitar-bot

La opción para habilitar tu bot presenta cuatro estilos diferentes:

  1. Página completa: Hace que el robot atraiga al usuario y ocupe toda la pantalla
  2. Popup: El bot aparece en formato popup cuando un visitante llega a tu web (o después de cierta cantidad de segundos)
  3. Embed (Habilitar): Muestra tu bot como una función habilitada en una sección de tu web.
  4. Chat en vivo: El bot se muestra como un mensaje de chat en vivo en la esquina de la pantalla del usuario.

Al hacer clic en cualquiera de los iconos, se mostrará un conjunto ligeramente diferente de instrucciones fáciles de seguir.

Si estás listo para colocar tu nuevo Landbot en tu web, tienes dos opciones:

  1. Copiar y pegar el código en la sección de cada página de tu web en la que quieras que trabaje el bot.
  2. Enviar a tu desarrollador web por email las instrucciones para su habilitación

habilitar-bot-pagina-web

¡Y eso es todo! Una vez que hayas aplicado el código, tu Landbot estará listo para interactuar con los usuarios y recoger valiosa información o ayudarles en su viaje.

Todo esto se ha hecho en menos de 25 minutos. ¿No nos crees? Mira el video:

12. La vida después de aprender a crear un chatbot…

¡Bueno, lo hiciste!

Apuesto a que pensabas que aprender a crear un chatbot sería mucho más difícil…

Una cosa es segura, tu vida nunca será la misma.

Cada vez que necesites crear un formulario, generar leads (o clientes potenciales), diseñar encuestas o publicar solicitudes de empleo, la emoción de crear un bot se apoderará de ti y, a la vez, te permitirá almacenar respuestas rápidas.

¡¿No está mal, verdad?!

Los chatbots se han convertido en una herramienta de marketing digital extremadamente popular y efectiva.

Y ya no están fuera de tu alcance.

No hay necesidad de estudiar sobre el complicado aprendizaje automático y NLP, ni de depender de los caprichos de la plataforma Facebook Messenger para crear un Facebook messenger chatbot.

Sólo déjate llevar y domina el auge de las webs conversacionales.

Landbot te permite construir numerosos bots en muy poco tiempo. Arrastra, suelta, publica y recoge leads! Incluso los complejos bots de conversación son fáciles con la función “Bricks” de Landbot.

Así que espero que te haya convencido.

Los bots de conversación no tienen que ser difíciles de construir. Y hablar con ellos, no tiene que ser ni aburrido ni robótico.

P.D.: Una vez que domines lo básico y estés listo para dar un paso adelante, ¡puedes también usar nuestra integración de Dialogflow para construir un chatbot NLP sin necesidad de codificación!

Related Post