Cómo añadir un GPT a cualquier Web en Minutos 💬 Tutorial FÁCIL SIN usar Código ni APIs

Los chatbots, programas informáticos que simulan mantener una conversación con las personas para responder sus preguntas de forma automática. Esto puede parecer algo relativamente nuevo, ya que ChatGPT popularizó este tipo de conversaciones hace apenas 2 años, pero lo cierto es que esto lleva existiendo desde los años 60. Aunque ahora, al conectarlo con inteligencia artificial, podemos automatizar de una forma más humana conversaciones que cumplan objetivos como la venta de productos, resolver cualquier duda, cerrar citas y, en definitiva, cualquier objetivo que le digamos. Para hacer esto hay muchas alternativas, pero ¿cuál es la más fácil y rápida para ponerla en marcha? En este vídeo la estaremos viendo paso a paso para que puedas incluirla en cualquier web, ya sea tuya o para que puedas ofrecerla como un servicio a cualquier empresa. Todo el proceso que estaremos viendo para conseguir esto evitaremos el uso de la programación e incluso de las APIs. Además, lo podrás empezar a probar de una forma totalmente gratuita. ¿Suena bien? Pues veamos cómo hacerlo. La nueva inteligencia artificial que estaremos viendo nos va a permitir crear una especie de GPTs, o incluso conjunto de estos, que podamos incluir a cualquier sitio web para automatizar la mayoría de las consultas. Y esto es posible gracias a la nueva funcionalidad de la plataforma de Chatfuel, que es esta plataforma de aquí. Antes de continuar, te recuerdo que todos los enlaces e información lo vas a tener abajo en la descripción, y cuando cliques sobre el primer enlace aterrizarás a esta página de aquí, desde donde podemos ver su enfoque de escalar negocios con lenguajes conversacionales que se apoyan en la inteligencia artificial. Para los más activos del canal, quizá ya conozcáis esta plataforma, ya que si me voy al apartado de canales, podemos ver que esta inteligencia artificial la vamos a poder incluir en WhatsApp, tal y como ya estuvimos viendo en detalle en este vídeo de aquí. Aunque ahora han sacado una nueva funcionalidad en donde vamos a poder integrar toda esta inteligencia artificial directamente a cualquier sitio web. Así que para ello yo le voy a dar a este canal, y más allá de utilizarlo en el sitio web, también haremos algo un poco más sofisticado respecto al anterior tutorial que te acabo de comentar. De aquí, punto que debes de tener en cuenta es que este chatbot integrar en el sitio web literalmente como está aquí, ya que si le doy un clic y empiezo un chat, pues podríamos empezar a tener una conversación muy similar a como lo hacemos en redes sociales como Messenger, solo que ahora lo podremos integrar donde queramos. Si sigo deslizando hacia abajo, como podemos ver por aquí, vamos a poder cumplir diferentes objetivos que estaremos viendo a lo largo del vídeo. Pero antes de saltar a la plataforma, si me voy abajo del todo, debes de tener en cuenta que esta plataforma la vas a poder utilizar de forma gratuita para automatizar tus 50 primeras conversaciones. Y teniendo en cuenta que toda la conversación que pasa durante 24 horas solamente contabiliza como una conversación, pues realmente aquí tenemos para bastante. Así que para poder utilizarla voy a clicar en Get Started, It's Free, y ahora desde aquí nos registraríamos, en mi caso con la de Google que utilizo en todos los tutoriales. Una vez tengamos esto, aterrizaremos a esta página de aquí desde donde podremos empezar a crear nuestro proyecto simplemente clicando en este botón de crear nuevo. Se nos abriría este espacio de trabajo, así que le damos un clic, y ahora desde aquí vamos a poder empezar a crear nuestro chatbot. Una de las principales diferencias que tenemos al ponerlo en la web en lugar de una red social es que cualquier usuario va a poder utilizarla sin necesidad de crearse una cuenta ni loguearse, ya que este empezará a funcionar una vez el usuario clique en la animación del chat. Una vez haga esto, pues nosotros podemos poner qué queremos que pase luego. Simplemente dándole al más, nosotros vamos a poder por un lado incluirle un texto estático, como por ejemplo para darle la bienvenida, o directamente podemos irnos a su apartado de inteligencias artificiales, ya que desde aquí vamos a tener inteligencia artificial enfocada a 6 objetivos distintos que además vamos a poder orquestar entre ellos, que además es lo que estaremos haciendo en este vídeo. Para ello, yo estaré creando un chatbot a modo de ejemplo para mi página web personal, que tengo por aquí. Que por cierto, si te gustaría saber cómo podrías crear la tuya, por aquí te dejo el vídeo. Y aquí realmente yo voy a querer un chatbot que me ayude a diferentes cosas. Por un lado, poder resolver posibles consultas de suscriptores, y también que me pueda ayudar con la venta de la consultoría que tengo por aquí con estos diferentes productos. Así que para hacer esto voy a volver a Chatfuel, y ahora voy a empezar con una inteligencia artificial quien simplemente se encargue de recibir los nuevos mensajes y que se encargue de orquestar cuál es el objetivo que tiene el usuario para llevarlos posteriormente a otros bots de inteligencia artificial. Para hacer esto sería esta que se llama Manage New Message, y al clicarlo aquí tendríamos que rellenar con toda la información de nuestro negocio. Lo primero de todo sería darle un nombre, así que yo aquí le voy a llamar Alejabot. También le vamos a poder poner un idioma, en mi caso el español. Nombre de la compañía pondría el mío. Y ahora le pondríamos sobre qué va este negocio. En mi caso le digo que soy un creador de contenidos que habla de inteligencia artificial pero que también ofrezco servicios de formación y consultoría. Ahora, aquí también le vamos a poder dar más información adicional, que yo voy a poner toda esta de aquí, que directamente he cogido de mi página web, simplemente por darle un poco más de contexto de quién soy. Una vez tenemos esto, ahora vamos a decidir cuáles son los caminos que puede seguir en la conversación que queremos definir. Para ello podemos hacer uso de las rules, que básicamente son las diferentes reglas con las que vamos a hacer diferentes acciones. Para poder eliminar algunas, si no nos gustase, le podemos dar a los 3 puntos clicar en Delete, y para poder añadir simplemente en Crear regla. Ahora yo aquí voy a poner una para aquellas personas que estén interesados en el servicio de consultoría, otra para aquellas personas que tienen alguna consulta pero no están interesados en contratar una consultoría, y una tercera regla para aquellas personas que tienen dudas con algún vídeo específico que está en el canal de YouTube o que su consulta esté relacionada con mi canal. De aquí, como estás viendo, simplemente nos bastará con describirle en qué consiste cada camino que va a coger esta conversación, evitando cualquier configuración técnica, ya que por inteligencia artificial esta plataforma va a saber qué queremos configurar. Una vez tenemos esto, pues podemos seguir con nuestra conversación. Para aquellos interesados en una consultoría, yo puedo clicar en más y hacer un flujo totalmente distinto a estos dos otros. Así que para ello yo lo que voy a hacer va a ser utilizar otra inteligencia artificial, pero en este caso enfocada a la venta de productos, ya que al estar interesado voy a hacer que esta inteligencia artificial intente terminar de hacer esta venta. Así que le doy un clic y ya tendría por aquí otro bot de inteligencia artificial enfocada para la venta. Del mismo modo, para la resolución de preguntas, voy a clicar en el más y voy a poner otro chatbot de inteligencia artificial, pero en este caso con un objetivo de resolverle la duda que pueda tener. Así que le voy a dar un clic y aquí tendría otro. Y aquí realmente no tenemos que utilizar siempre inteligencias artificiales, ya que en la tercera opción puedo utilizar directamente un bloque de contenido estático como ese de aquí, en donde le estoy diciendo que le recomiende esta URL para una plataforma que está enfocada a los creadores de contenido, que me ha permitido entrenar a una inteligencia artificial con todos mis vídeos de YouTube. Así que con esta simplemente me valdría. Y ahora por aquí, con estas otras dos inteligencias artificiales, lo seguiría configurando. Aunque si clico en una de ellas, como por ejemplo la de vender productos, pues vas a ver que la información requerida cambia. Ya que aquí, si hago un poquito scroll para abajo, pues podemos ver que nos pregunta por los diferentes productos que nosotros le vamos a poder dar toda la información para que, teniendo esta junto al objetivo que tiene de venta, pues actúe de una forma distinta. Así que aquí yo le empezaría a rellenar con toda la información, como por ejemplo la URL para poder hacer un pedido, así como otro tipo de información sobre cómo podría hacer este pedido y cuáles son las formas de pago. Aunque si hay algo interesante de aquí es que le podamos hacer una descripción de nuestro producto. Y aquí realmente pondríamos toda la que nosotros queramos, ya que como puedes ver por aquí podemos exponer la información como el nombre, el precio, el link al producto, etcétera, simplemente separándolas con coma. Así que yo por aquí la acabo de poner, los 3 tipos de consultoría, como la marca personal, consultoría inteligencia artificial y estrategia digital. Aquí, como puedes estar viendo, le estoy separando, como te he comentado antes, por comas la diferente información, como que algunas están enfocadas en particulares, cuál es su coste, así como información adicional de este producto. Aquí se podría poner más, pero yo lo voy a estar dejando así. Y además, si nos vamos abajo abajo del todo, ten en cuenta que también le vas a poder poner instrucciones adicionales. Del mismo modo, le podemos decir a esta inteligencia artificial que deje de pasar la conversación cuando pase algo. En este ejemplo le acabo de poner una regla para aquellas personas que necesiten hablar conmigo, así que aquí nuevamente simplemente se lo he descrito. Y del mismo modo, para la otra inteligencia artificial que estaba enfocada en aquellas personas que tenían una consulta pero que no estaban interesadas en la consultoría, si le doy un clic, pues vas a poder ver nuevamente que toda la información que nos pide se estructura de otra forma. En este caso, de una forma similar al típico bloque de preguntas frecuentes, en donde nosotros le podemos dar cualquier pregunta de ejemplo que se pueda preguntar los usuarios y darle la respuesta. Aunque lo interesante de esto es que, al ser una inteligencia artificial, no va a dar la respuesta literal, sino que va a aprender de esta y va a adaptar la conversación acorde a los mensajes que esté teniendo con el usuario. Yo en este aspecto le he añadido unas 10 preguntas de diferente tipo. Y además de esto, si me vuelvo para arriba, también le he añadido algunas reglas. Aquí tenemos 3: una para aquellas personas que tengan una duda urgente y que necesiten hablar con Alejavi Rivera, otra si durante la conversación de sus dudas estuviese interesado en la consultoría. Y una última, nuevamente, si la consulta está relacionada con algún vídeo de YouTube. Ahora, esto nuevamente nos permite seguir el flujo como queramos. Que esté interesado en la consultoría, pues yo aquí lo he relacionado con la otra inteligencia artificial enfocada en la venta de productos. Si tiene una duda de un vídeo de YouTube, nuevamente lo he puesto a este bloque de aquí. Y en la condición de aquellos que necesiten hablar con Alejavi de forma urgente, tanto en la venta de productos como para aquellas personas que tengan alguna consulta, le voy a poder añadir un mensaje y además asignar este chat a una persona real. Para hacer esto, lo primero sería darle una respuesta diciéndole al usuario que le va a pasar el chat a una persona humana. Así que aquí le voy a dar al más y voy a clicar que continúe con un texto. Este realmente también lo voy a poder compartir con este otro, ya que el objetivo sería el mismo. Así que lo uno por aquí y así lo podría simplificar. Ahora aquí le podría poner un texto, como por ejemplo este, en donde le decimos que acaba de avisar a Alejavi para que él responda directamente. Así que aquí el trabajo del bot terminaría para que una persona humana, yo en mi caso, pudiera seguir la conversación. Para poder hacer esto le daríamos al más Y ahora aquí vamos a tener un botón de acción en donde vamos a poder redirigir la conversación a un agente humano. Ten en cuenta que aquí también podrías redirigirlo a otro espacio de trabajo tal y como hemos construido aquí, aunque yo por simplificarlo simplemente lo terminaré con este agente humano. Y ya con esto pues ya tendríamos nuestro flujo. Ten en cuenta también que si clicas a este botón pues automáticamente te va a organizar todos los nodos que hayas puesto. Y también quiero que tengas en cuenta que porque yo haya puesto este nodo del final para que termine hablando con una persona humana, realmente no tiene que terminar siempre al hablando una persona, ya que es muy probable que la inteligencia artificial pueda resolver la consulta y el flujo termine, por ejemplo, en este bloque de aquí. Y de ser así, pues no llegaría hasta el final, haciendo así que baje el grueso de las consultas y solamente tenga que entrar una persona real, con todos los costes que eso conlleva, cuando realmente sea necesario. Teniendo esto, pues ya lo podríamos poner en marcha y empezar a probarlo. Pero antes te quiero comentar dos cosas. La primera es que si nos vamos a su apartado de precio, vamos a tener una por unos $9 de forma mensual, ya que actualmente su funcionalidad se encuentra en periodo beta y esto hace tener un precio más bajo. Aunque debes de tener en cuenta que también tienen un plan superior en donde están utilizando el modelo de GPT-4o, que además me han comentado que en un futuro también pueda resolver consultas a través de otros inputs como podría ser las imágenes y a través de mensaje de voz, tal y como es capaz este modelo de GPT-4o, que por cierto ya la estuvimos hablando en detalle en este vídeo de aquí. Lo segundo que quiero que tengas en cuenta es que si me vuelvo al apartado de el chat también lo vas a poder personalizar a tu gusto. Fíjate que yo tengo el color verde, el nombre y una foto. Y para hacer esto simplemente le darías un clic a este primer nodo de chat widget, y desde aquí pues tendrías que poner el nombre de la web en donde vayas a poner ese chatbot. Le das un nombre, eliges una foto como yo hice antes, y un color que más te guste y que encaje con la web en donde lo vayas a poner. Una vez ya tengas todos los aspectos visuales y toda la estrategia, que es lo que hemos estado montando a lo largo del vídeo, ya lo vamos a poder poner directamente en un sitio web. Yo lo voy a estar poniendo en el mío. Y además, ten en cuenta que desde el día que se publica este vídeo yo voy a dejar este chatbot durante 2 meses, así que vas a poder testar qué tal funciona. Para poder añadirlo a mi página web, así como en cualquier otra, lo que tendríamos que hacer sería darle un clic aquí y copiar este código script. Le doy al botón y una vez lo tenga, si lo quiero activar previamente, ten en cuenta también que tienes que marcar esta casilla para que se active. Y nuevamente, desde aquí nos van a recordar el código, aunque como yo ya lo he copiado, voy a cerrar aquí. Y ahora, desde nuestro sitio web, lo importante es que pongamos ese código justamente después de la cabecera. Ten en cuenta que la cabecera es este menú que aparece por aquí arriba. Para poder hacer esto nos vamos a venir a los ajustes, yo en mi caso de WordPress, aunque realmente esto se podría extrapolar a cualquier otro CMS. Y para poder llegar al código de la cabecera en WordPress sería sobre apariencia, en el apartado de editor de archivos de tema. Si clicamos en su documentación que viene por aquí, nos dice que lo tenemos que meter justamente después del cierre de la cabecera. Aquí realmente tienes que tener en cuenta que en algunos temas puede ser que aparezca en una ubicación como la de index.php, o si no, te va a aparecer en la segunda opción que te voy a decir ahora. Ya que si me vuelvo a la parte de temas y yo clico en el index.php tal y como me lo dice la documentación, pues aquí yo no veo por ningún lado ese símbolo de cabecera que me decía la documentación, ya que realmente también se puede encontrar en esta otra página de cabecera. Y en mi caso ya la tengo por aquí, donde empezaría y donde terminaría con esta barra doblada. Como yo tenía que poner después, pues aquí clico un intro y pegaría justamente el código que nos ha dado la plataforma De aquí es muy importante que no modifiques nada, ya que podrías romper el tema por completo. Así que simplemente pega ese código justo después de la cabecera, pero no elimines ningún elemento más. Una vez tengas esto, le das a actualizar archivo. Y una vez tengamos esto, si yo me voy a una ventana de incógnito y entro en mi página web, pues por esta zona de aquí ya puedes estar viendo el chatbot que nosotros hemos estado configurando. Para poder ponerlo a prueba, simplemente le damos un clic y ahora le daríamos empezar chat. Ahora aquí nos saluda y le podríamos hacer cualquier pregunta. Voy a imaginar que soy una persona que me gustaría crecer en YouTube y estoy interesado por la consultoría de marca personal. Así que aquí simplemente le escribo algo como de que me gustaría crecer en YouTube con una marca personal, y al yo enviar, pues de forma automática nos está haciendo todas estas respuestas que yo realmente así no lo había puesto de forma literal, en donde nos está preguntando si nos puede dar algún consejo específico sobre el tema. Ahora yo aquí le podría decir que estoy interesado en alguna de sus consultorías, así que por aquí se lo enviaría y automáticamente me expande esa información dándole información adicional como el coste que tiene esa consultoría e incluso sobre qué trata ese servicio que se está ofreciendo. Ya que si vuelvo sobre la plataforma, aquí primeramente lo ha tratado esta inteligencia artificial intentando consultarle sus dudas, y después, al ver que está interesado por algún producto, pues ya ha entrado a este otro de venta de producto, desde donde si yo le doy un clic, pues es efectivamente donde yo le había puesto esta información que nos ha proporcionado. Aquí, de igual forma, si yo vuelvo aquí, cambiase idea y quisiera hablar con Alejavi diciéndole que quiero hablar con él, si yo envío esto, pues automáticamente nos dice que de acuerdo, que me acaba de avisar a mí y que él se describe, ya que su trabajo acaba de terminar aquí. Ya que realmente, si yo me vuelvo sobre Chatfuel, aquí podemos ver que el flujo que hemos seguido ha sido este. Y al decirle que necesitaba hablar conmigo, pues le ha enviado este mensaje y en teoría me ha pasado la conversación. Y para verlo voy a clicar en esta opción de live chat. Y efectivamente tengo aquí un chat de justamente ahora, que si yo le doy un clic puedo ver toda la conversación un poco más cualificada, desde donde yo voy a poder contestar poniéndole algo como que soy Alejavi, que cómo puedo enviarte. Y al yo clicar en enviar, si vuelvo sobre la web, pues efectivamente nos pone por aquí el mensaje ya con una persona real. Y además, volviendo sobre esta plataforma, yo voy a poder tanto adjuntar imágenes como incluso clicar en este símbolo y volverla a meter a otro flujo de trabajo por inteligencia artificial que yo ya haya hecho. Y bueno, ¿qué te ha parecido que hayamos podido hacer esto de una forma tan sencilla? Déjamelo por los comentarios y comparte si te gustó. Como estamos viendo, ahora podremos crear un chatbot por inteligencia artificial que automatice la respuesta a los clientes simplemente conociendo la información del proyecto y el objetivo que tendría que cumplir ese bot. Cada vez más implementar este tipo de soluciones se simplifica, permitiendo ser más eficientes para el progreso de tus objetivos.