Como agregar un widget de "habla con este contenido" a tu sitio web

Introducción a las herramientas utilizadas

Este tutorial se centra en la implementación de un widget conversacional mediante Eleven Labs, una plataforma que permite crear agentes de inteligencia artificial capaces de interactuar con los visitantes de un sitio web basándose en el contenido específico de la página.

Objetivos del tutorial

En este tutorial aprenderás:

• Configurar una cuenta en Eleven Labs
• Crear un agente de IA conversacional desde cero
• Alimentar el agente con contenido de tu sitio web
• Personalizar el comportamiento del agente
• Implementar el widget en tu página web

Requisitos previos

Para seguir este tutorial necesitarás:

• Acceso a internet
• Una cuenta de correo electrónico (preferiblemente de Google)
• Un sitio web donde implementar el widget
• Conocimientos básicos sobre la edición de tu sitio web
• Contenido específico que desees utilizar para alimentar el agente

Pasos para crear el widget conversacional

1. Crear cuenta en Eleven Labs

1. Acceder a Eleven Labs
2. Seleccionar "Ir a la app"
3. Iniciar sesión con Google o crear una cuenta
4. Verificar los créditos disponibles (cuenta gratuita: 10.000 créditos)

2. Crear un agente conversacional

1. En el menú lateral, seleccionar "AI conversacional"
2. Dirigirse a la sección "Agentes"
3. Seleccionar "Start from blank" para crear un nuevo agente

3. Configurar el agente

1. Establecer el idioma principal (español)
2. Añadir idiomas adicionales si es necesario (inglés)
3. Personalizar el mensaje de bienvenida (ej: "Hola, ¿quisieras saber más de este sitio web? Cuéntame")
4. Configurar el "system prompt" (ej: "Eres un especialista en el contenido de este sitio web y quiero que le ayudes a más personas a entender de qué se trata")

4. Alimentar el agente con contenido

Opción A: Mediante URL

1. En la sección "Knowledge Base", seleccionar "Añadir URL"
2. Ingresar la dirección del sitio web
3. Verificar que el sistema haya extraído correctamente la información

Opción B: Mediante texto

1. Seleccionar "Añadir texto"
2. Copiar y pegar el contenido relevante
3. Confirmar la creación del texto

5. Guardar y probar el agente

1. Guardar la configuración con el botón "Save"
2. Utilizar la opción "Probar" para verificar las respuestas del agente
3. Opcionalmente, personalizar la voz del agente

6. Implementar el widget en el sitio web

1. Acceder a la sección "Widget"
2. Copiar el código proporcionado
3. Pegar el código en el sitio web donde se desea implementar el widget
4. Verificar el funcionamiento

Consideraciones adicionales

• Cada agente debe tener su propia base de conocimiento
• Se recomienda implementar inicialmente en la página principal del sitio
• Es necesario guardar los cambios después de cada modificación