Widget de chat #

Guide d’intégration du widget de chat sur site web #

Ajoutez un widget de chat convivial à votre site web qui permet aux visiteurs de communiquer directement via l’interface de votre site. Le processus d’intégration est simple et dotera votre site web de fonctionnalités de messagerie intégrées.

Création et configuration du widget de chat #

Comment y accéder :

1. Cliquez sur Paramètres en bas de la barre latérale gauche. (Sur un téléphone, appuyez d’abord sur l’icône de menu ☰ dans le coin supérieur pour ouvrir la barre latérale.)
2. Dans la colonne de gauche des paramètres, sous Canaux, cliquez sur Canaux.
3. Trouvez la carte Widget de chat pour site web.
4. Si vous n’avez pas encore de widget, cliquez sur Connecter pour en créer un avec un nom d’affichage et un message de bienvenue.
5. Une fois créé, cliquez sur Gérer à tout moment pour ouvrir le panneau de configuration complet.

Les modifications que vous enregistrez s’appliquent automatiquement à votre widget en ligne — il n’est pas nécessaire de copier à nouveau le code d’installation après avoir effectué une modification.

Un Aperçu en direct se trouve juste à côté des paramètres : une page web exemple avec votre widget réel en cours d’exécution, affichant vos couleurs, votre position, votre logo, votre icône de lancement et votre fenêtre contextuelle proactive exactement comme les visiteurs les verront. Il suit vos modifications au fur et à mesure que vous les effectuez, vous n’avez donc pas besoin d’enregistrer pour voir à quoi ressemble un changement de couleur ou de thème. Vous pouvez même cliquer sur le bouton de chat dans l’aperçu pour ouvrir le widget et l’essayer.

Ce que vous pouvez personnaliser #

Le panneau Gérer est organisé en quatre sections.

Apparence #

• Thème de style : Changez le style de tout le widget en un clic. Six thèmes définissent l’apparence, les couleurs, les coins et la police : Classic (le look original plein — une barre d’en-tête colorée sur un panneau plat), Glass (un panneau translucide et givré qui floute légèrement la page derrière lui, avec l’en-tête et la boîte de message flottant comme des cartes arrondies à l’intérieur), Midnight (Glass dans des couleurs sombres), Bloom (rose doux, très arrondi), Ember (Glass orange chaud) et Mono (noir et blanc, coins vifs). Un thème est un point de départ — après en avoir choisi un, vous pouvez toujours modifier chaque couleur ou paramètre individuellement. Les nouveaux widgets commencent sur Glass ; le changement est instantané partout où le widget est intégré, sans aucune modification de code sur votre site.
• Coins et police : Deux paramètres de style indépendants. Coins définit le degré d’arrondi du panneau, des bulles et des boutons (Arrondi, Doux ou Vif), et Police choisit la police de caractères que les visiteurs voient (Par défaut, Serif, Arrondie ou Mono) — les polices proviennent de ce qui est déjà sur l’appareil du visiteur, donc rien de supplémentaire ne se charge sur votre site.
• Nom d’affichage : Affiché dans l’en-tête du widget.
• Logo : Téléchargez une image qui apparaît en haut du chat. Utilisez le logo de votre entreprise ou une photo sympathique.
• Icône de lancement : L’icône sur le bouton de chat flottant lui-même. Choisissez l’une des icônes intégrées (bulle de chat, avion en papier, point d’interrogation, etc.), réutilisez votre logo téléchargé ou téléchargez une image séparée — pratique si vous souhaitez une photo d’un membre réel de l’équipe pour accueillir les visiteurs.
• Couleurs : Cinq couleurs, chacune désignant la partie du widget qu’elle colore. Couleur de marque correspond au bouton flottant, à l’en-tête et aux messages du visiteur, avec Texte de marque pour le texte qui s’y affiche. Bulle du bot est l’arrière-plan des réponses de votre bot et de l’indicateur de saisie, avec Texte de la bulle du bot pour les mots à l’intérieur et les points d’animation de saisie. Fenêtre de chat est le panneau derrière tous les messages. Choisissez une couleur de bulle de bot qui est clairement différente de votre couleur de marque — si les deux correspondent, les deux côtés de la conversation auront la même couleur et les visiteurs ne pourront pas distinguer les réponses de votre bot des leurs. Une bulle de bot gris clair avec du texte sombre à côté de votre couleur de marque est la combinaison sûre.
• Position : Placez le bouton de chat flottant dans le coin en bas à droite ou en bas à gauche, avec un décalage horizontal et vertical (en pixels) s’il chevauche un autre élément de votre page.
• Questions de démarrage : Suggestions de réponse rapide (puces cliquables) affichées dans le chat pour que les visiteurs puissent commencer en un seul clic au lieu de taper — par exemple “Quels sont vos prix ?” ou “Offrez-vous du support ?” — jusqu’à 10.
• Ligne de pied de page : Une petite ligne optionnelle de votre propre texte sous la boîte de message, par exemple “Propulsé par Votre Agence”. Elle est désactivée par défaut, et rien n’est affiché sous la boîte de message lorsqu’elle est désactivée. Activez-la, saisissez votre texte (jusqu’à 40 caractères) et, si vous le souhaitez, ajoutez un lien commençant par https:// ; les visiteurs qui cliquent sur le texte ouvrent cette page dans un nouvel onglet. Les agences l’utilisent pour apposer leur propre nom sur les widgets qu’elles créent pour leurs clients.

Comportement #

