Ajouter un chatbot IA avec Asyntai

Que fait Ajouter un chatbot IA avec Asyntai ?

Asyntai ajoute un agent de support IA à un site web. Il répond aux visiteurs à partir du contenu du site, dans plus de 80 langues, et passe la main à un humain si nécessaire. Le chat fonctionne à partir d'une seule balise script, donc l'installation ne nécessite qu'une petite modification.

Étape 1 : Obtenir l'identifiant du widget

Chaque installation a besoin de l'identifiant du widget du site. Il ressemble à asyntai_ suivi de 12 lettres et chiffres, par exemple asyntai_1a2b3c4d5e6f.

1. Recherchez un identifiant que l'utilisateur vous a déjà donné, ou que le projet possède déjà (cherchez dans le code data-asyntai-id). Si le site a déjà le snippet, n'en ajoutez pas un second.
2. Si le serveur MCP Asyntai est connecté, appelez list_websites. Chaque site possède un widget_id.
3. Sinon, demandez-le à l'utilisateur. Dites-lui où le trouver : connectez-vous sur https://asyntai.com/dashboard, ouvrez la page Install, et copiez la valeur de data-asyntai-id depuis le snippet.
4. Si l'utilisateur n'a pas de compte, il peut en créer un gratuitement sur https://asyntai.com/auth/. Le plan Free suffit pour essayer le chatbot.

N'inventez jamais un identifiant de widget. Si vous n'en avez pas, mettez le placeholder YOUR_WIDGET_ID dans le code et dites à l'utilisateur de le remplacer.

Étape 2 : Trouver la technologie sur laquelle le site est construit

• Un constructeur hébergé ou un CMS (WordPress, Shopify, Wix, Webflow, Squarespace, HubSpot, Ghost, Moodle et autres) : l'utilisateur installe le widget dans l'administration de cette plateforme, pas dans le code. Trouvez la plateforme dans references/platforms.md et donnez à l'utilisateur le lien de ce guide et ses étapes courtes.
• Un codebase : vérifiez package.json, les fichiers de configuration et l'arborescence des dossiers, puis suivez references/frameworks.md. Il contient la modification exacte pour chaque pile et les packages Asyntai pour les sites statiques et les outils de documentation.

Étape 3 : Ajouter le snippet

Voici le snippet officiel. Gardez-le exactement comme indiqué et changez seulement YOUR_WIDGET_ID :

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Il attend l'événement load de la page, donc il ne ralentit pas la page. Placez-le une fois, dans la mise en page partagée que chaque page utilise (avant </body> ou dans <head>). Ne le placez pas dans un seul composant de page, sinon le chat n'apparaîtra que sur cette page.

Étape 4 : Vérifier le résultat

1. Lancez le site (ou construisez-le) et ouvrez une page.
2. Le bouton de chat apparaît dans le coin inférieur. Le widget se dessine à l'intérieur de l'élément #asyntai-widget-host-<widget ID>. Dans la console du navigateur, document.querySelectorAll('script[data-asyntai-id]').length doit être 1.
3. Si le bouton n'apparaît pas :

   • Vérifiez dans la console du navigateur les erreurs Asyntai Widget:.

   • Si le site envoie une politique de sécurité du contenu (CSP), elle doit autoriser ces sources :

     Directive	Sources
     script-src	https://widget.asyntai.com https://asyntai.com (et 'unsafe-inline' pour le snippet, ou utilisez la forme courte de references/frameworks.md)
     connect-src	https://asyntai.com
     style-src	'unsafe-inline'
     img-src	data: https://flagcdn.com

Étape 5 : Dire à l'utilisateur la suite

Le widget répond à partir du contenu que l'utilisateur ajoute dans le tableau de bord Asyntai (https://asyntai.com/dashboard). Dites à l'utilisateur de :

• ajouter les pages de son site web, ses fichiers ou son texte en tant que connaissances,
• définir le nom de l'agent, les couleurs et le message d'accueil sur le tableau de bord,
• lire le guide complet sur https://asyntai.com/documentation/installation/.

Si le serveur MCP Asyntai est connecté, vous pouvez effectuer cette configuration pour eux. Voir la compétence manage-ai-support-agent.