> 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.
# Widget aanpassen
**Widgets** maken directe integratie van ElevenAgents in elke website mogelijk. Je kunt je widget aanpassen via de UI of via onze typeveilige [ElevenAgents SDK's](/docs/nl/eleven-api/resources/libraries) voor volledige controle over styling en gedrag. De SDK-overschrijvingen hebben voorrang op aanpassingen via de UI.
Onze widget is multimodaal en kan zowel tekst als audio verwerken.
> **Note**
>
> Je kunt ook de widgetconfiguratie en deelbare link van een agent ophalen vanuit Claude of een andere
> MCP-client via de [gehoste MCP-server](/docs/nl/eleven-agents/operate/hosted-mcp).
## Modaliteitsconfiguratie
De widget ondersteunt flexibele invoermodi die aansluiten bij je use case. Configureer deze opties in het dashboard onder **Kanalen** → **Widget** → **Interface**.
> **Note**
>
> Multimodaliteit wordt volledig ondersteund in onze client-SDK's, lees meer
> [hier](/docs/nl/eleven-api/resources/libraries).
**Beschikbare modi:**
* **Alleen spraak** (standaard): Gebruikers communiceren alleen via spraak.
* **Spraak + tekst**: Gebruikers kunnen tijdens gesprekken schakelen tussen spraak- en tekstinvoer.
* **Chatmodus**: Gesprekken beginnen in chatmodus (alleen tekst), zonder spraakmogelijkheden, wanneer ze met een tekstbericht worden gestart.
Lees voor meer informatie over het gebruik van de chatmodus (alleen tekst) via onze SDK's onze [handleiding voor chatmodus](/docs/nl/eleven-agents/guides/chat-mode).
> **Note**
>
> De widget staat standaard in de modus met alleen spraak. Schakel de optie voor tekstinvoer in om multimodale
> interacties toe te staan, of schakel ondersteuning voor de modus met alleen tekst in voor uitsluitend op tekst gebaseerde gesprekken die
> via tekst worden gestart.
## De widget insluiten
> **Note**
>
> Widgets vereisen momenteel openbare agents met uitgeschakelde authenticatie. Controleer of dit is uitgeschakeld op
> het tabblad **Geavanceerd** van de instellingen van je agent.
Voeg dit codefragment toe aan de sectie `` van je website. Plaats het in je hoofdbestand `index.html` zodat het op de hele site beschikbaar is:
**`Code voor het insluiten van de widget`**
```html title="Code voor het insluiten van de widget"
```
> **Info**
>
> Definieer voor betere beveiliging toegestane domeinen in de **Allowlist** van je agent (te vinden op het
> tabblad **Beveiliging**). Hiermee beperk je toegang tot alleen de opgegeven hosts.
## Widgetattributen
Deze basiscode voor insluiting toont de widget met de standaardconfiguratie die in het dashboard van de agent is ingesteld.
De widget ondersteunt verschillende HTML-attributen voor verdere aanpassing:
#### Kernconfiguratie
```html
```
#### Visuele aanpassing
```html
```
#### Tekstaanpassing
```html
```
#### Markdown-rendering
De widget rendert markdown in reacties van de agent. Links worden standaard als gewone tekst weergegeven om phishing te voorkomen.
```html
```
## Runtimeconfiguratie
Je kunt nog twee html-attributen gebruiken om het gedrag van de agent tijdens runtime aan te passen. Je kunt deze twee functies samen, afzonderlijk of helemaal niet gebruiken
### Dynamische variabelen
Met dynamische variabelen kun je runtimewaarden invoegen in de berichten, system prompts en tools van je agent.
```html
```
Alle dynamische variabelen die de agent nodig heeft, moeten aan de widget worden doorgegeven.
> **Info**
>
> Lees meer in onze [handleiding voor dynamische variabelen](/docs/nl/eleven-agents/customization/personalization/dynamic-variables).
### Overschrijvingen
Met overschrijvingen kun je het gedrag van je agent tijdens runtime volledig aanpassen:
```html
```
Je kunt overschrijvingen voor specifieke velden inschakelen; ze zijn volledig optioneel.
> **Info**
>
> Lees meer in onze [handleiding voor overschrijvingen](/docs/nl/eleven-agents/customization/personalization/overrides).
## Visuele aanpassing
Pas de weergave, tekstinhoud, taalkeuze en meer van de widget aan.
#### Bijwerken via het dashboard
Open je agent in het dashboard en ga naar het tabblad **Widget** om de weergave, avatar, tekst, voorwaarden, taalondersteuning en meer aan te passen.
#### Bijwerken via de CLI
#### De agentconfiguratie ophalen
```bash
elevenlabs agents pull --agent ""
```
#### \`agent\_configs/\.json\` bewerken
Stel velden in onder `platform_settings.widget`. Bijvoorbeeld om de kleuren van de orb en de feedbackmodus te wijzigen:
```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"
}
}
}
```
#### Je wijzigingen pushen
```bash
elevenlabs agents push --agent ""
```
#### Bijwerken via de 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",
},
},
});
```
#### Weergave
Pas de kleuren en vormen van de widget aan zodat deze bij je merkidentiteit passen.
#### Feedback
Verzamel inzichten van gebruikers om de prestaties van de agent te verbeteren. Je kunt dit gebruiken om de kennisbank en system prompt van je agent te finetunen.
**Verzamelmodi**
* **Geen**: Schakel het verzamelen van feedback volledig uit.
* **Tijdens gesprek**: Ondersteun realtime feedback tijdens gesprekken. Er worden aanvullende metadata verzameld, zoals de reactie van de agent die om de feedback vroeg, om hiaten beter te kunnen identificeren.
* **Na gesprek**: Geef na het gesprek één feedbackverzoek weer.
> **Note**
>
> Verstuur feedback programmatisch via de [API](/docs/nl/eleven-agents/api-reference/conversations/create) wanneer je aangepaste SDK-implementaties gebruikt.
#### Avatar
Configureer de stemorb of gebruik je eigen avatar.
**Beschikbare opties**
* **Orb**: Kies twee verloopkleuren (bijvoorbeeld #6DB035 & #F5CABB).
* **Link/afbeelding**: Gebruik een aangepaste avatarafbeelding.
#### Weergavetekst
Pas alle weergegeven tekstelementen van de widget aan, bijvoorbeeld om knoplabels te wijzigen.
#### Voorwaarden
Geef aangepaste algemene voorwaarden weer vóór het gesprek.
**Beschikbare opties**
* **Inhoud van voorwaarden**: Gebruik Markdown om je beleidstekst op te maken.
* **Local storage-sleutel**: Een sleutel (bijvoorbeeld "terms\_accepted") om terugkerende gebruikers niet opnieuw te vragen.
**Gebruik**
De voorwaarden worden vóór het starten van het gesprek in een modaal venster aan gebruikers getoond:
Je kunt de voorwaarden in Markdown schrijven, waarmee je het volgende kunt doen:
* Links naar extern beleid toevoegen
* Tekst opmaken met koppen en lijsten
* Nadruk en styling toevoegen
Lees voor meer hulp met Markdown de [CommonMark-handleiding](https://commonmark.org/help/).
> **Info**
>
> Na acceptatie wordt de status lokaal opgeslagen en krijgt de gebruiker bij volgende
> bezoeken geen nieuwe melding.
#### Taal
Schakel ondersteuning voor meerdere talen in de widget in.
> **Note**
>
> Als je taalkeuze wilt inschakelen, moet je eerst [extra talen](/docs/nl/eleven-agents/customization/voice/customization/language) aan je agent toevoegen.
#### Dempen
Sta gebruikers toe hun audio in de widget te dempen.
Als je de dempen-knop wilt toevoegen, schakel je deze in op de kaart `interface` van de `widget`-instellingen
van de agent.
#### Deelbare pagina
Pas je openbare landingspagina voor de widget aan (deelbare link).
**Beschikbare opties**
* **Beschrijving**: Geef een korte alinea die het doel van het gesprek uitlegt.
---
## Geavanceerde implementatie
> **Note**
>
> Voor geavanceerdere aanpassingen gebruik je de typeveilige [ElevenAgents SDK's](/docs/nl/eleven-api/resources/libraries) met een Next.js-, React- of Python-applicatie.
### Client Tools
Met clienttools kun je de functionaliteit van de widget uitbreiden door event listeners toe te voegen. Hierdoor kan de widget bijvoorbeeld de volgende acties uitvoeren:
* De gebruiker naar een specifieke pagina doorsturen
* Een e-mail naar je supportteam sturen
* De gebruiker naar een externe URL doorsturen
Om voorbeelden van deze tools in actie te zien, start je een gesprek met de agent rechtsonder op deze pagina. De [broncode is beschikbaar op GitHub](https://github.com/elevenlabs/elevenlabs-dx/blob/main/fern/assets/scripts/widget.js) als referentie.
#### Een clienttool maken
Volg de [handleiding voor clienttools](/docs/nl/eleven-agents/customization/tools/client-tools) om je eerste clienttool te maken.
#### Voorbeeld: de tool \`redirectToExternalURL\` maken
#### Voorbeeldimplementatie
Hieronder zie je een voorbeeld van hoe je de door de widget geactiveerde tool `redirectToExternalURL` in je JavaScript-code verwerkt:
**`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**
>
> Bekijk onze typeveilige [SDK's](/docs/nl/eleven-api/resources/libraries) voor implementaties in React, Next.js en Python.