• Message d’accueil : Le premier message que les visiteurs voient lorsqu’ils ouvrent le chat (par exemple, « Comment puis-je vous aider ? »).
• Son : Jouer un son lorsqu’un nouveau message arrive dans le chat.
• Demander l’autorisation de notification : Inviter facultativement les visiteurs à autoriser les notifications du navigateur, afin qu’ils soient alertés des réponses même lorsqu’ils ont changé d’onglet.
• Bulle contextuelle proactive : Une petite bulle optionnelle qui apparaît à côté du bouton de chat pour inviter les utilisateurs. Activez-la pour définir son message, le texte des boutons accepter/refuser, et le nombre de secondes à attendre avant qu’elle n’apparaisse. La bulle se ferme d’elle-même après 20 secondes si le visiteur ne clique pas dessus. C’est le seul texte que le widget affiche à côté du bouton de chat : il n’existe pas de paramètre pour une étiquette permanente à côté du bouton.
• Vitesse de réponse de l’IA : Un curseur entre Plus lent (plus humain — l’IA prend un moment avant de répondre) et Vitesse max (plus robotique — les réponses arrivent aussi vite que possible). Équilibré se situe au milieu. Le premier message d’une réponse arrive avec le délai défini par le curseur, l’indicateur de saisie s’affichant peu avant.
• Afficher une note d’activité pendant que l’IA travaille : Désactivé par défaut. Lorsqu’une réponse prend plus de quelques secondes, par exemple parce que votre agent effectue une recherche dans un autre système, les visiteurs voient une courte ligne à côté des points de saisie : « Préparation de votre réponse » après 5 secondes, « Recherche en cours pour vous » après 15 secondes, puis « Toujours en cours, presque terminé » avec des excuses pour l’attente si cela dure plus longtemps. Les réponses rapides affichent toujours uniquement les points. La ligne suit la langue du widget et n’apparaît que lorsque votre IA travaille réellement sur une réponse, jamais lorsque l’IA est désactivée pour ce chat ou qu’une personne a pris le relais.

Langues #

Le widget est multilingue par défaut — il n’y a rien à activer.

• Il détecte automatiquement la langue du visiteur. Il examine d’abord la langue déclarée par votre page dans son HTML (<html lang="it">), puis il se rabat sur la langue du navigateur du visiteur. Si aucune de ces langues n’est prise en charge, les libellés du widget s’affichent dans la langue dans laquelle vous avez rédigé votre message d’accueil, et votre message d’accueil, votre bulle contextuelle et vos questions de démarrage apparaissent exactement tels que vous les avez écrits.
• Une langue de page qui contredit votre message d’accueil n’est pas prise en compte. Certains créateurs de sites insèrent lang="en" sur chaque page, quelle que soit la langue du site. Lorsque la page déclare une langue et que vous avez rédigé votre message d’accueil dans une autre, le widget traite la valeur de la page comme une valeur par défaut du créateur : il suit plutôt la langue du navigateur du visiteur, et si celle-ci n’est pas prise en charge, il utilise la langue dans laquelle vous avez écrit. Une page qui modifie sa valeur lang lorsque le visiteur choisit une langue sur votre site est toujours suivie. Si vous préférez ne pas dépendre de tout cela, fixez la langue dans la section Comportement.
• Ou choisissez-en une vous-même. Le champ Langue du widget dans la section Comportement est réglé sur Auto par défaut, ce qui correspond à la détection ci-dessus. Choisissez une langue à cet endroit et les libellés du widget (les champs Prénom, E-mail et Téléphone du formulaire visiteur et leur exemple de texte, l’avis de confidentialité, les boutons) resteront dans cette langue, peu importe ce qu’indiquent la page ou le navigateur. Utilisez cette option lorsque votre créateur de site ne déclare pas la bonne langue, ou lorsque vous souhaitez une langue fixe pour chaque visiteur.
• Langues prises en charge : anglais, néerlandais, allemand, français, espagnol, italien, portugais, roumain, polonais, arabe, finnois, philippin, slovène, thaï, bengali, japonais, norvégien (Bokmål) et turc. Il s’agit de la liste pour les boutons et les libellés du widget.
• Les langues s’écrivant de droite à gauche sont mises en page de droite à gauche. Pour les visiteurs arabes, hébreux, persans et ourdous, toute la fenêtre de chat est inversée : l’en-tête, les bulles de message, les points de saisie, le formulaire visiteur et la zone de message commencent tous par la droite. Le bouton de la bulle reste dans le coin que vous avez choisi. Les visiteurs hébreux, persans et ourdous voient les libellés en anglais (ou dans la langue que vous avez fixée), mais la mise en page suit toujours leur langue. Un message écrit dans une direction différente, comme une réponse en anglais dans un chat en arabe, se lit toujours dans le bon ordre.
• Vos messages sont traduits pour vous. Chaque fois que vous enregistrez, votre message d’accueil, votre bulle contextuelle proactive et vos questions de démarrage sont traduits dans les dix-huit langues ci-dessus. Vous ne les écrivez qu’une seule fois, dans la langue de votre choix : la langue dans laquelle vous avez écrit est reconnue à partir du texte lui-même, cette version est conservée mot pour mot, et toutes les autres langues en sont une traduction. Peu importe la langue définie pour votre compte.
• Rédigez votre propre version pour une langue. La section Traductions du panneau Gérer, juste en dessous de Comportement, vous permet de remplacer la traduction automatique par votre propre formulation, par exemple un espagnol formel (« usted ») là où la traduction automatique est informelle. Choisissez une langue sous Langue, puis remplissez l’un des champs suivants : Message d’accueil, Message contextuel, les textes Accepter et Refuser de la bulle contextuelle (affichés pendant que la bulle est présente) et Questions de démarrage. Chaque champ affiche la traduction automatique en gris ; Démarrer à partir de la traduction automatique la copie afin que vous puissiez la modifier à partir de là. Tout ce que vous laissez vide conserve la traduction automatique. Les langues que vous avez rédigées vous-même sont listées en premier, marquées Votre propre formulation, et Supprimer ma formulation (langue) permet de revenir à la traduction automatique pour cette langue. Votre propre formulation est conservée lorsque vous modifiez ultérieurement le texte original ; seules les traductions automatiques sont refaites.
• Les boutons contextuels sont également traduits. Les boutons Accepter et Refuser de la bulle contextuelle proactive sont traduits en même temps que vos autres messages, de sorte qu’un visiteur espagnol ne voit plus de boutons en anglais.
• Rédigez chaque message dans une seule langue. Si vous mettez deux langues dans le même champ — une ligne en anglais et une ligne en italien, par exemple — l’ensemble est traité comme un message unique et traduit tel quel, de sorte qu’un visiteur italien finit par voir la même phrase deux fois. Écrivez-le une fois, dans la langue de votre choix.
• L’IA répond dans la langue du visiteur. Quelle que soit la langue dans laquelle quelqu’un écrit, votre agent répond dans cette même langue, indépendamment de la langue dans laquelle les libellés du widget s’affichent. Si vous préférez qu’il réponde toujours dans une langue fixe, précisez-le dans les instructions de votre agent.
• Définissez la langue par page dans le code d’intégration. Vous utilisez un widget sur un site en anglais et une copie traduite de celui-ci ? Ajoutez data-lang à la balise script du widget sur chaque page. data-lang="es" affiche le widget en espagnol sur cette page, quelle que soit la langue du navigateur ; data-lang="page" lui fait suivre la propre valeur <html lang="..."> de la page (ainsi lang="es-MX" donne l’espagnol), même lorsque votre message d’accueil est rédigé dans une autre langue. Cela prévaut sur le champ Langue du widget, qui lui-même prévaut sur la détection automatique. Par exemple :

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" data-lang="page" defer></script>

