Cada vez hay más páginas que usan un chatbot para complementar sus servicios de atención al público. Existen muchos servicios sencillos de integrar y dependiendo de tus necesidades, puedes encontrar herramientas más potentes (de pago) o más sencillas.
Plataformas como Tidio, Intercom, LiveChat, Drift, ManyChat, Zendesk o HubSpot entre otras ofrecen estos servicios con diferentes herramientas de integración. La mayoría son de pago, y en algunos casos bastante elevadas, ya que forman parte de servicios más completos, como es el caso de Zendesk por ejemplo. Es por eso que vamos a ver opciones más abiertas, simples, que te permitirán añadir más funciones en el futuro, y que son gratuítas, o prácticamente gratuítas.
Qué plataforma elegir para integrar un chat inteligente a tu web
Vamos a ver un modelo de chatbot que nos podemos montar de forma sencilla y que nos encaja en todo tipo de web, tanto en tiendas Shopify, en Wordpress o en Wix entre otras, y que podrás montar en pocos pasos. En este caso, vamos a ver cómo crear el chatbot con Telegram y ChatGPT usando Make (antes Integromat).
Existen alternativas a Telegram, más adelante veremos el mismo proceso con Whatsapp, y lo mismo pasa con Make, ya que Zapier o N8N son opciones igual de válidas. Estas son sus ventajas:
- Te sale gratis: Si usas una versión de OpenAI gratuíta tendrás un chatbot muy completo sin gastar nada, ya que Telegram es totalmente gratis actualmente.
- Automatización: Puedes programar respuestas a medida.
- Potencia y personalización: Además del chat puedes añadir más disparadores y funciones y crear una herramienta potente que permita gestionar y convertir en clientes potenciales a los usuarios que consultan tu chat.
- Modelo estándar: El chat funciona con prácticamente todo tipo de páginas web. Desde las que necesitan que se incruste a través de un script a losplugins de Wordpress.
Evidentemente, también tiene algunos contras, estos son los que me suelen llamar la atención y a los que intento poner solución:
- Uso limitado: El límite de acciones gratuitas de GPT-3 tiene un límite de uso, por lo que si el volumen de mensajes es alto, podrías quedarte sin créditos gratuitos rápidamente. Con una opción de pago básica puedes cubrir un gran volumen.
- Necesitas mayores conocimientos técnicos: La integración no es tan simple como otras plataformas de chat, pero es muy flexible. Bueno, no es simple pero tampoco es nada del otro mundo. Vamos a ver el proceso al detalle!!
Configuración de paneles para tu ChatBot
Vamos al lío. Para montar esta estructura sólo necesitas tu web, cuenta en Telegram, en OpenAI y en Make (antiguo Integromat). Vamos a ver cómo crear las herramientas en cada lado:
- Crear el chat en Telegram: Abre Telegram y busca BotFather. Es el bot oficial que permite crear y gestionar otros bots de Telegram. Pulsa el botón Nuevo Robot (/newbot) y sigue estos pasos:
- Elige un nombre para tu bot.
- Elige un nombre de usuario único para el bot (que debe terminar en «bot», tipo mimejorbot_bot).
- BotFather te dará un token de API que necesitarás más adelante para conectarte con Telegram desde Make o Zapier.
- Crea tu clave API en ChatGPT: En tres pasitos la tienes, te los detallo:
- Accede a tu cuenta ChatGPT, si no tienes la creas.
- Ve a la sección de API Keys y genera una nueva clave de API. Los pasos vienen detallados en la imagen (la puedes ampliar) y son estos: Create new secret key -> Create secret Key (son algo redundantes)-> Y la la puedes copiar. Suelen empezar por Sk-
Crear el Flujo de Trabajo en Make o Zapier
Ahora que ya tenemos las cuentas, vamos montar la estructura dentro de nuestro constructor, en este caso vamos a usar Make, crearemos un escenario nuevo, y este es el proceso a seguir después:
- Añadir un módulo de Telegram: Vamos a usar el disparador Telegram Bot->Watch Updates y la vamos a enlazar usando la clave API generada anteriormente.
- Enviar el mensaje a OpenAI:Añadimos un módulo Open AI -> Create a completion (Los modelos GPT-3 para consumir poco crédito van bien). Enviaremos el campo mensaje text para generar la respuesta, puedes añadir una pequeña introducción.
- Enviar la respuesta a tu canal Telegram: Añade un módulo para enviar la respuesta generada por GPT-3 de vuelta al char con «Telegram bot -> Send a text message o reply»
Con estos tres pasos tienes la estructura montada y quedan como se muestra en la imagen del esquema. es aconsejable testar el escenario antes de integrarlo en la web.
Integración del chatbot en tu web
Ahora que tienes el flujo de trabajo listo, veamos cómo integrar este chatbot en WordPress, Shopify o Wix te las defino a contnuación:
- Wordpress: Usa un plugin de Telegram como WP Telegram o Telegram Chat. Te permiten incrustar un botón de Telegram en cualquier parte de tu sitio y dirigir a los visitantes directamente a tu bot. También puedes incrustar un botón personalizado en el código de tu sitio, aunque la primera opción es más cómoda.
- Shopify: Añade y configuta un botón de Telegram a tu tienda Shopify. Asegúrate de que carga el canal creado previamente.
- Wix: Carga un Widget de Telegram. Ve a la sección de Añadir > Botón > Enlace y pon el enlace directo a tu Telegram Bot (por ejemplo, https://t.me/minuevo_bot).
Afina las respuestas de tu chatbot
Si no afinas un poco, obtendrás un chatbot automatizado, pero sus respuestas serán malas de narices. Así que vamos a ver cómo podemos afinar las respuestas y así tener una herramienta potente.
Este proceso requiere proporcionarle a OpenAI la información específica de tu sitio web (como los plazos de entrega, condiciones de compra, detalles de productos, etc.) de manera que pueda dar respuestas detalladas basadas en esas URLs. Vamos a verlo paso a paso:
- Obtén las URLs relevantes: Necesitas tener contenido que detalle tus plazos de entrega, condiciones de compra, preguntas frecuentes (FAQ), condiciones de devolución etc.. Tipo https://mibestweb.com/condiciones.php
- Añade además url de producto: Esta parte permitirá al chat responder sobre cada producto concreto de forma más específica. Puedes pasar la URL de la página desde la que el usuario hace la consulta.
Si el usuario menciona cualquier cosa relacionada con pedidos, condiciones etc, puedes filtrar y usar la URL de condiciones. Si el usuario pregunta sobre el «producto», filtras la consulta y obtienes la URL del producto específico.
El prompt sobre las condiciones quedaría algo similar a esto:
«Por favor, lee la página de condiciones de compra en esta URL: {{URL-condiciones}} y responde a esta pregunta: {{Pregunta del usuario}}».
Para generar una respuesta sobre cualquier producto específico, te quedaría un prompt similar a esto:
«Lee la página de detalles del producto en esta URL: {{url_producto}} y responde a la siguiente pregunta: {{pregunta_usuario}}»
Capturar la URL de la página en WordPress o Shopipfy y enviarla a Telegram
Ya puestos vamos a hacerlo bien. Tanto WordPress como Shopipfy te permiten capturar las url en las que está el usuario de diferentes formas. Tidio por ejemplo es compatible con ambas. Sólo tienes que configurar el complemento e instalar un pequeño código para Wordpress:
// Captura la URL de la página actual en Wordpress
tidioChatApi.on(‘message’, function(message) {
var pageUrl = window.location.href; // Captura la URL de la página
message.pageUrl = pageUrl; // Guarda la URL en el mensaje
});
El prompt podría quedar algo así:
«El usuario está consultando sobre el producto en esta URL: {{message.pageUrl}}. Responde a la siguiente pregunta sobre el producto: {{message.text}}»
Versión de cófigo para Shopify:
// Captura la URL de la página actual en Shopify
var pageUrl = window.location.href;
// Si el usuario está viendo un producto específico, agrega la URL como un atributo del mensaje
tidioChatApi.on(‘message’, function(message) {
message.pageUrl = pageUrl; // Pasa la URL al mensaje
});
Esta sería otra sugerencia de prompt:
«El usuario está preguntando sobre el producto en esta URL: {{message.pageUrl}}. La pregunta es: {{message.text}}. Proporciónele una respuesta detallada sobre el producto.»
Conclusiones finales
Con esta combinación puedes crear un chatbot de forma gratuíta. Dependiendo de la configuración de las preguntas y respuestas podrás obtener un mejor rendimiento y sobre todo dar soporte 24/7 a tus clientes de forma eficiente. Espero que vaya bien para tu proyecto.
Hola, mi nombre es Paco Gayet.
Soy programador, analista de sistemas y diseñador gráfico y web. Trabajo desde 2007 en diferentes proyectos con mayor o menor éxito. Entre los servicios más destacados que he prestado a diferentes empresas podemos destacar los siguientes:
Diseño web
Mediabuying para redes
Social media
SEO
SEM
Desarrollo de aplicaciones
Gestión de Ecommerce
Actualmente realizo diferentes tareas para varias empresas en las que destacan la promoción y gestión de herramientas de atención al cliente. En mis pocos ratos libres dedico un pequeño esfuerzo a desarrollar proyectos personales como este que tenéis delante y en el que intento ofrecer un poco de información y ayuda a otros diseñadores y desarrolladores.
