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 (l’aspect solide original — une barre d’en-tête colorée sur un panneau plat), Glass (un panneau translucide 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 nets). Un thème est un point de départ ; après en avoir choisi un, vous pouvez toujours modifier individuellement chaque couleur ou paramètre. Les nouveaux widgets commencent avec 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 Net), et Police choisit la police de caractères que voient les visiteurs (Par défaut, Serif, Arrondi ou Mono) — les polices proviennent de ce qui est déjà présent 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 de profil conviviale.
• 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, et plus), réutilisez votre logo téléchargé ou téléchargez une image distincte — 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 superpose. 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 afin que les visiteurs puissent commencer en un seul clic au lieu de taper — par exemple « Quels sont vos tarifs ? » ou « Offrez-vous du support ? » — jusqu’à 10.

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 éventuellement 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 masque automatiquement après 20 secondes si personne ne clique dessus (ce nombre est fixe), et une fois qu’un visiteur clique sur Pas maintenant, elle reste masquée pour le reste de sa visite. La fenêtre de chat elle-même ne s’ouvre jamais d’elle-même : elle s’ouvre lorsque le visiteur clique sur le bouton de chat ou sur la bulle, et reste ouverte jusqu’à ce qu’il la ferme.
• Vitesse de réponse de l’IA : Un curseur entre Plus lent (plus humain — l’IA prend un temps de réflexion avant de répondre) et Vitesse max (plus robotique — les réponses arrivent aussi vite que possible). Équilibré se situe au milieu.

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 en anglais et votre message d’accueil, votre bulle contextuelle et vos questions de démarrage apparaissent exactement tels que vous les avez rédigés.
• 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 texte d’exemple, l’avis de confidentialité, les boutons) resteront dans cette langue, quelle que soit la langue de la page ou du navigateur. Utilisez cette option lorsque votre outil de création de site ne déclare pas la bonne langue, ou lorsque vous souhaitez une langue fixe pour tous les visiteurs.
• Langues prises en charge : anglais, néerlandais, allemand, français, espagnol, italien, portugais, roumain, polonais, arabe, finnois, philippin, slovène, thaï, bengali et japonais. Il s’agit de la liste pour les boutons et les libellés du widget.
• Vos messages sont traduits pour vous. À chaque enregistrement, votre message d’accueil, votre bulle contextuelle proactive et vos questions de démarrage sont traduits dans les seize langues ci-dessus. Vous ne les rédigez qu’une seule fois, dans la langue de votre choix : la langue utilisée 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. La langue définie pour votre compte n’a aucune importance.
• Rédigez chaque message dans une seule langue. Si vous insérez 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. Rédigez-le une fois, dans la langue de votre choix.
• L’IA répond dans la langue du visiteur. Quelle que soit la langue utilisée par l’interlocuteur, 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.

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é, les visiteurs doivent indiquer leur nom et leur adresse e-mail (et éventuellement leur numéro de téléphone) 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 ; si elle est désactivée, seuls le nom et l’adresse e-mail sont collectés.

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é). DM Champ 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.

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, DM Champ 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, Instagram ou Messenger.
• Boutons d’action : Une ligne de raccourcis en haut du chat qui redirige le visiteur vers un autre endroit plutôt que dans 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 le widget de s’afficher pour les visiteurs situés dans des pays que vous ne servez pas. Les visiteurs dont la localisation réseau se trouve dans un pays que vous avez 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 la campagne ou 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érentes campagnes ci-dessous.
• Snippet 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 pour obtenir un lien partageable qui ouvre ce site avec votre widget actif par-dessus — rien à installer de leur côté. Voir Afficher le widget sur le site Web de quelqu’un d’autre 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 défini par 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 de remplacement personnalisé dans la zone de message.
• Pas d’intégration vidéo dans le chat.
• Pas de minuteur de masquage automatique. La bulle d’invitation disparaît d’elle-même après 20 secondes et ce nombre ne peut pas être modifié ; la fenêtre de chat ouverte ne se ferme jamais toute seule. Si la bulle recouvre le contenu de votre page, déplacez le widget avec les décalages de Position ou désactivez la bulle pour ne garder que le bouton de lancement.

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 verront jamais le widget, et tout chat qu’ils tenteraient d’initier sera refusé. La localisation provient de la connexion du visiteur : quelqu’un 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é plutôt que bloqué. Votre propre aperçu dans l’application continuera de fonctionner même si vous bloquez le pays dans lequel vous vous trouvez.
• Nouvelles conversations par connexion. Une connexion (en pratique, une adresse de foyer ou de bureau) peut ouvrir 20 nouvelles conversations par jour sur un widget. Les visiteurs récurrents poursuivant leur chat existant ne sont pas comptabilisés, seules les toutes nouvelles conversations le sont. Ainsi, un script qui continue d’ouvrir de nouveaux chats pour générer des 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 le nombre via l’API REST avec max_new_chats_per_ip_daily ; 0 désactive la vérification.
• 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 au chat cesse de répondre à un visiteur une fois qu’il atteint le Nombre max de messages IA par chat 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).

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.dmchamp.com/v1/chat-widget/CONFIG_ID"></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.dmchamp.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.

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.dmchamp.com/v1/chat-widget/CONFIG_ID"></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.dmchamp.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égration.
2. Dans Lien de démonstration client, saisissez l’adresse du site web (par exemple www.theircompany.com).
3. Cliquez sur Copier pour copier le lien, ou sur Ouvrir pour le voir vous-même en premier.
4. 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 de la démo sont réels. Les messages qu’un visiteur envoie dans une démo arrivent dans votre boîte de réception et sont traités par votre agent, et ils 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 mis en 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 fictive neutre au lieu du site réel, avec votre widget actif par-dessus afin que la démo remplisse toujours son rôle.
• Cela ne modifie pas leur site web. Rien n’est installé et rien n’est modifié — la démo n’existe que dans ce lien.