Conservez le code d’intégration du panneau Gérer tel quel et ajoutez uniquement l’attribut data-lang. Pour un panneau de chat intégré, placez data-lang sur le <div data-chat-widget="…"> à la place.

Conseil : si votre site web ne définit pas d’attribut lang sur sa balise <html>, ajoutez-en un. C’est le signal le plus fiable dont nous disposons pour choisir la bonne langue, en particulier pour les visiteurs naviguant depuis l’étranger.

Capture de prospects et confidentialité #

• Collecter les informations des visiteurs : Désactivé par défaut. Lorsqu’il est activé, le nom et l’e-mail (et éventuellement le numéro de téléphone) des visiteurs sont demandés avant le début de la conversation, afin que vous puissiez capturer le prospect même s’il quitte le chat en cours de route.
• Titre du formulaire et Sous-titre du formulaire : Personnalisez l’en-tête et la courte explication affichés au-dessus du formulaire.
• Collecter le numéro de téléphone : Activez cette option pour demander également un numéro de téléphone ; désactivée, elle ne collecte que le nom et l’e-mail.
• Collecter le nom de famille : Désactivé par défaut. Activez cette option pour ajouter un champ obligatoire Nom de famille juste après le Prénom. Il est enregistré dans la fiche contact comme nom de famille, afin que votre IA et tout ce qu’elle recherche dans vos propres systèmes dispose du nom complet dès le premier message. Les visiteurs qui ont déjà rempli le formulaire avant que vous n’activiez cette option ne seront pas sollicités à nouveau.
• E-mails de réponse non lus aux visiteurs : un visiteur qui a laissé une adresse e-mail et n’a pas vu votre réponse après 15 minutes reçoit un e-mail le renvoyant vers le chat. Désactivez cette option dans Paramètres → Notifications → Visiteurs du widget de chat. Voir E-mails aux visiteurs du widget de chat.

Un visiteur a laissé un numéro de téléphone et a quitté votre site — puis-je continuer sur WhatsApp ? Oui. Ouvrez sa discussion et choisissez Continuer sur WhatsApp dans le menu à trois points (WhatsApp Web ou WhatsApp Business doit être connecté). Your AI Connector crée une conversation WhatsApp liée pour la même personne, copie son nom, son e-mail et ses détails, et l’IA reprend ce qu’elle a dit sur votre site, afin que personne n’ait à se répéter. Le chat du site web reste là où il est et les deux discussions se renvoient l’une à l’autre sous Conversations liées dans le panneau de contact. Voir Interface de chat.

Un visiteur a laissé son adresse e-mail sans réserver — puis-je effectuer un suivi par e-mail ? Oui, grâce à une automatisation. Une étape Créer un contact avec le Canal défini sur E-mail transforme l’adresse laissée par le visiteur en un contact e-mail sur votre canal E-mail connecté, et une étape Envoyer un message placée après celle-ci permet d’envoyer un e-mail ; les réponses arrivent dans les Discussions pour votre agent e-mail. La procédure complète, y compris comment arrêter la séquence une fois qu’ils indiquent avoir réservé, est disponible dans Automatisations → Exemple : suivis par e-mail pour les prospects issus du chat sur site web.

L’agent IA peut-il proposer lui-même de passer sur WhatsApp ? Oui, et cela ne nécessite aucune fonctionnalité supplémentaire — une ligne dans les instructions de l’agent suffit. Créez un Lien court pour votre numéro WhatsApp avec un message pré-rempli tel que « Bonjour, je discutais sur votre site web et je souhaite continuer ici », puis dites à l’agent quand l’envoyer, par exemple : « Si le visiteur doit partir, souhaite continuer plus tard ou demande WhatsApp, proposez de poursuivre là-bas et envoyez ce lien : (votre lien court) ». Les liens dans le widget sont cliquables, donc le visiteur arrive sur WhatsApp avec votre numéro sélectionné et le message pré-saisi, et son premier message ouvre une conversation WhatsApp dans votre boîte de réception. Si le visiteur a laissé le numéro de téléphone depuis lequel il écrit (avec l’indicatif pays) dans le formulaire du widget, Your AI Connector lie automatiquement les deux conversations et l’IA sur WhatsApp connaît déjà le chat du site web, exactement comme avec Continuer sur WhatsApp. Si aucun numéro de téléphone n’a été collecté, les deux chats ne sont pas liés, alors faites en sorte que le message pré-rempli soit suffisamment précis pour que l’agent WhatsApp sache d’où vient la personne.

• Exiger l’acceptation de la politique de confidentialité : Exigez éventuellement que les visiteurs acceptent votre politique de confidentialité avant de discuter, et définissez l’URL vers laquelle elle pointe.

Que stocke le widget dans le navigateur d’un visiteur, et dois-je le placer derrière une bannière de cookies ? Rien n’est stocké par le simple chargement d’une page. Le widget n’écrit aucun cookie et n’utilise aucun stockage de navigateur tant que le visiteur ne choisit pas de discuter : envoie un premier message, remplit le formulaire d’informations visiteur ou accepte votre politique de confidentialité. À partir de ce moment, il conserve un identifiant de conversation aléatoire et une copie de la conversation dans ce navigateur, en tant que stockage propriétaire sur votre propre domaine, afin que le chat soit toujours présent lors de son retour. Il ne charge aucun script d’analyse ou de suivi et ne définit aucun cookie tiers. Étant donné que rien n’est écrit tant que le visiteur ne demande pas à discuter, cela relève du stockage strictement nécessaire à un service demandé par le visiteur ; vous pouvez donc le charger sans le placer derrière une bannière de consentement. Si votre site utilise tout de même un outil de consentement, il est tout à fait possible de placer le widget derrière celui-ci ; le chat apparaîtra simplement une fois que le visiteur aura donné son accord.

Canaux et intégration #

