¿Qué son las Client Tools?
Las Client Tools permiten que tu agente de ElevenLabs ejecute funciones JavaScript directamente en el navegador del usuario, como navegar a páginas, mostrar alertas, o interactuar con tu sitio web.
📋 Requisitos
- Agente configurado en ElevenLabs con herramientas de tipo «Client»
- Widget HTML insertado en tu sitio web
- JavaScript para registrar las funciones
🚀 Configuración paso a paso
Paso 1: Crear la herramienta en ElevenLabs
- Ve a tu agente en el dashboard de ElevenLabs
- Sección «Tools» → «Add Tool»
- Tool Type: Client
- Name:
navigateTo(o el nombre que prefieras) - Description: «Navigate to a specific URL»
- Parameters:
- Name:
url - Type: String
- Required: ✅
- Description: «The URL to navigate to»
- Name:
Paso 2: Insertar el widget HTML
En Elementor, agrega un widget HTML y pega este código:
<elevenlabs-convai agent-id="TU_AGENT_ID"></elevenlabs-convai>
<script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>Nota: Reemplaza TU_AGENT_ID por el ID real de tu agente.
Paso 3: Código JavaScript para Client Tools
En otro widget HTML de Elementor, agrega este código:
<script>
(function() {
'use strict';
console.log('Configurando client tools...');
function setupClientTools() {
const widget = document.querySelector('elevenlabs-convai');
if (widget) {
console.log('Widget encontrado, registrando client tools...');
// Event listener oficial de ElevenLabs
widget.addEventListener('elevenlabs-convai:call', (event) => {
console.log('Event elevenlabs-convai:call disparado');
// Registrar client tools
event.detail.config.clientTools = {
navigateTo: ({ url }) => {
console.log('navigateTo ejecutado con URL:', url);
if (!url) {
return 'Error: No URL proporcionada';
}
window.location.href = url;
return `Navegando a: ${url}`;
}
};
console.log('Client tools registrados');
});
return true;
}
return false;
}
// Configurar cuando el DOM esté listo
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
setTimeout(setupClientTools, 500);
});
} else {
setTimeout(setupClientTools, 500);
}
// Reintentar hasta que funcione
let attempts = 0;
const retryInterval = setInterval(() => {
attempts++;
if (setupClientTools() || attempts >= 20) {
clearInterval(retryInterval);
}
}, 1000);
})();
</script>💡 Ejemplos de Client Tools
🔗 Navegación
navigateTo: ({ url }) => {
window.location.href = url;
return `Navegando a: ${url}`;
}📢 Mostrar alerta
showAlert: ({ message }) => {
alert(message);
return 'Alerta mostrada';
}📧 Enviar datos
sendData: ({ data }) => {
fetch('/api/endpoint', {
method: 'POST',
body: JSON.stringify(data)
});
return 'Datos enviados';
}🔧 Para Elementor específicamente
Método recomendado:
- Widget HTML #1: El código del widget de ElevenLabs
- Widget HTML #2: El código JavaScript
- Posición: Coloca ambos widgets en la misma sección
- Orden: Primero el widget, después el JavaScript
🐛 Debugging
Errores comunes:
- «Client tool not defined»: El event listener no está configurado
- Widget no encontrado: El timing del JavaScript es incorrecto
- Parámetros incorrectos: Los nombres deben coincidir exactamente
Para verificar que funciona:
- Abre la consola del navegador (F12)
- Deberías ver: «Configurando client tools…» y «Widget encontrado…»
- Cuando el agente use la herramienta verás: «navigateTo ejecutado con URL:»
✅ ¡Listo para usar!
Una vez configurado, tu agente podrá navegar por tu sitio web automáticamente cuando los usuarios se lo pidan.
Fuente: Este método está basado en la respuesta oficial del soporte de ElevenLabs, que especifica usar el event listener elevenlabs-convai:call para registrar client tools dinámicamente.
