Créez un agent, configurez l'authentification OAuth et intégrez le widget sur votre site web.
L'application widget est hébergée sur widget.companin.tech et fournit un moyen facile d'intégrer un agent d'IA de support client sur 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 fonctionne dans une iframe isolée sur votre site Web. Cette architecture garantit que le widget ne sera pas en conflit 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 fonctionnement 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 d'IA 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 la 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 vers la création d'un ticket de support."
Créez une application OAuth pour authentifier votre widget :
client_id de l'application crééeLe moyen le plus simple d'intégrer le widget est de l'incorporer directement à l'aide d'un 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_… — trouvez-la sur la page Widget ou 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" async></script>Chaque attribut a un but spécifique dans la configuration de votre widget :
data-widget-key : L'ID de widget de votre widget - La valeur unique dont la plupart des installations ont besoin. Il résout votre client, agent et serveur de configuration 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 explicitement 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 : L'UUID de votre agent - Cela identifie quel agent AI de support client gère les conversations.data-config-id : L'UUID de votre configuration de widget - Cela détermine à quoi ressemble et comment 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 votre configuration de 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-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 va automatiquement :
start_open de la configurationstart_open de votre configurationdata-dev="true" pour les tests localhost