• Bouton de pièce jointe : Permet aux visiteurs d’envoyer des images et des fichiers dans le chat.
• Sélecteur d’émojis : Ajoute un sélecteur d’émojis à côté de la zone de message.
• Liens vers les canaux : Incluez éventuellement des liens WhatsApp, Instagram ou Messenger afin que les visiteurs puissent poursuivre la conversation sur la plateforme de leur choix. Cela n’apparaît qu’une fois que vous avez connecté un numéro WhatsApp (WhatsApp Business ou WhatsApp Web), Instagram ou Messenger. L’activation du lien WhatsApp remplit automatiquement votre numéro connecté ; le lien reste modifiable, donc après avoir changé de numéro, vous pouvez saisir le nouveau à cet endroit.
• Boutons d’action : Une ligne de raccourcis en haut du chat qui redirige le visiteur vers un autre endroit au lieu d’entamer une conversation — voir Boutons d’action ci-dessous.
• Liste blanche de domaines : Restreignez les sites web autorisés à intégrer votre widget. Ajoutez les domaines sur lesquels vous l’avez installé (par ex. example.com ou *.example.com) ; laissez vide pour autoriser n’importe quel domaine.
• Pays bloqués : Empêchez l’affichage du widget pour les visiteurs des pays que vous ne desservez pas. Les visiteurs dont la localisation réseau se trouve dans un pays sélectionné ne verront jamais le widget, et toute tentative de chat sera refusée. Laissez vide pour autoriser tout le monde. Voir Empêcher les bots et la consommation de crédits ci-dessous.
• Diriger ces chats vers : Choisissez l’agent qui doit gérer les chats provenant du code que vous êtes sur le point de copier. Laissez sur Par défaut du compte pour utiliser votre routage de widget de chat habituel. Voir Envoyer différentes pages vers différents agents ci-dessous.
• Extrait d’intégration : Choisissez Bulle flottante ou Intégré et copiez le code d’installation (voir ci-dessous).
• Lien de démonstration client : Collez n’importe quelle adresse de site web et cliquez sur Créer un lien pour obtenir un lien partageable qui ouvre ce site avec votre widget par-dessus, sans rien avoir à installer de leur côté. Chaque lien que vous créez est répertorié, et vous pouvez désactiver chacun d’eux. Voir Afficher le widget sur le site web de quelqu’un d’autre ci-dessous.
• Lien de partage : Un lien prêt à l’emploi qui ouvre votre assistant sur sa propre page, en plein écran, sans avoir besoin de site web. Copiez-le et envoyez-le n’importe où. Voir Partager un lien direct vers le chat ci-dessous.

En bas du panneau, une action Supprimer le widget de chat supprime immédiatement le widget de votre site web — cette opération est irréversible et les visiteurs ne verront plus la bulle de chat.

Boutons d’action #

Certains visiteurs ne veulent pas discuter. Ils veulent votre numéro de téléphone, votre adresse ou votre e-mail, et ils veulent l’obtenir en un seul clic. Les boutons d’action sont une ligne de raccourcis en haut du panneau de chat conçus exactement pour cela.

Ajoutez-en jusqu’à six. Chacun possède une étiquette (le texte sur le bouton) et une destination, et la destination dépend de l’action que vous choisissez :

Ces boutons n’utilisent pas de crédits. Cliquer sur l’un d’eux n’envoie pas de message et ne démarre pas de conversation — cela redirige simplement le visiteur là où il a demandé à aller. Seule une véritable conversation avec votre agent IA utilise des crédits, exactement comme avant.

Quelques points à savoir :

• Les boutons restent visibles pendant que le visiteur discute. Quelqu’un peut poser deux questions et cliquer ensuite sur Itinéraire sans recharger la page.
• Vos étiquettes sont affichées exactement comme vous les avez écrites. Contrairement à votre message d’accueil et à vos questions de démarrage, les étiquettes des boutons ne sont pas traduites automatiquement. Si vous servez des visiteurs dans plusieurs langues, gardez les étiquettes courtes et explicites (ou écrivez-les dans votre langue principale).
• Remplissez correctement un bouton, sinon il ne sera pas enregistré. Si un numéro de téléphone, une adresse e-mail ou un lien n’est pas valide, le panneau l’indique et bloque Enregistrer les modifications plutôt que de publier un bouton qui ne ferait rien sur votre site.
• Ce ne sont pas des réponses à des FAQ. Les boutons d’action envoient uniquement les gens ailleurs ; ils ne répondent pas avec du texte pré-rédigé. Les questions sont le travail de votre agent IA, et il y répond à partir de votre base de connaissances. Si vous souhaitez suggérer des questions, utilisez les questions de démarrage sous Apparence.

Ce que vous ne pouvez pas personnaliser #

Le panneau Gérer (Manage) contient l’ensemble des options. En particulier :

• Pas de CSS ou de feuille de style personnalisée. Le style est limité à ce que proposent les sélecteurs de thème, de coin, de police et de couleur — vous ne pouvez pas injecter votre propre CSS dans le widget, et les règles de votre page ne s’appliqueront pas à l’intérieur.
• Pas de texte d’espace réservé personnalisé dans la boîte de message.
• Pas d’intégration de vidéo dans le chat.

Si l’un de ces points constitue un obstacle pour vous, l’intégration en ligne vous offre un contrôle maximal : le widget est placé dans un conteneur sur votre propre page, dont vous gérez vous-même la taille et la position.

Empêcher les bots et la consommation de crédits #

Chaque réponse de l’IA coûte des crédits, donc un script (ou une personne qui s’ennuie) ouvrant chat après chat sur votre site Web est la seule chose contre laquelle un widget public doit se défendre. Le widget gère la majeure partie de cela par lui-même, et deux paramètres dans le panneau Gérer vous permettent de renforcer la sécurité pour votre site.

