Menú Cerrar

Cómo Crear e Integrar un Chatbot para tu Página Web: Paso a Paso | Tutorial Chatbot WordPress

¿Quieres brindar un servicio de atención al cliente excepcional las 24 horas del día, los 7 días de la semana en tu sitio web? ¡No busques más! Descubre cómo crear un chatbot personalizado y cautivador que se convertirá en el asistente virtual perfecto para tus visitantes. Con un chatbot, podrás ofrecer respuestas inmediatas, resolver consultas frecuentes y guiar a tus usuarios de manera eficiente, todo sin la necesidad de contratar personal adicional. Impulsa la satisfacción del cliente, aumenta la retención y mejora la experiencia de navegación en tu sitio web con un chatbot que trabaja incansablemente para satisfacer las necesidades de tus usuarios. No te quedes atrás, aprende cómo crear un chatbot para tu sitio web y lleva tu atención al cliente al siguiente nivel.

Para tener un chatbot en tu página web, puedes usar un software o pedir un programador que lo cree por ti. En este caso, iremos con la primera opción, ya que es mucho más económica y tiene más sentido que realizar un chatbot des de 0 para tu página.

En este caso, vamos a usar Tidio, una solución todo en uno para chatbots donde tiene muchísimas opciones de personalización, y muchos aspectos que puedes hacer con este chatbot para dar una experiencia personalizada a tus usuarios. Además de la fácil integración que tiene con la mayoría de webs, ya sea que uses wordpress o shopfiy. O si tienes una web personalizada, también podrás implementar este chatbot.

Si tienes problemas para implementar tu mismo el chatbot, te recomendamos que uses un freelancer. En plataformas como Fiverr podrás encontrar a muchos profesionales que te implementarán el chatbot con la personalización que quieras por un precio muy asequible. Así que si no te quieres complicar, es una gran opción usar Fiverr y no tener que preocuparte.

Plataforma: Fiverr
Mínimo.: 10€
Países: Internacional

Mejor Plataforma de Servicios
Excelencia Profesional

5/5

Plataforma: Fiverr
Mínimo.: 10€
Países: Internacional

Mejor Plataforma de Servicios
Excelencia Profesional

5/5

Tidio es totalmente gratuito para usar sus funciones básicas y principales, que en muchos casos es suficiente. Si quieres un aspecto más personalizado y con diferentes integraciones, Tidio tiene diferentes rangos de precios, des de 29 euros al mes. 

Crea un mensaje de bienvenida en tu web

Para crear un chatbot en nuestro sitio web, vamos a utilizar Tidio. Tidio es un constructor de chatbot que hace que sea realmente fácil de configurar chatbots para su sitio web.

Crear cuenta gratuita de Tidio

Después de crear una cuenta, verás tu panel de control Tidio:

A continuación, puedes hacer clic en «Chatbots» en el menú de la izquierda y aquí verás que Tidio ha creado automáticamente un chatbot para ti:

Pero, no vamos a usar ese, así que puedes hacer clic en tres puntos y luego pulsar el botón Eliminar:

Y ahora vamos a crear nuestro propio chatbot. Un chatbot en Tidio es básicamente un flujo de chatbot. Así que si quieres crear un flujo de chatbot, necesitas crear un chatbot.

(Con algunos otros creadores de chatbot puedes tener un chatbot con múltiples flujos, pero con Tidio, un chatbot sólo tiene un flujo de chatbot).

Así que vamos a hacer clic en Añadir desde cero en la esquina superior derecha:

Y luego tenemos que elegir un disparador. Un disparador es un evento que inicia la conversación. Así que, por ahora, vamos a elegir que los visitantes hagan clic en el icono del chat:

Tidio creará automáticamente un flujo para nosotros con este disparador. A continuación, podemos hacer clic en el disparador en la parte superior y podemos determinar la limitación del disparador. Por lo tanto, es necesario establecerlo en Ilimitado, para que se dispare este mensaje cada vez que un usuario haga clic en el icono de Chat:

Cuando hayas configurado el disparador correcto, podemos añadir una Decisión a nuestro flujo arrastrándola en el constructor de flujo visual:

Una Decisión es un elemento que puede utilizar para hacer una pregunta a su usuario y luego el usuario puede responder haciendo clic en un botón (también llamado respuesta rápida).

Digamos que somos una empresa de software y queremos ayudar al usuario a conocer nuestra empresa. Entonces, podemos hacer la pregunta «Hola, ¿en qué puedo ayudarle?» y añadir dos respuestas rápidas: «¿Qué es Software Comp?» y «Precios de Software Comp»:

De este modo, cada vez que un usuario haga clic en el icono del chat, el chatbot formulará esta pregunta y mostrará las dos respuestas rápidas.

Lo siguiente que tenemos que hacer es añadir dos respuestas para cuando el usuario haga clic en uno de los botones. Sólo tenemos que arrastrar el elemento Mensaje y conectarlo al elemento Decisión:

Cuando conectes el elemento Mensaje al elemento Decisión, Tidio te preguntará automáticamente cuál es la respuesta rápida:

Así, para la respuesta «¿Qué es Software Comp?», estableceremos un mensaje de texto simple:

