Cómo construir un sitio web Chatbot Widgets AI

Una guía paso a paso para crear su propia IA que satisfaga las necesidades de su empresa.

Las aplicaciones de los bots son muy amplias y, con el aumento del uso de modelos generativos por parte de los bots, puede resultar tentador subirse al carro y construir tu propio ChatGPT. Con el lanzamiento de Cody, crear chatbots de IA nunca había sido tan fácil. La interfaz agnóstica de modelos y sin código de Cody trata de hacer accesible la IA personal a todos los ámbitos individuales y empresariales existentes. Sin embargo, aunque Cody se esfuerza por que todo el proceso sea lo más sencillo posible, puede resultar un poco intimidante para alguien que sea nuevo en el mundo de la IA. Por eso, en este blog, te explicamos de principio a fin cómo construir tu propio ChatGPT usando Cody. Le guiaremos a través de un caso práctico que le ayudará a iniciar su andadura en Cody con confianza.

El caso práctico

Construiremos un chatbot de inteligencia artificial con Cody que actuará como guía turístico. Será un valioso complemento para las empresas relacionadas con el turismo, ya que puede mejorar enormemente la experiencia del cliente. Pero el alcance de la creación de un chatbot con Cody no se limita a un solo ámbito empresarial. Los usuarios pueden experimentar con diferentes indicaciones para crear un bot adaptado a su propio negocio y también compartirlo con sus clientes después de leer este blog.

Requisitos

1. Contenido relacionado con su empresa (PDF, Word, sitio web o texto)
2. Cuenta en Cody (Plan recomendado: Premium)
3. 15 minutos

Paso 1: Añadir datos a la base de conocimientos

Para añadir documentos a Train Cody según las necesidades de tu empresa, sigue estos pasos:

1. Vaya a la sección Contenido de la interfaz de Cody.
2. Crea una nueva carpeta para organizar tus documentos.
3. Existen tres métodos para añadir datos a la base de conocimientos:
   • Escribir: Utiliza el editor de texto integrado para introducir directamente el contenido.
   • Cargar: Cargue archivos PDF, Word o PowerPoint que contengan información relevante.
   • Importar sitio web: Esta función le permite rastrear el sitio web de su empresa y recopilar datos automáticamente. (Nota: Esta función sólo está disponible en los planes Premium y Avanzado ).

Para este tutorial concreto, utilizaremos una guía de Boston que incluye información sobre diversas atracciones turísticas, sus descripciones, horarios de funcionamiento, direcciones y preguntas frecuentes (FAQ).

Después de subir los documentos necesarios, podrás seguir su estado, que puede ser“aprendiendo” o“aprendido“. El estado indica si Cody está actualmente en proceso de aprendizaje de los documentos o si ha completado con éxito el proceso de aprendizaje. Una vez que Cody haya aprendido los documentos cargados, puedes pasar al siguiente paso, que consiste en construir el chatbot propiamente dicho.

Nota: Es fundamental asegurarse de que los documentos que proporcione sigan un formato específico que mejore la calidad de las respuestas generadas por Cody. Para saber más sobre el formato de documento recomendado, le recomendamos que lea la documentación proporcionada sobre directrices de formato.

Paso 2: Crear el propósito del bot

El propósito se divide a su vez en 3 partes:

Personalidad

La personalidad actúa como el cerebro del bot y desempeña un papel esencial en la generación de respuestas eficaces y útiles. Se compone de múltiples parámetros como Prompt, Relevance Score, Token Distribution, Prompt Persistence y Reverse Vector Search. Para una explicación detallada de estas terminologías, recomendamos consultar nuestro blog anterior, que ofrece información exhaustiva para los recién llegados a Cody. Cody ofrece dos opciones al usuario para crear la personalidad: Modo Plantilla y
Modo avanzado.

El modo de plantilla proporciona a los usuarios indicaciones predefinidas, ofreciendo una cómoda solución plug-and-play. Para este tutorial y caso de uso, nos limitaremos a utilizar el Modo Avanzado ya que el caso de uso no está cubierto actualmente en el Modo Plantilla. En el futuro, tenemos previsto crear una biblioteca de avisos con sus casos de uso específicos, lo que ofrecerá aún más opciones a los usuarios y también añadirá más preajustes al Modo Plantilla.

Personalidad para el guía turístico de AI:

Pregunte a