• Liste blanche de domaines. Seuls les sites web que vous listez peuvent afficher le widget. Quiconque copie votre code d’intégration sur un autre site n’obtiendra rien.
• Pays bloqués. Les visiteurs dont la localisation réseau se trouve dans un pays que vous bloquez ne voient jamais le widget, et toute discussion qu’ils tentent d’initier est refusée. La localisation provient de la connexion du visiteur : une personne utilisant un VPN apparaîtra comme étant dans le pays du VPN, et un visiteur dont la localisation ne peut être déterminée sera autorisé à passer plutôt que d’être bloqué. Votre propre aperçu dans l’application continue de fonctionner même si vous bloquez le pays dans lequel vous vous trouvez.
• Nouvelles conversations par connexion. Une connexion (en pratique, un foyer ou une adresse de bureau) peut ouvrir 20 nouvelles conversations par jour sur un widget. Les visiteurs récurrents poursuivant leur discussion existante ne sont pas comptabilisés, seules les toutes nouvelles conversations le sont. Ainsi, un script qui ne cesse d’ouvrir de nouvelles discussions pour exploiter les réponses de l’IA s’épuise après 20 tentatives, tandis que les vrais visiteurs ne remarquent rien. Si de nombreuses personnes partagent une même connexion sur votre site (un campus, un centre d’appels), augmentez ce nombre via l’API REST avec max_new_chats_per_ip_daily ; 0 désactive la vérification.
• Vérification humaine (optionnel). Les visiteurs passent une vérification rapide Cloudflare Turnstile avant que leur premier message ne soit envoyé, empêchant ainsi un script d’initier des discussions. La plupart des gens n’ont jamais rien à cliquer ; Cloudflare n’affiche une case à cocher que lorsqu’il a un doute. Cela utilise vos propres clés gratuites Turnstile, voir Ajouter une vérification humaine ci-dessous.
• Limites intégrées. En plus de cela, chaque session de navigateur est limitée en nombre de messages pouvant être envoyés par minute et par jour, et l’agent répondant à la discussion cesse de répondre à un visiteur une fois qu’il atteint le Nombre maximal de messages IA par discussion défini sous ses Limites de réponse.

Rien de tout cela n’identifie les appareils ou les personnes : le widget ne stocke rien dans le navigateur d’un visiteur tant qu’il ne choisit pas de chatter (voir ci-dessus), et il n’y a pas de prise d’empreinte numérique (fingerprinting).

Ajouter une vérification humaine (Cloudflare Turnstile) #

Activez cette option lorsque des bots continuent d’ouvrir des discussions sur votre site web et que les paramètres ci-dessus ne suffisent pas. La vérification s’exécute une fois, juste avant l’envoi du premier message d’un visiteur. Un visiteur qui réussit la vérification peut continuer à discuter pendant 24 heures sans la revoir, et toute personne revenant à une conversation antérieure peut toujours la lire avant la vérification.

1. Connectez-vous à votre compte Cloudflare (un compte gratuit suffit) et ouvrez Turnstile.
2. Cliquez sur Add widget, donnez-lui un nom et ajoutez chaque domaine sur lequel votre widget de discussion est exécuté (par exemple yourshop.com). Laissez le mode du widget sur Managed.
3. Copiez la Site key et la Secret key que Cloudflare vous affiche.
4. Dans l’application, ouvrez le panneau Manage de votre widget de discussion, activez Human check before chatting, collez les deux clés et enregistrez.

À quoi s’attendre :

• La vérification reste désactivée tant que les deux clés ne sont pas renseignées, donc l’activer sans clés ne bloquera jamais les visiteurs.
• Si un visiteur échoue à la vérification ou la laisse non résolue, son message n’est pas envoyé et il obtient un bouton Retry.
• La vérification n’apparaît que sur les domaines que vous avez ajoutés dans Cloudflare. Sur tout autre domaine, Cloudflare la refuse et personne sur ce site ne peut envoyer de message ; ajoutez donc chaque domaine avant de l’activer.
• Si votre site web utilise une politique de sécurité du contenu (Content Security Policy), autorisez https://challenges.cloudflare.com pour les scripts et les cadres (frames), sinon la vérification ne pourra pas se charger.
• Les clés appartiennent à votre propre compte Cloudflare, et la clé secrète n’est jamais envoyée aux navigateurs de vos visiteurs.

Instructions d’installation #

Pour ajouter le widget de chat à votre site web, ajoutez une ligne de code au HTML de votre site.

1. Ouvrez le fichier HTML de votre site web dans un éditeur de texte.
2. Trouvez la balise de fermeture </body> — elle se situe généralement tout à la fin du fichier.
3. Collez cette ligne de code juste avant la balise </body>, afin que le reste de votre page se charge en premier :

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

4. Remplacez CONFIG_ID par votre identifiant de configuration unique, indiqué dans la section Canaux et intégration du panneau de gestion. Cet identifiant est spécifique à votre compte et connecte le widget à votre système de messagerie.

Le snippet ne ralentira pas votre site : il s’agit d’un minuscule chargeur, et le widget lui-même se télécharge en arrière-plan sans bloquer la page. Si vous souhaitez tout de même que le widget attende que votre page ait fini de charger, vous pouvez envelopper la même URL comme ceci :

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

Et si ce que vous souhaitez retarder est la petite bulle d’invitation plutôt que le chargement du widget, il s’agit du délai de la Bulle contextuelle proactive dans la section Comportement ci-dessus — aucun code n’est nécessaire.

Installation sur Shopify #

1. Dans votre interface d’administration Shopify, allez dans Boutique en ligne > Thèmes.
2. Sur le thème marqué comme étant votre thème actuel (publié), cliquez sur le bouton … et choisissez Modifier le code. La modification d’un brouillon ou d’une copie du thème ne change rien sur votre boutique en ligne.
3. Ouvrez layout/theme.liquid et faites défiler jusqu’à la balise de fermeture </body> près du bas.
4. Collez votre ligne d’installation juste au-dessus de </body> et cliquez sur Enregistrer :

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Si vous avez installé le widget avant que la ligne d’installation ne contienne defer, l’éditeur de code de Shopify affiche un soulignement rouge en dessous. Ce soulignement est un avertissement du vérificateur de code de Shopify concernant les lignes de script sans defer ou async, et non une erreur : le thème est tout de même enregistré et le widget fonctionne toujours. L’ajout de defer comme indiqué ci-dessus fait disparaître le soulignement et ne change rien au comportement du widget, il n’est donc pas nécessaire de le réinstaller sur d’autres sites.

Voici un exemple complet de ce à quoi devrait ressembler votre fichier HTML avec le widget de chat implémenté :

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
</body>
</html>

Intégration en ligne sur une page (Avancé) #

Si vous préférez que le chat apparaisse comme faisant partie de votre page — par exemple dans une section dédiée « Contactez-nous », un onglet d’aide ou une barre latérale — plutôt que sous forme de bulle flottante dans le coin, réglez Embed snippet sur Inline dans le panneau de gestion et copiez l’extrait de code en ligne.

