Skip to navigation
ImplementerenWeb

Widget aanpassen

Lees hoe je het uiterlijk van de widget aanpast aan je merk en het gedrag van de agent vanuit html personaliseert.

Widgets maken directe integratie van ElevenAgents in elke website mogelijk. Je kunt je widget aanpassen via de UI of via onze type-safe ElevenAgents SDK’s voor volledige controle over styling en gedrag. De SDK-overschrijvingen hebben voorrang op aanpassingen in de UI. Onze widget is multimodaal en kan zowel tekst als audio verwerken.

Je kunt de widgetconfiguratie en deelbare link van een agent ook ophalen vanuit Claude of een andere MCP-client via de gehoste MCP-server.

Modaliteitsconfiguratie

De widget ondersteunt flexibele invoermodi die passen bij je use case. Configureer deze opties in het dashboard onder Channels → Widget → Interface.

Multimodaliteit wordt volledig ondersteund in onze client-SDK’s. Lees meer hier.

Widgetinterface-opties

Beschikbare modi:

  • Alleen spraak (standaard): Gebruikers communiceren alleen via spraak.
  • Spraak + tekst: Gebruikers kunnen tijdens gesprekken wisselen tussen spraak- en tekstinvoer.
  • Chatmodus: Gesprekken beginnen in chatmodus (alleen tekst), zonder spraakmogelijkheden, wanneer ze met een tekstbericht worden gestart.

Lees onze handleiding voor de chatmodus voor meer informatie over het gebruik van de chatmodus (alleen tekst) via onze SDK’s.

De widget staat standaard in de modus voor alleen spraak. Schakel de tekstinvoerschakelaar in om multimodale interacties toe te staan, of schakel ondersteuning voor de modus voor alleen tekst in voor gesprekken die uitsluitend op tekst zijn gebaseerd en via tekst worden gestart.

De widget insluiten

Widgets vereisen momenteel openbare agents met uitgeschakelde authenticatie. Zorg dat dit is uitgeschakeld op het tabblad Advanced in de instellingen van je agent.

Voeg dit codefragment toe aan de sectie <body> 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
<elevenlabs-convai agent-id="<replace-with-agent_7101k5zvyjhmfg983brhmhkd98n6>"></elevenlabs-convai>
<script
  src="https://unpkg.com/@elevenlabs/convai-widget-embed"
  async
  type="text/javascript"
></script>

Definieer voor extra beveiliging toegestane domeinen in de Allowlist van je agent (te vinden op het tabblad Security). Dit beperkt de toegang tot alleen de opgegeven hosts.

Widgetattributen

Deze basiscode voor insluiting toont de widget met de standaardconfiguratie die is ingesteld in het dashboard van de agent. De widget ondersteunt verschillende HTML-attributen voor verdere aanpassing:

<elevenlabs-convai
  agent-id="agent_id"              // Required: Your agent ID
  signed-url="signed_url"          // Alternative to agent-id
  server-location="us"             // Optional: "us" or default
  variant="expanded"               // Optional: Widget display mode
  dismissible="true"               // Optional: Allow the user to minimize the widget
></elevenlabs-convai>
<elevenlabs-convai
  avatar-image-url="https://..." // Optional: Custom avatar image
  avatar-orb-color-1="#6DB035" // Optional: Orb gradient color 1
  avatar-orb-color-2="#F5CABB" // Optional: Orb gradient color 2
></elevenlabs-convai>
<elevenlabs-convai
  action-text="Need assistance?" // Optional: CTA button text
  start-call-text="Begin conversation" // Optional: Start call button
  end-call-text="End call" // Optional: End call button
  expand-text="Open chat" // Optional: Expand widget text
  listening-text="Listening..." // Optional: Listening state
  speaking-text="Assistant speaking" // Optional: Speaking state
></elevenlabs-convai>

De widget geeft markdown weer in antwoorden van de agent. Links worden standaard als platte tekst weergegeven om phishing te voorkomen.

<elevenlabs-convai
  markdown-link-allowed-hosts="example.com"  // Domains where links are clickable (use "*" for all)
  markdown-link-include-www="true"           // Also allow www variants (default: true)
  markdown-link-allow-http="true"            // Allow http:// links (default: true)
  syntax-highlight-theme="dark"              // Code block theme: "dark", "light", or "auto"
></elevenlabs-convai>

Runtimeconfiguratie