Eres Cody Travel Guide, un asistente de inteligencia artificial dedicado a proporcionar información precisa sobre Boston. Su tarea principal es ayudarme proporcionándome respuestas fiables y claras a mis preguntas, basándose en la información disponible en la base de conocimientos como única fuente. Abstente de mencionar “base de conocimientos” o nombres de archivos durante la conversación. Es reacio a hacer afirmaciones a menos que estén expuestas o respaldadas por la base de conocimientos. Cuando no disponga de una respuesta definitiva, reconozca su incapacidad para contestar e infórmeme de que no puede responder. En lugar de decir “la información se basa en mis conocimientos”, basta con decir “disculpen si me he olvidado de algo”.

Intenta utilizar el siguiente formato para mostrar la información:

<h2> Nombre del lugar </h2>

<strong> Descripción: </strong> <br>

<strong> Dirección: </strong> <br>

<strong> Horario de trabajo: </strong> <br>

<strong> Información adicional: </strong> <br>

Visite la página <a href=’Insertar enlace’>< /a> para saber más.

Si se le pide un plan o itinerario de viaje personalizado, cree uno utilizando los horarios y la descripción que se proporcionan en este formato:

Nombre del lugar: <br>

Hora de visita: Hora de inicio-Hora de finalización <br>

Dirección: <br>

Puntuación de relevancia:
Equilibrado

Distribución de fichas:
70-10-20 (Context-History-Response)

Persist Prompt:
En

Búsqueda vectorial inversa:
Off

 

💡 Si quieres dar un formato determinado a las respuestas de tu bot, Cody admite etiquetas Markdown y HTML, en las que puedes definir una plantilla de formato para tu bot.

 

Cada pregunta de personalidad debe seguir una estructura específica para obtener respuestas de calidad. Consejos importantes para elaborar un aviso eficaz con ejemplos:

→ Define las fallbacks:

• “En lugar de decir ‘que la información se basa en mi base de conocimientos’, basta con decir ‘disculpen si me he saltado algo'”.
• “Si no puede encontrar información relevante en la base de conocimientos, reconozca su incapacidad y sugiera ponerse en contacto con [Enter your website URL/contact no.]”

→ Delimita las fuentes:

• “Utiliza la base de conocimientos como única fuente”.
• “Su respuesta debe estar en el mismo idioma que mi petición, y no debe mencionar la palabra base de conocimientos durante la conversación”.

→ Define el objetivo:

• “Su objetivo es proporcionarme asistencia y responder a mis preguntas sobre [Enter your business domain].”
• “Evitar actividades no relacionadas o participar en discusiones no relacionadas con la base de conocimientos o la escritura creativa”.

Ejemplo de formulario para el servicio de atención al cliente:

📌 Eres Cody, un Asistente AI de Soporte de Sitios Web que trabaja para Villa Homes. Su objetivo es proporcionarme apoyo y responder a mis preguntas sobre Villa Homes, utilizando la base de conocimientos como única fuente.

Evitar actividades no relacionadas o participar en debates no relacionados con la base de conocimientos o la escritura creativa. Si no puedes encontrar información relevante en la base de conocimientos o si el usuario hace preguntas no relacionadas que no forman parte de la base de conocimientos, reconoce tu incapacidad y sugiere que contacte con el equipo de Villa Homes en el +40XXXXXXX

Su respuesta debe estar en el mismo idioma que mi solicitud, y no debe mencionar la palabra base de conocimientos durante la conversación.

Para saber más sobre la ingeniería de mejores prompts, lea este
blog
donde explicamos en detalle todos los fundamentos de Cody.

General

En esta sección, deberás definir el nombre y la descripción de tu bot, así como seleccionar el modelo que deseas utilizar con Cody. Puedes elegir entre tres modelos diferentes de OpenAI:

1. GPT-3.5
2. GPT-3.5 16K
3. GPT-4

Con el Plan Premium, tiene acceso a los tres modelos, lo que le da libertad para elegir el más adecuado a sus necesidades específicas. Es una opción práctica que permite aprovechar todas las posibilidades que ofrece Cody.

Utilizaremos el GPT-4, ya que es el modelo más avanzado disponible en la actualidad y se adapta perfectamente al caso de uso que vamos a demostrar gracias a su mayor creatividad.

Conocimientos

La carpeta creada en el primer paso debe estar vinculada a su bot específico en esta sección. Si ha creado varias carpetas que desea vincular, sólo tiene que seleccionar todas las carpetas en las que desee formar a Cody.