Cela ressemble à ceci :

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Le <div> est le point de montage — le panneau de discussion s’y affiche et en remplit les dimensions. Appliquez le style que vous souhaitez au div (donnez-lui une hauteur fixe, placez-le dans un conteneur flex, dans une cellule de grille, etc.) et le panneau de discussion suivra.

Vous n’avez besoin que d’une seule balise <script> sur la page, même si vous intégrez plusieurs widgets de discussion. Le script analyse la page à la recherche de chaque <div data-chat-widget="…"> et monte un panneau de discussion dans chacun d’eux.

Quand choisir l’intégration en ligne plutôt que flottante :

• La bulle flottante est idéale pour un bouton « Besoin d’aide ? » toujours disponible sur tout le site.
• L’intégration en ligne est adaptée lorsque la discussion doit se trouver à un endroit précis — une page d’assistance, une barre latérale de base de connaissances, un onglet d’aide dans l’application — et donner l’impression de faire partie intégrante de cette page.

L’intégration en ligne réutilise la même configuration que la bulle flottante (logo, message d’accueil, capture de prospects, questions de démarrage, etc.), vous n’avez donc rien à configurer deux fois.

Afficher le widget sur le site web de quelqu’un d’autre #

Vous pouvez afficher votre widget de chat sur un site web que vous ne contrôlez pas — sans code, sans accès nécessaire à leur site. C’est le moyen le plus rapide de montrer à un prospect à quoi ressemblerait l’assistant sur ses propres pages.

1. Ouvrez le panneau Gérer et faites défiler jusqu’à Canaux et intégrations.
2. Dans Lien de démonstration client, saisissez l’adresse du site web (par exemple www.theircompany.com).
3. Facultatif : sous le champ, choisissez l’Agent qui doit répondre dans cette démonstration, par exemple un agent que vous avez créé à partir du site web du prospect afin qu’il parle de ses services, de ses tarifs et de sa FAQ. Laissez sur Par défaut du compte pour utiliser le routage habituel de votre widget de chat.
4. Cliquez sur Créer un lien. Le lien est copié pour vous et apparaît dans la liste sous le champ, avec des boutons Copier et Ouvrir ainsi que l’agent utilisé.
5. Envoyez le lien à la personne à qui vous souhaitez le montrer.

L’ouverture du lien charge ce site web avec votre widget de chat flottant par-dessus, exactement comme s’il était installé. Toute personne disposant du lien peut l’ouvrir — il n’y a rien à connecter.

Quelques points à savoir :

• Les chats issus de la démonstration sont réels. Les messages qu’un visiteur envoie lors d’une démonstration arrivent dans votre boîte de réception, sont traités par votre agent et utilisent des crédits comme n’importe quelle autre conversation.
• La page n’est pas marquée. Elle affiche leur site Web et votre widget, et rien d’autre.
• Certains sites Web ne peuvent pas être intégrés dans un cadre. Un certain nombre de sites (banques, grands détaillants, tout ce qui est soumis à des paramètres de sécurité stricts) empêchent d’autres pages de les afficher. Lorsque cela se produit, le lien fonctionne toujours : il affiche une fenêtre de navigateur neutre au lieu du site réel, avec votre widget actif par-dessus, afin que la démonstration remplisse toujours son rôle.
• Cela ne modifie pas leur site Web. Rien n’est installé et rien n’est modifié — la démonstration n’existe qu’à l’intérieur de ce lien.
• Désactivez un lien lorsque la démonstration est terminée. Cliquez sur Désactiver à côté du lien dans la liste et confirmez. À partir de ce moment, toute personne ouvrant ce lien verra une page indiquant que le lien a été désactivé. Votre widget et vos autres liens de démonstration continuent de fonctionner. Un lien désactivé ne peut pas être réactivé ; créez-en un nouveau à la place.
• Liens copiés avant le 25 septembre 2026. Les liens de démonstration créés avant l’existence de la liste n’y figurent pas. Ils continuent de fonctionner jusqu’à ce que vous cliquiez sur Désactiver ceux-ci sous la liste, ce qui les désactive tous en même temps (et Les réactiver annule cette action).

Un lien de démonstration créé sans agent utilise le routage par défaut de votre compte, quel que soit le réglage de Acheminer ces chats vers. Avec un agent sélectionné, chaque chat provenant de ce lien est attribué à cet agent et traité par celui-ci. Le widget conserve son apparence, son nom et son message d’accueil. Le lien le porte sous la forme &agent=AGENT_ID ; l’ajouter manuellement à un ancien lien fonctionne également (utilisez &, pas ?, car le lien contient déjà un ?).

Si vous supprimez ultérieurement l’agent utilisé par un lien de démonstration, le lien continue de fonctionner : ses chats sont dirigés vers le routage par défaut de votre compte, et la liste affiche « agent supprimé, utilise le défaut » à côté. La suppression de l’agent défini par défaut pour votre widget de chat n’affecte pas les liens associés à un autre agent.

Partager un lien direct vers le chat #

Parfois, il n’y a pas de site web sur lequel placer le widget — vous souhaitez donner un lien à quelqu’un pour qu’il puisse discuter immédiatement avec votre assistant. Chaque widget de chat en possède un :

1. Ouvrez le panneau Gérer et faites défiler jusqu’à Canaux et intégration.
2. Trouvez Lien de partage (il se situe juste en dessous du lien de démonstration client).
3. Cliquez sur Copier pour récupérer le lien, ou sur Ouvrir pour l’essayer vous-même.

L’ouvrir n’affiche rien d’autre que votre assistant, occupant tout l’écran — aucun site web en arrière-plan, aucune bulle sur laquelle cliquer d’abord, rien à installer. Mettez-le dans votre biographie Instagram, un code QR sur un dépliant, une signature d’e-mail ou un message WhatsApp à un prospect.

Le lien de partage suit le routage par défaut de votre widget de chat. Pour ouvrir un agent spécifique à la place, ajoutez ?agent=AGENT_ID à la fin du lien ; chaque chat provenant de celui-ci est alors attribué à cet agent et traité par celui-ci, tandis que la page conserve le nom et le message d’accueil de votre widget.

Quelques points à savoir :