Le lien de démonstration utilise toujours le routage par défaut de votre compte, quel que soit le paramètre défini pour Diriger ces chats vers. Si vous souhaitez que les chats de démonstration soient gérés par un agent spécifique, définissez d’abord cet agent comme valeur par défaut de votre widget de chat.

Envoyer différentes pages vers différentes campagnes #

Par défaut, chaque chat arrivant via votre widget est géré par la même campagne ou le même agent. Vous pouvez remplacer cela par page, afin que les visiteurs sur votre page de tarification parlent à votre campagne de vente 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 la campagne ou l’agent. Sur la page Campagnes, ouvrez le menu ⋮ d’une campagne et choisissez Ajouter au site web. Sur la page Agents, 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 cette campagne ou 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é.

  Ajouter au site web n’apparaît que sur les campagnes actives et configurées pour gérer les chats entrants. Une campagne à l’état de brouillon ne peut pas encore recevoir de visiteurs, l’option est donc masquée jusqu’à ce que vous la publiiez. Sur la page Agents, elle apparaît pour 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 le réactiviez. Il n’y a pas de canal à configurer pour un agent — un agent peut prendre un chat depuis n’importe quel canal.

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

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

<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID?campaign=CAMPAIGN_ID"></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-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.dmchamp.com/v1/chat-widget/embed.js" async></script>

Pour un agent, le libellé change en ?agent=AGENT_ID ou data-agent="AGENT_ID".

Quelques points à savoir :

• Utilisez le bouton de copie plutôt que de saisir l’ID à la main. Si l’ID ne correspond pas à une campagne ou à un agent de 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 de 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.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>

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

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.dmchamp.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, DM Champ 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.dmchamp.com/v1/chat-widget/CONFIG_ID"></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.dmchamp.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 script est placée avant la balise de fermeture </body>.
3. Vérifiez le code pour détecter d’éventuelles erreurs de frappe.

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.dmchamp.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.