Embeber el widget de voz en tu sitio web
El widget de voz es un botón flotante que aparece en tu sitio web y permite a tus clientes iniciar una llamada con el agente directamente desde el navegador. Funciona en cualquier sitio: HTML estático, WordPress, Webflow, Wix o Next.js.
Tu URL pública
Cada tenant tiene una página pública en:
https://agentes-saas-ten.vercel.app/a/[tu-slug]
Esta página ya contiene el widget activo. Puedes compartir ese enlace directamente o embeber el widget en tu propio sitio.
Código de embed básico
Copia este snippet y pégalo antes del cierre de la etiqueta </body> de tu sitio:
<!-- Agentes SaaS · Widget de voz -->
<script
src="https://agentes-saas-ten.vercel.app/embed/widget.js"
data-agent-id="TU_AGENT_ID"
async>
</script>
<elevenlabs-convai agent-id="TU_AGENT_ID"></elevenlabs-convai>
Reemplaza TU_AGENT_ID con el ID que encuentras en /dashboard/settings → Agente → Agent ID.
Embed en Next.js / React
// components/VoiceWidget.tsx
"use client";
import Script from "next/script";
export default function VoiceWidget({ agentId }: { agentId: string }) {
return (
<>
<Script
src="https://agentes-saas-ten.vercel.app/embed/widget.js"
data-agent-id={agentId}
strategy="afterInteractive"
/>
{/* @ts-expect-error custom element */}
<elevenlabs-convai agent-id={agentId} />
</>
);
}
Personalización visual
El widget acepta atributos opcionales para ajustar su apariencia:
<elevenlabs-convai
agent-id="TU_AGENT_ID"
avatar-image-url="https://tudominio.com/foto-agente.jpg"
avatar-orb-color-1="#06b6d4"
avatar-orb-color-2="#0e7490">
</elevenlabs-convai>
| Atributo | Descripción | Valor por defecto |
|---|---|---|
| avatar-image-url | Foto circular del agente | Logo del tenant |
| avatar-orb-color-1 | Color primario del orb animado | #06b6d4 |
| avatar-orb-color-2 | Color secundario del orb | #0e7490 |
Posición del widget
Por defecto el widget aparece en la esquina inferior derecha. Para moverlo, usa CSS:
elevenlabs-convai {
position: fixed;
bottom: 24px;
left: 24px; /* mover a la izquierda */
z-index: 9999;
}
Variables dinámicas en el widget
Puedes pasar datos del contexto de la página al agente al momento de iniciar la sesión. Ver Dynamic variables para el detalle completo.
Verificar que funciona
1. Abre tu sitio en un navegador con micrófono disponible.
2. Haz clic en el botón del widget.
3. Acepta el permiso de micrófono cuando el navegador lo solicite.
4. El agente debe saludar en menos de 3 segundos.
> El widget requiere HTTPS. No funcionará en sitios con http:// excepto en localhost para desarrollo.