• Les chats provenant du lien sont réels. Ils arrivent dans votre boîte de réception, votre agent y répond, et ils utilisent des crédits comme n’importe quelle autre conversation.
• La page ne porte aucune de nos marques. Elle affiche votre assistant et rien d’autre, et elle est exclue des résultats de recherche.
• Cela fonctionne sur votre propre adresse. Si votre fournisseur exécute l’application sur son propre domaine, le lien utilise également cette adresse, de sorte qu’aucun élément inconnu n’y apparaît.
• Un visiteur par lien, par navigateur. Quiconque l’ouvre conserve la même identité dans ce navigateur, donc revenir plus tard permet de poursuivre la même conversation plutôt que d’en commencer une nouvelle. Un navigateur différent, ou le lien d’un autre widget, correspond à un visiteur différent.

Envoyer différentes pages vers différents agents #

Par défaut, chaque chat arrivant via votre widget est géré par le même agent. Vous pouvez remplacer cela par page, afin que les visiteurs sur votre page de tarification parlent à votre agent commercial tandis que les visiteurs sur votre page d’aide parlent à votre agent de support, le tout depuis le même widget de chat.

Il existe deux façons d’obtenir le code :

• Depuis l’agent. Sur la page Agents IA, cliquez sur le bouton </> sur la ligne, ou ouvrez l’agent et accédez à son onglet Points d’entrée. Dans les deux cas, vous obtiendrez un extrait prêt à être collé, déjà configuré pour cet agent.

  L’onglet Points d’entrée d’un agent dispose également d’un panneau Widget de chat pour site web indiquant combien de chats sur site web cet agent gère déjà. Les chats provenant d’un élément intégré atteignent directement l’agent, vous n’avez donc pas besoin de créer une règle de point d’entrée pour eux — un agent sans aucune règle répondra tout de même à son élément intégré.

  Le bouton </> n’apparaît que sur les agents actifs. Un agent en pause recevrait le chat mais ne répondrait jamais, l’option est donc masquée jusqu’à ce que vous la réactiviez. Il n’y a pas de canal à configurer pour un agent — un agent peut prendre en charge un chat provenant de n’importe quel canal.

• Depuis les paramètres du widget. Dans Paramètres → Canaux → Gérer sur votre widget de chat, définissez Diriger ces chats vers et copiez l’extrait ci-dessous. La modification de la liste déroulante réécrit l’extrait.

L’extrait flottant porte la destination dans l’adresse :

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?agent=AGENT_ID" defer></script>

L’extrait intégré la porte sur le <div> à la place, de sorte qu’une page peut contenir plusieurs chats allant vers des endroits différents :

<div data-chat-widget="CONFIG_ID" data-agent="AGENT_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Les extraits copiés avant la mise hors service des campagnes contiennent ?campaign= ou data-campaign= à la place. Ils continuent de fonctionner, il n’y a donc rien à recoller.

Quelques points à savoir :

• Utilisez le bouton de copie plutôt que de taper l’ID à la main. Si l’ID ne correspond pas à un agent sur votre compte, le chat fonctionne toujours mais revient à votre routage par défaut.
• Une personne déjà en pleine conversation reste avec la personne avec qui elle a commencé, même si elle atterrit plus tard sur une page pointant ailleurs. Cela évite qu’une conversation ne change de personnalité en cours de route.
• Une destination spécifique à une page est prioritaire sur votre défaut de compte et sur les déclencheurs par mots-clés.

Indiquer au widget qui est le visiteur (Avancé) #

Si vous placez le widget de chat dans un espace membre, un portail client ou une application où les utilisateurs sont déjà connectés, votre site connaît déjà leur identité. Vous pouvez transmettre ces informations au widget afin que le visiteur n’ait pas à fournir des détails qu’il a déjà communiqués, et pour que votre IA puisse utiliser ce que vous savez déjà à son sujet.

Ajoutez un petit bloc de paramètres avant le script du widget :

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Votre page doit remplir ces valeurs côté serveur, en fonction de l’utilisateur connecté.

Pour enregistrer également un nom de famille, ajoutez last_name à côté de name dans le bloc visitor (data-visitor-last-name sur un embed intégré). C’est facultatif : un nom et un e-mail suffisent toujours pour ignorer le formulaire, que l’option Collecter le nom de famille soit activée ou non.

Deux choses se produisent :

• Le formulaire « Avant de commencer… » est ignoré. Avec un nom et une adresse e-mail fournis, le visiteur accède directement à la conversation, et ces détails sont enregistrés sur sa fiche contact exactement comme s’il les avait saisis lui-même.
• Tout ce qui se trouve sous data est transmis à votre IA. Tout ce que vous y ajoutez — plan, numéro de commande, date de renouvellement, solde de crédit, nombre de sièges — devient une information connue de l’IA sur cette personne. Elle peut ainsi répondre à la question « quand mon plan est-il renouvelé ? » sans avoir à demander au visiteur qui il est. Utilisez les noms de champs qui vous semblent pertinents ; ils apparaîtront sur la fiche contact sous la rubrique Champs personnalisés. Jusqu’à 20 valeurs, envoyées à chaque nouveau message, afin que si le plan change en cours de conversation, l’IA prenne en compte la nouvelle valeur.

Pour les intégrations en ligne (inline), vous pouvez placer les mêmes informations sur le <div>, ce qui est pratique lorsqu’une page contient plusieurs chats :

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Si votre site ne connaît l’identité du visiteur qu’après le chargement de la page — par exemple, dans une application monopage (SPA) où la connexion s’effectue sans rechargement de page — appelez cette fonction dès que vous disposez des détails, et le widget se mettra à jour automatiquement :

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

Quelques points à savoir :

• Si deux personnes différentes se connectent sur le même ordinateur, la deuxième entame une nouvelle conversation au lieu de voir celle de la première. Le widget détecte le changement de personne et se réinitialise.
• En soi, cela sert à fournir du contexte, et non à connecter quelqu’un. Les conversations restent séparées comme elles l’ont toujours été ; ainsi, transmettre un id ne permet à personne d’ouvrir la discussion de quelqu’un d’autre, et une personne utilisant un appareil ou un navigateur différent entamera une nouvelle conversation à cet endroit. Pour conserver la conversation sur plusieurs appareils, connectez le id comme décrit ci-après.
• C’est facultatif. Un widget sur une page publique normale n’a besoin de rien de tout cela et se comporte exactement comme avant.

Reprendre la même conversation sur n’importe quel appareil (ID de visiteur connecté) #