Met nog twee html-attributen kun je het gedrag van de agent tijdens runtime aanpassen. 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.

<elevenlabs-convai
  agent-id="agent_7101k5zvyjhmfg983brhmhkd98n6"
  dynamic-variables='{"user_name": "John", "account_type": "premium"}'
></elevenlabs-convai>

Alle dynamische variabelen die de agent nodig heeft, moeten aan de widget worden doorgegeven.

Lees meer in onze handleiding voor dynamische variabelen.

Overschrijvingen

Met overschrijvingen kun je het gedrag van je agent tijdens runtime volledig aanpassen:

<elevenlabs-convai
  agent-id="agent_7101k5zvyjhmfg983brhmhkd98n6"
  override-language="es"
  override-prompt="Custom system prompt for this user"
  override-first-message="Hi! How can I help you today?"
  override-voice-id="axXgspJ2msm3clMCkdW3"
></elevenlabs-convai>

Je kunt overschrijvingen voor specifieke velden inschakelen; ze zijn volledig optioneel.

Lees meer in onze handleiding voor overschrijvingen.

Visuele aanpassing

Pas het uiterlijk, de tekstinhoud, taalkeuze en meer van de widget aan.

Open je agent in het dashboard en ga naar het tabblad Widget om het uiterlijk, de avatar, tekst, voorwaarden, taalondersteuning en meer aan te passen.

Widget aanpassen

Pas de kleuren en vormen van de widget aan je merkidentiteit aan.

Uiterlijk van de widget

Rich content

Met rich content kan de agent naast berichten interactieve componenten tonen. Configureer dit in het dashboard onder Channels → Widget → Rich content.

Instellingen voor rich content van widget

Rich content wordt getoond in tekstgesprekken en in spraakgesprekken wanneer Realtime transcript of the conversation is ingeschakeld onder Interface. Het is alleen beschikbaar in de ingesloten widget.

Snelle antwoorden zijn knoppen waarop gebruikers kunnen tikken in plaats van te typen. Wanneer een gebruiker op een knop tikt, wordt het label als volgend bericht van de gebruiker verstuurd.

Snelle antwoorden

Voorgesteld door de agent

De agent stelt tijdens het gesprek maximaal drie antwoorden voor, bijvoorbeeld om een keuze te bevestigen of vervolgstappen aan te bieden.

Antwoorden bij het eerste bericht

Voeg maximaal drie antwoorden toe onder First message replies om ze bij het eerste bericht van de agent te tonen, zodat gebruikers het gesprek met een tik kunnen beginnen. Sleep ze om de volgorde te wijzigen.

Deze antwoorden staan vast: ze verschijnen bij elk eerste bericht en de agent kiest ze niet. Ze worden samen met je andere taalpresets vertaald.

Hoe de agent rich content gebruikt

Behalve antwoorden bij het eerste bericht beslist de agent bij elke beurt of snelle antwoorden of een carrousel moet worden getoond. Een antwoord waarvoor geen component nodig is, blijft platte tekst. Beschrijf in de system prompt van de agent wanneer en hoe deze worden getoond.

Snelle antwoorden en de carrousel zijn standaard ingeschakeld voor nieuwe agents. Schakel ze in de widgetinstellingen in voor agents die zijn gemaakt voordat rich content beschikbaar was.

Geavanceerde implementatie

Gebruik voor geavanceerdere aanpassingen de type-safe ElevenAgents SDK’s met een Next.js-, React- of Python-applicatie.

Clienttools

Met clienttools kun je de functionaliteit van de widget uitbreiden door event listeners toe te voegen. Hiermee kan de widget acties uitvoeren zoals:

  • De gebruiker doorsturen naar een specifieke pagina
  • Een e-mail sturen naar je supportteam
  • De gebruiker doorsturen naar een externe URL

Start een gesprek met de agent rechtsonder op deze pagina om voorbeelden van deze tools in actie te zien. De broncode is beschikbaar op GitHub als referentie.

Een clienttool maken

Volg de handleiding voor clienttools om je eerste clienttool te maken.

Configuratie van clienttool

Voorbeeldimplementatie

Hieronder staat een voorbeeld van hoe je de door de widget geactiveerde tool redirectToExternalURL verwerkt in je JavaScript-code:

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");
        },
      };
    });
  }
});

Bekijk onze type-safe SDK’s voor implementaties in React, Next.js en Python.