Es importante entender que Cody no es una caja negra con mente propia. Es un modelo que simplemente predice la siguiente palabra de la frase. Como dice el famoso dicho de la ciencia de datos:“Basura dentro, basura fuera“. Cuanto mejor configures la personalidad, definas las reglas del bot y limpies los datos que le proporciones, mejores respuestas generará. Con nuevas incorporaciones, como el modo de plantillas con varios preajustes, intentamos facilitar a los usuarios el proceso de indicación de la personalidad.

Paso 3: Probar y compartir el bot

Ahora viene la parte más emocionante. Probar y ensayar el robot que has construido tú mismo puede darte una gran sensación de logro. Hay dos formas de probar y compartir tu bot: creando un chat o utilizando el recién lanzado widget personalizable.

Para crear un widget de chat en sólo tres sencillos pasos:

1. Ve a la sección Bots de la interfaz de Cody.
2. Selecciona el bot que has creado y haz clic en los tres puntos ‘⋮’ para ver más opciones.
3. Haga clic en“Incrustar“.

Y ¡voilá! Has creado con éxito un Widget Cody personalizable.

Cuando utilizas un widget de Cody, tienes dos opciones para compartirlo con otros: Compartir enlace o Incrustar. Si no tienes un sitio web para tu negocio o si no te sientes cómodo modificando el código de tu sitio web, puedes compartir fácilmente el bot con tus clientes utilizando el enlace proporcionado.

Existen dos tipos de widgets integrables:

1. Inline Embed: Este tipo de widget se incrustará en un espacio específico de su sitio web. Ocupará el espacio necesario que requiera el widget dentro del elemento principal definido.
2. Pop-Up Embed: Este tipo de widget aparece como un icono flotante en su sitio web. Cuando un visitante hace clic en el icono, el widget se expande y se abre, permitiendo la interacción con el chatbot.

Ambos tipos de widgets incrustables proporcionan diferentes formas de integrar el bot Cody en tu sitio web, ofreciendo flexibilidad en cuanto a la utilización del espacio y la experiencia del usuario. Puede elegir el que mejor se adapte al diseño de su sitio web y a las preferencias de interacción del usuario.

Personalizar el widget

Nuestra última novedad ofrece a los usuarios total libertad y opciones de personalización para los widgets. Esto significa que puede adaptar el aspecto, el comportamiento y la experiencia general del usuario del widget a sus requisitos específicos y a su marca.

Las opciones de personalización incluyen:

1. Cabecera
   • Cambiar la disposición de la cabecera (Izquierda o Centro).
   • Añada el logotipo de su empresa
   • Color
   • Título
   • Subtítulo
2. Chat
   • Tamaño del mensaje (tamaño de la burbuja de chat)
   • Color de fondo del chat
3. Bot
   • Mensajes iniciales
   • Color de fondo del mensaje
   • Avatar Bot
   • Bot Color
4. Humano
   • Preguntas sugeridas
   • Color de fondo del mensaje
5. Compositor
   • Mensaje con marcador de posición
   • Icono del botón Enviar
   • Marca Cody (Sólo se puede eliminar en los planes Premium y Avanzado )
6. Lanzador
   • Talla
   • Posición de la pantalla
   • Color de fondo (color del botón flotante)
   • Icono
   • Cerrar icono

 

Todas estas opciones de personalización deberían hacer que Cody sea más personalizado y acorde con la estética de su negocio, lo que se traduce en una experiencia de usuario mucho mejor para sus clientes.

¡Eso es todo!

Crear y compartir un bot con Cody es ahora más fácil que nunca, con sólo tres sencillos pasos. Con la reciente introducción de las opciones de personalización de los widgets, nunca ha habido mejor momento para crear tu propio bot con Cody. La flexibilidad añadida en la personalización del widget te permite adaptar la apariencia y el comportamiento del bot a las necesidades específicas de tu negocio y de tu marca.

Trabajamos constantemente en el desarrollo y la introducción de funciones más interesantes para mejorar la experiencia de Cody. Nuestro equipo se dedica a hacer que todo el proceso de creación y despliegue de bots sea aún más fluido y fácil de usar. Esté atento a las próximas actualizaciones, ya que seguimos mejorando y perfeccionando la plataforma Cody. Para obtener más recursos, también puedes consultar nuestro Centro de ayuda y unirte a nuestra comunidad de Discord.