> This is a page from the ElevenLabs documentation. For a complete page index, fetch https://elevenlabs.io/docs/llms.txt. For the full documentation in a single file, fetch https://elevenlabs.io/docs/llms-full.txt.
# Personalización del widget
Los **widgets** permiten integrar al instante ElevenAgents en cualquier sitio web. Puedes personalizar tu widget desde la interfaz o mediante nuestros [SDK de ElevenAgents](/docs/es/eleven-api/resources/libraries) con tipado seguro para tener un control total sobre el estilo y el comportamiento. Las anulaciones del SDK tienen prioridad sobre la personalización desde la interfaz.
Nuestro widget es multimodal y puede procesar tanto texto como audio.
> **Note**
>
> También puedes obtener la configuración del widget de un agente y su enlace compartible desde Claude u otro
> cliente MCP a través del [servidor MCP alojado](/docs/es/eleven-agents/operate/hosted-mcp).
## Configuración de modalidad
El widget admite modos de entrada flexibles para adaptarse a tu caso de uso. Configura estas opciones en el panel, en **Canales** → **Widget** → **Interfaz**.
> **Note**
>
> La multimodalidad es totalmente compatible con nuestros SDK de cliente. Consulta más información
> [aquí](/docs/es/eleven-api/resources/libraries).
**Modos disponibles:**
* **Solo voz** (predeterminado): usuarios interactúan únicamente mediante voz.
* **Voz + texto**: usuarios pueden alternar entre la entrada de voz y texto durante las conversaciones.
* **Modo de chat**: las conversaciones comienzan en modo de chat (solo texto), sin capacidades de voz, cuando se inician con un mensaje de texto.
Para obtener más información sobre cómo usar el modo de chat (solo texto) con nuestros SDK, consulta nuestra [guía del modo de chat](/docs/es/eleven-agents/guides/chat-mode).
> **Note**
>
> El widget usa el modo de solo voz de forma predeterminada. Activa el interruptor de entrada de texto para permitir interacciones
> multimodales, o habilita el modo de solo texto para conversaciones exclusivamente basadas en texto cuando se inicien
> mediante texto.
## Insertar el widget
> **Note**
>
> Actualmente, los widgets requieren agentes públicos con la autenticación desactivada. Asegúrate de desactivarla en
> la pestaña **Avanzado** de la configuración de tu agente.
Añade este fragmento de código a la sección `` de tu sitio web. Colócalo en tu archivo principal `index.html` para que esté disponible en todo el sitio:
**`Código de inserción del widget`**
```html title="Código de inserción del widget"
```
> **Info**
>
> Para mejorar la seguridad, define los dominios permitidos en la **Lista de permitidos** de tu agente (en la
> pestaña **Seguridad**). Esto restringe el acceso únicamente a los hosts especificados.
## Atributos del widget
Este código de inserción básico mostrará el widget con la configuración predeterminada definida en el panel del agente.
El widget admite varios atributos HTML para personalizarlo aún más:
#### Configuración básica
```html
```
#### Personalización visual
```html
```
#### Personalización del texto
```html
```
#### Renderizado de Markdown
El widget renderiza Markdown en las respuestas del agente. De forma predeterminada, los enlaces se muestran como texto sin formato para evitar el phishing.
```html
```
## Configuración en tiempo de ejecución
Puedes usar otros dos atributos HTML para personalizar el comportamiento del agente en tiempo de ejecución. Estas dos funciones pueden utilizarse juntas, por separado o no utilizarse.
### Variables dinámicas
Las variables dinámicas te permiten insertar valores de tiempo de ejecución en los mensajes, prompts del sistema y herramientas de tu agente.
```html
```
Debes pasar al widget todas las variables dinámicas que requiera el agente.
> **Info**
>
> Consulta más información en nuestra [guía de variables dinámicas](/docs/es/eleven-agents/customization/personalization/dynamic-variables).
### Anulaciones
Las anulaciones permiten personalizar por completo el comportamiento de tu agente en tiempo de ejecución:
```html
```
Puedes habilitar anulaciones para campos específicos y son totalmente opcionales.
> **Info**
>
> Consulta más información en nuestra [guía de anulaciones](/docs/es/eleven-agents/customization/personalization/overrides).
## Personalización visual
Personaliza la apariencia del widget, el contenido de texto, la selección de idioma y mucho más.
#### Actualizar desde el panel
Abre tu agente en el panel y ve a la pestaña **Widget** para personalizar la apariencia, el avatar, el texto, los términos, la compatibilidad con idiomas y mucho más.
#### Actualizar mediante la CLI
#### Obtener la configuración del agente
```bash
elevenlabs agents pull --agent ""
```
#### Editar \`agent_configs/\.json\`
Configura los campos en `platform_settings.widget`. Por ejemplo, para cambiar los colores de la esfera y el modo de feedback:
```json
{
"platform_settings": {
"widget": {
"variant": "full",
"placement": "bottom-right",
"avatar": {
"type": "orb",
"color_1": "#6DB035",
"color_2": "#F5CABB"
},
"feedback_mode": "during",
"bg_color": "#ffffff",
"text_color": "#000000",
"btn_color": "#000000",
"btn_text_color": "#ffffff"
}
}
}
```
#### Enviar tus cambios
```bash
elevenlabs agents push --agent ""
```
#### Actualizar mediante la API
```python
from elevenlabs import ElevenLabs
elevenlabs = ElevenLabs()
elevenlabs.conversational_ai.agents.update(
agent_id="agent_7101k5zvyjhmfg983brhmhkd98n6",
platform_settings={
"widget": {
"variant": "full",
"placement": "bottom-right",
"avatar": {
"type": "orb",
"color_1": "#6DB035",
"color_2": "#F5CABB",
},
"feedback_mode": "during",
},
},
)
```
```typescript
import { ElevenLabsClient } from "@elevenlabs/elevenlabs-js";
const elevenlabs = new ElevenLabsClient();
await elevenlabs.conversationalAi.agents.update("agent_7101k5zvyjhmfg983brhmhkd98n6", {
platformSettings: {
widget: {
variant: "full",
placement: "bottom-right",
avatar: {
type: "orb",
color1: "#6DB035",
color2: "#F5CABB",
},
feedbackMode: "during",
},
},
});
```
#### Apariencia
Personaliza los colores y las formas del widget para que encajen con la identidad de tu marca.
#### Feedback
Recopila información de usuarios para mejorar el rendimiento del agente. Puedes usarla para ajustar la base de conocimiento y el prompt del sistema de tu agente.
**Modos de recopilación**
* **Ninguno**: desactiva por completo la recopilación de feedback.
* **Durante la conversación**: permite recibir feedback en tiempo real durante las conversaciones. Se recopilarán metadatos adicionales, como la respuesta del agente que provocó el feedback, para ayudar a identificar mejor las carencias.
* **Después de la conversación**: muestra una única solicitud de feedback después de la conversación.
> **Note**
>
> Envía feedback mediante programación a través de la [API](/docs/es/eleven-agents/api-reference/conversations/create) cuando uses implementaciones personalizadas con SDK.
#### Avatar
Configura la esfera de voz o proporciona tu propio avatar.
**Opciones disponibles**
* **Esfera**: elige dos colores de degradado (p. ej., #6DB035 y #F5CABB).
* **Enlace/imagen**: usa una imagen de avatar personalizada.
#### Texto mostrado
Personaliza todos los elementos de texto mostrados en el widget, por ejemplo para modificar las etiquetas de los botones.
#### Términos
Muestra términos y condiciones personalizados antes de la conversación.
**Opciones disponibles**
* **Contenido de los términos**: usa Markdown para dar formato al texto de tu política.
* **Clave de almacenamiento local**: una clave (p. ej., "terms_accepted") para evitar mostrarlos de nuevo a usuarios que regresan.
**Uso**
Los términos se muestran a usuarios en una ventana modal antes de iniciar la llamada:
Los términos pueden escribirse en Markdown, lo que te permite:
* Añadir enlaces a políticas externas
* Dar formato al texto con encabezados y listas
* Incluir énfasis y estilos
Para obtener más ayuda con Markdown, consulta la [guía de ayuda de CommonMark](https://commonmark.org/help/).
> **Info**
>
> Una vez aceptados, el estado se almacena localmente y no se volverán a mostrar al usuario en visitas
> posteriores.
#### Idioma
Activa la compatibilidad con varios idiomas en el widget.
> **Note**
>
> Para activar la selección de idioma, primero debes [añadir idiomas adicionales](/docs/es/eleven-agents/customization/voice/customization/language) a tu agente.
#### Silenciar
Permite que usuarios silencien su audio en el widget.
Para añadir el botón para silenciar, actívalo en la tarjeta `interface` de la configuración del
`widget` del agente.
#### Página compartible
Personaliza la página de destino pública de tu widget (enlace compartible).
**Opciones disponibles**
* **Descripción**: proporciona un breve párrafo que explique el propósito de la llamada.
---
## Implementación avanzada
> **Note**
>
> Para una personalización más avanzada, deberías utilizar los [SDK de ElevenAgents ](/docs/es/eleven-api/resources/libraries) con tipado seguro en una aplicación de Next.js, React o Python.
### Herramientas de cliente
Las herramientas de cliente te permiten ampliar la funcionalidad del widget añadiendo detectores de eventos. Esto permite que el widget realice acciones como:
* Redirigir al usuario a una página específica
* Enviar un correo electrónico a tu equipo de soporte
* Redirigir al usuario a una URL externa
Para ver ejemplos de estas herramientas en acción, inicia una llamada con el agente en la esquina inferior derecha de esta página. El [código fuente está disponible en GitHub](https://github.com/elevenlabs/elevenlabs-dx/blob/main/fern/assets/scripts/widget.js) como referencia.
#### Crear una herramienta de cliente
Para crear tu primera herramienta de cliente, sigue la [guía de herramientas de cliente](/docs/es/eleven-agents/customization/tools/client-tools).
#### Ejemplo: crear la herramienta \`redirectToExternalURL\`
#### Ejemplo de implementación
A continuación tienes un ejemplo de cómo gestionar la herramienta `redirectToExternalURL` activada por el widget en tu código JavaScript:
**`index.js`**
```javascript title="index.js"
document.addEventListener("DOMContentLoaded", () => {
const widget = document.querySelector("elevenlabs-convai");
if (widget) {
// Listen for the widget's "call" event to trigger client-side tools
widget.addEventListener("elevenlabs-convai:call", (event) => {
event.detail.config.clientTools = {
// Note: To use this example, the client tool called "redirectToExternalURL" (case-sensitive) must have been created with the configuration defined above.
redirectToExternalURL: ({ url }) => {
window.open(url, "_blank", "noopener,noreferrer");
},
};
});
}
});
```
> **Info**
>
> Explora nuestros [SDK](/docs/es/eleven-api/resources/libraries) con tipado seguro para implementaciones con React, Next.js y Python.