DOCS
Guide d'intégration
Intégrez un avatar IA sur votre site de trois manières — en seulement deux lignes de code. Les paramètres complets et codes d'erreur sont dans la console.
Trois étapes pour intégrer
Connectez-vous à la console, créez un avatar avec l'apparence et la voix souhaitées, obtenez un Agent ID.
Une clé par défaut est générée automatiquement ; créez des clés séparées par site avec des listes blanches d'origines.
Récupérez l'extrait complet depuis la page Intégration de la console, remplacez les espaces réservés et publiez.
Quelle méthode choisir
Mêmes capacités d'avatar ; choisissez la voie adaptée à votre stack.
| Méthode | Idéal pour | Contrôle | Isolation des styles |
|---|---|---|---|
| JS SDK | SPA nécessitant l'abonnement aux événements et le contrôle programmatique | ★★★ | Moyenne |
| Web Component | Vue / React / HTML natif, configuration minimale | ★★ | Élevée (Shadow DOM) |
| iframe | Sites statiques, CMS, articles, zéro dépendance | ★ | Maximale (sandbox) |
Choisissez votre voie d'intégration
Décidé par ce que renvoie votre LLM —— texte seul prend la voie A, audio fourni prend la voie B.
Votre LLM renvoie du texte —— nous gérons TTS + synchro labiale
Envoyez-nous du texte brut. Nous synthétisons la voix et animons la bouche de l'avatar. Voie la plus rapide : quelques lignes de vrai code et c'est en ligne.
Recommandé pour une première intégration
Votre LLM renvoie texte + audio —— nous ne faisons que la synchro labiale
Apportez votre propre TTS pour contrôler totalement la voix — IP de célébrité, voix de marque, dialectes. Nous alignons juste les lèvres.
Pour une voix de marque
Commencez par A. Passer à B plus tard ne change pas l'architecture —— même instance widget, appel d'API différent.
Démarrage le plus rapide · Exemple SDK
Copiez l'extrait, remplacez agent_xxx et YOUR_API_KEY par les vôtres — c'est terminé.
<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' },
// Voie A : votre LLM renvoie du texte, nous gérons TTS + synchro labiale
onUserInput: async (msg) => {
const reply = await myCustomerLLM(msg.content);
widget.replyText(reply);
},
});
</script>Les extraits JS SDK / Web Component, la référence des paramètres, les codes d'erreur et la configuration des origines autorisées sont tous dans la console.
Voir la documentation d'intégration complète
Connectez-vous à la console → Intégration : obtenez votre clé API, tous les exemples de code, la référence des paramètres et les conseils de gestion d'erreurs.
Ouvrir la console