Créez un agent, configurez l'authentification OAuth et intégrez le widget sur votre site Web.
L'application widget est hébergée à widget.companin.tech et fournit un moyen facile d'intégrer un agent AI de support client dans votre site Web. Pour commencer, vous devrez créer un agent et une application OAuth.
Le widget est une application légère et autonome qui s'exécute dans un iframe isolé sur votre site Web. Cette architecture garantit que le widget ne conflit pas avec votre CSS ou JavaScript existants, tout en maintenant d'excellentes performances et sécurité.
⚡ Déploiement rapide
La plupart des développeurs ont le widget en cours d'exécution sur leur site en moins de 10 minutes. Le processus de configuration implique juste trois étapes : créer des identifiants, configurer l'apparence et ajouter une seule balise de script à votre HTML.
Tout d'abord, créez un agent AI de support client dans votre tableau de bord :
Votre agent est le cerveau IA derrière le widget. Il traite les messages des utilisateurs, maintient le contexte de conversation et génère des réponses intelligentes. Chaque agent peut être personnalisé avec des instructions spécifiques, des traits de personnalité et des bases de connaissances pour correspondre à votre cas d'utilisation.
Astuce : Donnez à votre agent des instructions claires et spécifiques sur son rôle et ses limitations. Par exemple : "Vous êtes un agent de support client utile pour un produit SaaS. Vous pouvez répondre aux questions sur les fonctionnalités, les prix et la gestion des comptes. Pour les problèmes techniques, dirigez les utilisateurs à créer un ticket de support."
Créez une application OAuth pour authentifier votre widget :
client_id de l'application crééeLa manière la plus simple d'intégrer le widget est de l'incorporer directement à l'aide d'une iframe. Cette méthode ne nécessite aucune initialisation JavaScript et fonctionne immédiatement. Pour plusieurs iframes sur une page, gardez chaque intégration limitée à son propre conteneur et paramètres.
<iframe src="https://widget.companin.tech/embed/session?key=YOUR_WIDGET_KEY&locale=en" style="border:none; width:100%; height:600px; border-radius:8px;" title="Customer Support AI Agent Widget"></iframe>Remplacez YOUR_WIDGET_KEY par la clé d'installation de votre widget (la valeur wgt_… — copiez-la depuis la page Widget ou la page d'installation dans le tableau de bord). Le paramètre locale peut être défini pour correspondre à la langue de votre site.
La méthode d'intégration recommandée consiste à utiliser notre chargeur de widget JavaScript, qui fournit un dimensionnement automatique, une gestion de configuration et un comportement réactif.
Ajoutez la balise de script suivante à votre page HTML :
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY" data-instance-id="support-widget" data-locale="en" data-theme="system" async></script>Chaque attribut a un but spécifique dans la configuration de votre widget :
data-widget-key : L'ID de votre widget - La seule valeur dont la plupart des installations ont besoin. Il résout votre client, agent et config côté serveur, donc vous ne les collez pas séparément.Les trois attributs ci-dessous sont une alternative avancée à data-widget-key - utilisez-les pour des configurations multi-instances où vous devez cibler un client, un agent ou une configuration spécifique :
data-client-id : Votre ID client OAuth - Cela authentifie votre application avec notre API. Pensez-y comme le mot de passe de votre application.data-agent-id : Le UUID de votre agent - Cela identifie quel agent AI de support client gère les conversations.data-config-id : Le UUID de votre configuration de widget - Cela détermine à quoi ressemble et se comporte votre widget (couleurs, taille, position, etc.).data-instance-id : ID d'instance unique par widget - Nécessaire lors de l'intégration de plusieurs widgets sur la même page pour éviter les collisions et permettre le ciblage API par instance.data-custom-css : Obsolète. Définir cet attribut enregistre un avertissement dans la console et n'a aucun effet. Définissez custom_css sur la configuration de votre widget dans le tableau de bord à la place — il est chargé à partir de la configuration et injecté dans l'iframe automatiquement.data-locale : Code de langue (par exemple, "en", "es", "fr") - Définit la langue d'affichage du widget. L'agent répondra toujours dans n'importe quelle langue que les utilisateurs écrivent.data-theme : Mode de thème - light, dark, ou system (suivre l'appareil du visiteur). Choisit quelle palette de couleurs (configurée dans votre tableau de bord) le widget affiche. Omettez-le pour utiliser votre défaut enregistré.data-dev : Défini sur "true" pour le mode développement (localhost) - Utilisez ceci lors des tests locaux. Supprimez ou définissez sur "false" pour la production.Le widget se chargera automatiquement :
start_open de la configuration.start_open de votre configurationdata-dev="true" pour les tests en localhost