Y luego podemos añadir otro mensaje de texto para el «Precio de Software Comp», de modo que el flujo se parece a esto:

Ahora, sólo tienes que pulsar Guardar y Activar tu chatbot:

¡Y tu chatbot estará listo para lanzarse en tu sitio web!

Cómo añadir Tidio a tu sitio web

Ahora que hemos creado un flujo de chatbot, necesitamos añadir Tidio a nuestro sitio web.

Para ello, tienes que ir a Configuración y hacer clic en Apariencia:

Aquí, puedes establecer un montón de ajustes diferentes para el widget de tu sitio web, como cambiar la posición, la etiqueta del botón, los colores y mucho más.

Lo único que recomiendo encarecidamente es desactivar la Encuesta Pre-Chat, porque esto hará algunas preguntas antes de que el usuario pueda utilizar tu chatbot y generalmente a los usuarios no les gusta esto.

Cuando hayas establecido la configuración correcta para el widget de tu sitio web, tienes que ir a Instalación y copiar el código en Javascript:

Y como sé que muchos de vosotros utilizáis WordPress, os mostraré cómo podéis añadirlo a vuestro sitio web de WordPress.

Antes de continuar con la guía, si no está familiarizado con usar código en tu sitio web, te recomiendo contratar a un desarrollador para hacer esto. En Fiverr, ya tiene desarrolladores que pueden hacer esto por tan poco como $ 5. Así que visita la descripción para crear tu cuenta con Fiverr y ahorrarte de dolores de cabeza en manos de un profesional.

Si vas el back-end de tu sitio web de WordPress, es necesario hacer clic en Plugins, buscar «Instalar Headers and Footers» y haz clic en Instalar ahora y Activar:

Después, si vas a Ajustes -> Insertar Headers and Footers, tenemos que pegar nuestro código Tidio en la sección «Scripts in Footer»:

Y ya está. Ya has añadido con éxito Tidio a tu sitio web. Y si lo has hecho bien, deberías ver un pequeño icono de chat en la parte inferior derecha de tu sitio web:

Y cuando hagas clic en él, aparecerá el mensaje de bienvenida que configuramos en la sección anterior:

Enviar mensajes de bienvenida personalizados por página web

Tu chatbot ya funciona en tu sitio web. Pero, ¿cómo podemos sacarle el máximo partido?

Observando las páginas de mayor conversión. Una página de alta conversión es una página en la que desea convertir un cliente potencial en cliente.

Un ejemplo de página de alta conversión es la página de precios. Y una buena forma de convertir un cliente potencial en cliente es enviándole un mensaje de bienvenida personalizado con tu chatbot.

Así que, si volvemos a Tidio, podemos crear un nuevo flujo de chatbot. Sólo tienes que seleccionar chatbots en el menú de la izquierda y hacer clic en Añadir desde cero:

Y luego añadiremos un disparador a este flujo de chatbot, que iniciará la conversación. Como queremos mostrar un mensaje en una página específica, seleccionamos el activador Visitante abre una página específica:

Una vez creado el flujo, tenemos que hacer clic en el disparador, rellenar la URL de la página de precios y establecer la limitación del disparador en Ilimitado:

Aquí también añadiremos un elemento Decisión y preguntaremos al usuario si desea más información sobre los precios:

Y luego podemos determinar la respuesta para el botón Sí:

Y otra para el botón No:

Para que nuestro flujo se vea así

Y como antes, ¡sólo tienes que hacer clic en Guardar y Activar tu chatbot!

Una pequeña cosa que tenemos que añadir a nuestro primer flujo (mensaje de bienvenida) es que no queremos que este flujo se active en la página de Precios. Así que puedes volver al flujo Mensaje de bienvenida y añadir una condición URL actual después del trigger:

Fíjate que después de la Condición he puesto el flujo a «No», porque queremos comprobar si no estamos en la página de precios.

Y luego comprobar si la URL actual es igual a la página de precios:

Ahora, el mensaje de bienvenida no se activará en la página de precios cuando alguien haga clic en el icono del chat.

Así, cuando visite la página de Precios en su sitio web, se mostrará automáticamente este mensaje:

Y cuando haga clic en uno de los botones, se iniciará la conversación:

Ya está funcionando.

Utiliza el chat en vivo cuando tu chatbot no entienda al usuario

La última cosa que veremos, es cómo puedes activar el chat en vivo cuando alguien quiere hablar con un humano.

Si volvemos a nuestro mensaje de bienvenida, podemos añadir otra respuesta rápida, llamada Hablar con un humano:

Y establecer una respuesta de texto cuando alguien haga clic en esta respuesta rápida:

Lo que tenemos que hacer es notificar a un agente de chat en vivo que tiene que responder al usuario. Para ello podemos arrastrar el elemento Notify Operator y conectarlo al mensaje de texto:

Y añadir un mensaje que el agente de chat en vivo ve cuando recibe esa notificación:

Ahora sólo tienes que pulsar Guardar y esto se publicará.

Cuando un usuario haga clic en el botón Hablar con un humano, el agente de chat en vivo recibirá automáticamente una notificación del navegador:

Y entonces podrá responder con el chat en vivo de Tidio:

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *