DOCS
Guía de integración
Integra un avatar de IA en tu sitio de tres maneras — con tan solo dos líneas de código. Los parámetros completos y códigos de error están en la consola.
Tres pasos para integrar
Inicia sesión en la consola, crea un avatar con la apariencia y voz que prefieras, obtén un Agent ID.
Se genera una clave por defecto automáticamente; crea claves separadas por sitio con allowlists de dominios permitidos.
Toma el snippet completo desde la página de Integración de la consola, reemplaza los marcadores y publica.
Qué método elegir
Mismas capacidades del avatar; elige la ruta que se ajuste a tu stack.
| Método | Mejor para | Control | Aislamiento de estilos |
|---|---|---|---|
| JS SDK | SPAs que necesitan suscripción a eventos y control programático | ★★★ | Medio |
| Web Component | Vue / React / HTML puro, configuración mínima | ★★ | Alto (Shadow DOM) |
| iframe | Sitios estáticos, CMS, artículos, sin dependencias | ★ | Máximo (sandbox) |
¿Qué ruta de integración elegir?
Lo decide lo que devuelve tu LLM —— solo texto va por la ruta A, audio incluido va por la ruta B.
Tu LLM devuelve texto —— nosotros hacemos TTS + sincronización labial
Envíanos texto plano. Sintetizamos la voz y movemos la boca del avatar. La ruta más rápida: unas líneas de código real y está en línea.
Recomendado para primera integración
Tu LLM devuelve texto + audio —— nosotros solo sincronizamos los labios
Trae tu propio TTS para controlar totalmente la voz — IP de celebridad, voz de marca, dialectos. Nosotros solo alineamos los labios.
Para voz de marca propia
Empieza con A. Cambiar a B después no cambia la arquitectura —— misma instancia widget, llamada API diferente.
Inicio más rápido · ejemplo SDK
Copia el snippet, cambia agent_xxx y YOUR_API_KEY por los tuyos — listo.
<script type="module" src="https://embed.avataraisdk.com/sdk.js"></script>
<script type="module">
const widget = AIAvatar.init({
agentId: 'agent_xxxxxxxxxxxx',
apiKey: 'YOUR_API_KEY',
behavior: { llmMode: 'external' },
// Ruta A: tu LLM devuelve texto, nosotros hacemos TTS + sincronización labial
onUserInput: async (msg) => {
const reply = await myCustomerLLM(msg.content);
widget.replyText(reply);
},
});
</script>Los snippets de JS SDK / Web Component, la referencia de parámetros, los códigos de error y la configuración de allowlist de origen están todos en la consola.
Ver la documentación de integración completa
Inicia sesión en la consola → Integración: obtén tu clave API, todos los ejemplos de código, la referencia de parámetros y consejos de manejo de errores.
Abrir consola