DOCS
Integrationsleitfaden
Betten Sie einen KI-Avatar auf Ihrer Website auf drei Arten ein — mit nur zwei Zeilen Code. Vollständige Parameter und Fehlercodes finden Sie in der Konsole.
Drei Schritte zur Integration
Melden Sie sich in der Konsole an, erstellen Sie einen Avatar mit gewünschtem Aussehen und Stimme, erhalten Sie eine Agent-ID.
Ein Standardschlüssel wird automatisch generiert; erstellen Sie separate Schlüssel pro Site mit erlaubten Origin-Whitelists.
Holen Sie sich das vollständige Snippet von der Integrationsseite der Konsole, ersetzen Sie Platzhalter und veröffentlichen Sie.
Welche Methode wählen
Gleiche Avatar-Funktionen; wählen Sie den zu Ihrem Stack passenden Weg.
| Methode | Geeignet für | Kontrolle | Style-Isolation |
|---|---|---|---|
| JS SDK | SPAs mit Event-Subscriptions und programmatischer Steuerung | ★★★ | Mittel |
| Web Component | Vue / React / pures HTML, minimaler Aufwand | ★★ | Hoch (Shadow DOM) |
| iframe | Statische Sites, CMS, Artikel, keine Abhängigkeiten | ★ | Höchste (sandbox) |
Welchen Integrationsweg wählen?
Entschieden durch das, was Ihr LLM zurückgibt —— nur Text → Weg A, mit Audio → Weg B.
Ihr LLM gibt Text zurück —— wir übernehmen TTS + Lippensynchronisation
Senden Sie uns reinen Text. Wir synthetisieren die Stimme und steuern den Mund des Avatars. Schnellster Weg: ein paar Zeilen echter Code, dann läuft es.
Für die erste Integration empfohlen
Ihr LLM gibt Text + Audio zurück —— wir machen nur Lippensynchronisation
Bringen Sie Ihr eigenes TTS mit, um die Stimme voll zu kontrollieren — Promi-IP, Markenstimme, Dialekte. Wir richten nur die Lippenbewegung aus.
Für markeneigene Stimmen
Mit A starten. Späterer Wechsel zu B ändert die Architektur nicht —— gleiche Widget-Instanz, anderer API-Aufruf.
Schnellster Start · SDK-Beispiel
Snippet kopieren, agent_xxx und YOUR_API_KEY mit Ihren eigenen ersetzen — fertig.
<script type="module" src="https://embed.avataraisdk.com/sdk.js"></script>
<script type="module">
const widget = AIAvatar.init({
agentId: 'agent_xxxxxxxxxxxx',
apiKey: 'YOUR_API_KEY',
behavior: { llmMode: 'external' },
// Route A: Ihr LLM gibt Text zurück, wir übernehmen TTS + Lippensynchronisation
onUserInput: async (msg) => {
const reply = await myCustomerLLM(msg.content);
widget.replyText(reply);
},
});
</script>JS-SDK- / Web-Component-Snippets, Parameterreferenz, Fehlercodes und Origin-Whitelist-Konfiguration finden Sie alle in der Konsole.
Vollständige Integrationsdokumentation ansehen
Melden Sie sich in der Konsole an → Integration: Erhalten Sie Ihren API-Schlüssel, alle Codebeispiele, Parameterreferenzen und Tipps zur Fehlerbehandlung.
Konsole öffnen