Si vos clients ont des comptes, vous pouvez faire en sorte que leur discussion les suive : connexion sur un téléphone, poursuite sur un ordinateur portable, et il s’agit de la même conversation avec le même contact dans votre boîte de réception, et l’IA sait toujours tout ce qui a été dit. Pour cela, Your AI Connector a besoin d’une preuve que le visiteur est réellement celui que votre page prétend qu’il est, sinon n’importe qui pourrait saisir un numéro de client dans son navigateur et lire la discussion de ce client. La preuve est une signature que vous calculez sur votre serveur.

1. Dans le panneau Gérer du widget, sous Canaux et intégrations, recherchez Visiteurs connectés et cliquez sur Générer un secret. Copiez le secret d’identité. Conservez-le uniquement sur votre serveur ; ne le placez jamais dans la page elle-même.

2. Lorsque votre serveur génère une page pour un client connecté, calculez un HMAC-SHA256 de l’identifiant de ce client en utilisant le secret, sous forme de chaîne hexadécimale en minuscules :

// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");

// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);

# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()

3. Mettez l’ID et le hash dans le bloc de paramètres, à côté du nom et de l’e-mail que vous transmettez déjà :

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      hash: "3f2a…e91c",
      name: "Maria",
      email: "maria@example.com"
    }
  };
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

L’intégration en ligne prend la même valeur que data-visitor-hash sur le <div>, et window.chatWidget.setVisitor({ visitor: { id, hash } }) fonctionne pour les applications qui connectent les utilisateurs sans rechargement de page.

Ce qui se passe une fois que la signature est vérifiée :

• La discussion du client est stockée sous son compte plutôt que sous le navigateur, il s’agit donc de la même conversation sur chaque appareil et chaque navigateur où il est connecté, et d’un seul contact dans votre boîte de réception.
• Ses messages précédents se chargent sur le nouvel appareil, et l’IA reprend là où il s’était arrêté.
• Si la signature est incorrecte, le widget se comporte discrètement comme avant, en tant que discussion normale par navigateur, et affiche la raison dans la console du navigateur afin qu’un développeur puisse la repérer. Vos visiteurs ne voient jamais d’erreur.
• L’ID est comparé exactement tel que vous l’avez envoyé, donc signez la même valeur que celle que vous transmettez en tant que id, et utilisez le même ID pour la même personne partout.

Deux choses à savoir :

• Régénérer dans le panneau Gérer vous donne un nouveau secret. Les pages qui continuent de signer avec l’ancien reviendront à des discussions normales par navigateur jusqu’à ce que votre serveur utilise le nouveau secret. Les conversations existantes sont conservées ; elles sont liées à l’ID du client, pas au secret.
• Une conversation qu’une personne a eue avant de se connecter, en tant que visiteur anonyme, reste une discussion distincte. La conversation basée sur le compte commence avec le premier message envoyé une fois connecté.

Modifier les paramètres du widget depuis votre propre code (API) #

Tout ce qui se trouve dans le panneau Gérer du widget peut également être modifié via l’API REST, ce qui est pratique si vous gérez de nombreux sites web ou si vous souhaitez désactiver automatiquement le bouton de pièce jointe pour un client. Envoyez une PATCH à https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID avec votre clé API et uniquement les champs que vous souhaitez modifier — par exemple, {"show_upload_button": false} masque le bouton de pièce jointe, {"show_emoji_button": false} masque le sélecteur d’émojis et {"launcher_icon": "chat-dots"} remplace l’icône du lanceur. CONFIG_ID est le même identifiant que dans votre script d’intégration. La liste complète des champs acceptés (nom, message d’ouverture, couleurs, icône du lanceur, domaines autorisés, formulaire d’informations sur le visiteur, avis de confidentialité, thème, style des coins et de la police) se trouve dans la Référence de l’API sous Chat Widget. Les sites web prennent en compte les modifications lors du prochain chargement de la page.

À quoi s’attendre après l’installation #

Une fois que vous avez ajouté le script à votre site Web, le widget de chat créera automatiquement un bouton de chat dans le coin de votre site (en bas à droite par défaut). Le widget reste dans une position fixe pendant que les utilisateurs font défiler vos pages, garantissant qu’il soit toujours accessible.

Lorsque les visiteurs cliquent sur ce bouton, il se développe en une fenêtre de chat complète où ils peuvent entamer une conversation, affichant votre message d’ouverture. Si l’option Collecter les informations des visiteurs est activée, un petit formulaire apparaît d’abord pour demander leur nom et leur adresse e-mail (et éventuellement leur numéro de téléphone) avant qu’ils ne puissent écrire.

L’interface de chat s’adapte automatiquement aux différentes tailles d’écran, elle fonctionne donc parfaitement sur les ordinateurs de bureau comme sur les appareils mobiles.

Tester votre implémentation #

Après avoir ajouté le widget à votre site, vérifiez qu’il fonctionne :

1. Ouvrez votre site web dans un navigateur.
2. Cliquez sur le bouton de chat pour ouvrir le widget.
3. Envoyez un message de test et confirmez que vous recevez une réponse.
4. Répétez l’opération sur un autre appareil ou navigateur pour confirmer qu’il fonctionne partout.

Si le widget de chat n’apparaît pas sur votre site, vérifiez les points suivants :

1. Assurez-vous d’avoir remplacé CONFIG_ID par votre identifiant de configuration réel.
2. Assurez-vous que la balise de script est placée avant la balise de fermeture </body>.
3. Vérifiez le code pour détecter d’éventuelles fautes de frappe.
4. Sur Shopify, assurez-vous d’avoir modifié le thème publié et cliqué sur Enregistrer. Une modification effectuée dans un brouillon ou un thème dupliqué n’atteint jamais votre boutique en ligne.

Derrière un pare-feu d’entreprise #

Si le widget se charge pour le public mais pas pour le personnel sur le réseau du bureau, il est presque certain que le réseau bloque le domaine à partir duquel il se charge. Demandez à votre équipe informatique d’autoriser, via HTTPS standard sur le port 443 :

• Le domaine présent dans votre code d’intégration — l’adresse dans la ligne <script src="..."> que vous avez copiée depuis le panneau Gérer.
• api.youraiconnector.com — le widget y envoie également ses messages.

Aucune autre ouverture n’est nécessaire : pas de ports supplémentaires ni de règles entrantes. Si le widget n’apparaît toujours pas après cela, ouvrez la console de développement de votre navigateur sur la page et envoyez-nous ce qu’elle indique — une requête bloquée nomme le domaine qui a été refusé, ce qui constitue généralement la réponse complète.