Chat en direct sur le site web

Comment installer un chat en direct sur un site web Docusaurus ?

Chatwoot s'intègre parfaitement avec Docusaurus grâce au plugin @chatwoot/docusaurus-plugin. Ce plugin vous permet d'installer facilement le widget de chat en direct Chatwoot sur un site web propulsé par Docusaurus. Pour installer le plugin, suivez les étapes rapides expliquées ci-dessous. Étape 1. Ajoutez le plugin à votre projet. yarn add @chatwoot/docusaurus-plugin ou npm install @chatwoot/docusaurus-plugin --save Étape 2. Configurez le plugin dans docusaurus.config.js // docusaurus.config.js module.exports = { plugins: ["@chatwoot/docusaurus-plugin"], themeConfig: { chatwoot: { websiteToken: "Votre jeton de boîte de réception du site web", baseURL: "https://app.chatwoot.com", // optionnel enableInDevelopment: false, // optionnel chatwootSettings: { hideMessageBubble: false, position: "left", // Cela peut être left ou right locale: "fr", // Langue à définir useBrowserLanguage: false, // Définir la langue du widget depuis le navigateur de l'utilisateur darkMode: "auto", // [light, auto] type: "expanded_bubble", launcherTitle: "Discutez avec nous", } } } };

Comment activer le mode sombre sur le widget de chat en direct ?

Les sites web modernes permettent aux utilisateurs de basculer entre les modes clair et sombre. Par conséquent, il est important de disposer d’un chat en direct qui fonctionne avec les deux thèmes. Ce guide vous aide à configurer le mode sombre pour le widget de chat en direct Chatwoot sur votre site web. Voici un aperçu rapide du fonctionnement du mode sombre sur le widget de chat en direct : Pour activer le mode sombre sur le widget Chatwoot, utilisez le paramètre darkMode avec les chatwootSettings. Le paramètre darkMode accepte deux valeurs. 1. light - Active uniquement le mode clair. Il s'agit de la valeur par défaut. 2. auto - Active le mode sombre selon la préférence du système d'exploitation. window.chatwootSettings = { //... autres paramètres darkMode: "auto", }; Remarque : Le mode dark seul n'est pas encore pris en charge. Nous ajouterons cette fonctionnalité dans de futures versions.

Comment installer le chat en direct sur une application Next.js ?

Si vous avez une application Next.js, vous pouvez ajouter le widget de chat en direct Chatwoot et discuter avec vos visiteurs en temps réel. Pour intégrer Chatwoot à votre application Next.js, vous avez besoin d'un composant qui charge le script Chatwoot. Vous pouvez le faire en deux étapes rapides. Illustrons cela à l'aide d'un exemple ci-dessous. Cet exemple montre un composant React qui charge le script Chatwoot de manière asynchrone. Étape 1. Copiez et créez ! Copiez le code suivant et créez un fichier dans votre dossier components avec le nom ChatwootWidget.js. import React from 'react'; class ChatwootWidget extends React.Component { componentDidMount () { // Add Chatwoot Settings window.chatwootSettings = { hideMessageBubble: false, position: 'right', // This can be left or right locale: 'en', // Language to be set type: 'standard', // [standard, expanded_bubble] }; // Paste the script from inbox settings except the <script> tag (function(d,t) { var BASE_URL="<your-installation-url>"; var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=BASE_URL+"/packs/js/sdk.js"; s.parentNode.insertBefore(g,s); g.async=!0; g.onload=function(){ window.chatwootSDK.run({ websiteToken: '<your-website-token>', baseUrl: BASE_URL }) } })(document,"script"); } render () { return null; } } export default ChatwootWidget Étape 2. Importez​ Importez le composant dans vos pages ou dans votre composant de mise en page, comme indiqué ci-dessous. import React, { Fragment } from 'react' // ... import ChatwootWidget from '../components/ChatwootWidget' const Page = () => ( <Fragment> <ChatwootWidget /> <Component {...}> </Fragment> ) export default Page Vous devriez maintenant voir le widget Chatwoot sur la page.

Comment installer un chat en direct sur un site Gatsby ?

Si vous avez un site web créé avec Gatsby, vous pouvez ajouter un widget de chat en direct Chatwoot et discuter avec vos visiteurs en temps réel. Cela peut être fait en 3 étapes simples grâce au plugin Gatsby de Chatwoot. Étape 1. Ajoutez le plugin Gatsby à votre projet​ Ajoutez gatsby-plugin-chatwoot à votre projet Gatsby. npm install --save gatsby-plugin-chatwoot Si vous utilisez yarn, utilisez la commande suivante : yarn add gatsby-plugin-chatwoot Étape 2. Ajoutez le plugin à votre fichier de configuration Gatsby​ // Dans votre gatsby-config.js plugins: [ { resolve: `gatsby-plugin-chatwoot`, options: { baseUrl: "BASE_URL", // Obligatoire websiteToken: "WEBSITE_TOKEN", // Obligatoire includeInDevelopment: false, // Optionnel chatwootSettings: {}, // Optionnel }, }, ]; Vous pouvez obtenir votre jeton de site web et l’URL de base depuis les paramètres de votre boîte de réception dans votre compte Chatwoot. Si vous avez besoin de créer un nouveau canal pour votre site web, suivez la procédure illustrée ici. Étape 3. Démarrez votre serveur​ Vous devriez maintenant voir le widget Chatwoot sur la page.

Comment installer un chat en direct sur un site Webflow ?

Si votre site web est créé avec Webflow et que vous souhaitez dialoguer en temps réel avec vos visiteurs, vous pouvez ajouter le widget de chat en direct Chatwoot à votre site web. Suivez les étapes décrites ci-dessous. Étape 1. Créez une boîte de réception de site web dans Chatwoot​ Veuillez consulter ce guide pour des instructions détaillées sur la configuration d'une boîte de réception de site web dans Chatwoot. Étape 2. Installez le script généré dans Webflow​ Connectez-vous à votre compte Webflow et sélectionnez votre site web. Sélectionnez Paramètres. ​Allez dans Code personnalisé -> Code du pied de page. Collez le script dans "Code du pied de page". Enregistrez les modifications. Étape 3. Publier les modifications​ Cliquez sur Publier -> Sélectionnez le site web -> Publier vers les domaines sélectionnés. Étape 4. Vérifier Visitez votre site web et vérifiez si le widget apparaît sur le site.

Comment installer un chat en direct sur une application React Native ?

Si vous avez une application React Native, vous pouvez ajouter le widget de chat en direct Chatwoot et discuter avec vos visiteurs en temps réel. Cela peut être fait en 3 étapes simples grâce au plugin Chatwoot. Étape 1. Créez une boîte de réception de site web dans Chatwoot​ Veuillez consulter ce guide pour des instructions détaillées sur la configuration d'une boîte de réception de site web dans Chatwoot. Étape 2. Ajoutez le plugin à votre projet​ Ajoutez l’un des plugins suivants à votre projet. yarn add @chatwoot/react-native-widget ou npm install --save @chatwoot/react-native-widget --save Cette librairie dépend de react-native-webview et async-storage. Veuillez suivre les instructions fournies dans la documentation. Installation iOS​ Si vous utilisez une version de React Native supérieure à 60.0, c'est relativement simple. cd ios && pod install Étape 3. Utilisez-le comme ceci​ Remplacez websiteToken et baseUrl par les valeurs appropriées. import React, { useState } from 'react'; import { StyleSheet, View, SafeAreaView, TouchableOpacity, Text } from 'react-native'; import ChatWootWidget from '@chatwoot/react-native-widget'; const App = () => { const [showWidget, toggleWidget] = useState(false); const user = { identifier: 'john@gmail.com', name: 'John Samuel', avatar_url: '', email: 'john@gmail.com', identifier_hash: '', }; const customAttributes = { accountId: 1, pricingPlan: 'paid', status: 'active' }; const websiteToken = 'WEBSITE_TOKEN'; const baseUrl = 'CHATWOOT_INSTALLATION_URL'; const locale = 'en'; return ( <SafeAreaView style={styles.container}> <View> <TouchableOpacity style={styles.button} onPress={() => toggleWidget(true)}> <Text style={styles.buttonText}>Ouvrir le widget</Text> </TouchableOpacity> </View> { showWidget&& <ChatWootWidget websiteToken={websiteToken} locale={locale} baseUrl={baseUrl} closeModal={() => toggleWidget(false)} isModalVisible={showWidget} user={user} customAttributes={customAttributes} /> } </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { height: 48, marginTop: 32, paddingTop: 8, paddingBottom: 8, backgroundColor: '#1F93FF', borderRadius: 8, borderWidth: 1, borderColor: '#fff', justifyContent: 'center', }, buttonText: { color: '#fff', textAlign: 'center', paddingLeft: 10, fontWeight: '600', fontSize: 16, paddingRight: 10, }, }); export default App; Et... c'est tout. Consultez l'exemple complet ici.

Comment activer la validation d'identité dans Chatwoot ?

La validation d'identité permet de garantir que les conversations entre vos clients et les agents de support restent privées. Elle permet également d’empêcher l’usurpation d’identité. La validation d'identité peut être activée en générant un HMAC. La clé utilisée pour générer le HMAC de chaque widget web diffère et peut être copiée depuis Inboxes -> Paramètres -> Configuration -> Validation d'identité -> Copier le jeton affiché à cet endroit. Vous pouvez générer le HMAC dans différents langages, comme indiqué ci-dessous. Générer un HMAC​ PHP​ <?php $key = '<webwidget-hmac-token>'; $message = '<identifier>'; $identifier_hash = hash_hmac('sha256', $message, $key); ?> Javascript (Node.js)​ const crypto = require('crypto'); const key = '<webwidget-hmac-token>'; const message = '<identifier>'; const hash = crypto.createHmac('sha256', key).update(message).digest('hex'); Ruby​ require 'openssl' require 'base64' key = '<webwidget-hmac-token>' message = '<identifier>' OpenSSL::HMAC.hexdigest('sha256', key, message) Elixir​ key = '<webwidget-hmac-token>' message = '<identifier>' signature = :crypto.hmac(:sha256, key, message) Base.encode16(signature, case: :lower) Golang​ package main import ( "crypto/hmac" "crypto/sha256" "encoding/base64" "encoding/hex" ) func main() { secret := []byte("<webwidget-hmac-token>") message := []byte("<identifier>") hash := hmac.New(sha256.New, secret) hash.Write(message) hex.EncodeToString(hash.Sum(nil)) } Python​ import hashlib import hmac import base64 secret = bytes('<webwidget-hmac-token>', 'utf-8') message = bytes('<identifier>', 'utf-8') hash = hmac.new(secret, message, hashlib.sha256) hash.hexdigest()

Comment installer le chat en direct sur une application Vue.js ?

Pour intégrer Chatwoot à votre application Vue.js, vous devez coller le script du widget Chatwoot dans le fichier index.html de votre application Vue.js. Voici comment procéder : Étape 1. Récupérez votre script de widget​ Votre script de widget se trouve dans les paramètres de votre boîte de réception du site web. Allez dans Paramètres -> Boîtes de réception -> Sélectionnez votre canal Site web > onglet Configuration. Si vous n’avez pas encore créé de boîte de réception pour un site web, vous pouvez trouver les instructions détaillées ici. Étape 2. Copiez le script​ Copiez le script qui a été créé dans le champ code du canal. Étape 3. Collez le script ici​ Ouvrez votre projet Vue et collez le script dans le fichier index.html, juste avant la balise de fermeture </body>. <body> <noscript> <strong >Nous sommes désolés mais <%= htmlWebpackPlugin.options.title %> ne fonctionne pas correctement sans JavaScript activé. Veuillez l'activer pour continuer.</strong > </noscript> <div id="app"></div> <!-- built files will be auto injected --> <!-- Chatwoot script goes here --> <script> (function (d, t) { var BASE_URL = "https://example.com"; var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; g.src = BASE_URL + "/packs/js/sdk.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g, s); g.onload = function () { window.chatwootSDK.run({ websiteToken: "yZ7USzaEs7hrwUAHLGwjbxJ1", baseUrl: BASE_URL, }); }; })(document, "script"); </script> <!-- Chatwoot script goes here --> </body> Étape 4. Vérifiez Vous pourrez maintenant voir le widget Chatwoot sur la page. Quelque chose comme ceci : Module Vue.js, Nuxt.js​ Un module maintenu par la communauté (créé par la formidable équipe de @huntersofbook) est disponible pour intégrer Chatwoot dans vos projets Vue 3 et Nuxt 3. Vous pouvez voir une démo ici. - Voir le module Vue 3. - Voir le module Nuxt 3.

Comment poursuivre des conversations par e-mail ?

Vos clients peuvent poursuivre leurs conversations de chat avec vos agents via des fils de discussion par e-mail. Cela peut être nécessaire dans les circonstances suivantes. - Aucun agent n'est disponible et le client laisse un message dans le chat. - Le client quitte le chat avant que l'agent ne réponde. Pour que cela fonctionne, le contact doit avoir une adresse e-mail enregistrée dans le CRM Chatwoot. Obtention des adresses e-mail des contacts​ Vous pouvez demander ou mettre à jour les adresses e-mail des clients dans Chatwoot de l'une des manières suivantes. 1. Depuis le SDK Chatwoot​ Si l'e-mail du client est connu, vous pouvez le renseigner dans Chatwoot via la méthode setUser dans notre SDK. 2. Depuis le formulaire pré-chat​ Si vous activez un formulaire pré-chat obligatoire, la conversation démarre avec un écran comme celui-ci : 3. Depuis l'invite de collecte d'e-mail​ Lorsque le formulaire pré-chat est désactivé et que l'e-mail du client est inconnu, Chatwoot démarre une conversation avec une invite de saisie d'e-mail. Remarque : Lorsque Captain est activé sur une boîte de réception, l'invite de collecte d'e-mail est automatiquement supprimée. Captain gère directement les conversations, même en dehors des heures ouvrées. L'invite ne sera envoyée que si Captain transfère la conversation à un agent humain ou si Captain n'est pas configuré pour la boîte de réception. Continuité de la conversation​ Remarque : Activez la continuité de la conversation dans les installations auto-hébergées à l'aide de ce guide. Si l'adresse e-mail du client est renseignée grâce à l'une des options ci-dessus et qu'il quitte le chat pendant que l'agent a répondu, il se passe ce qui suit. - Le client reçoit un fil de discussion par e-mail avec un résumé de la conversation. Il peut répondre à cet e-mail et poursuivre l'échange. - L'agent reçoit les réponses du client par e-mail dans son tableau de bord Chatwoot, sur le même fil de conversation. L'icône d’e-mail dans la bulle de chat indique que le client a répondu par e-mail.

Comment installer un chat en direct à l'aide de Google Tag Manager ?

Si vous utilisez Google Tag Manager sur votre site web, vous pouvez installer Chatwoot depuis le tableau de bord de Google Tag Manager en créant une nouvelle balise pour Chatwoot. Pour installer le widget de chat en direct Chatwoot, veuillez suivre les étapes ci-dessous. Étape 1. Accédez à la console Tag Manager​ Connectez-vous à l’espace de travail Tag Manager avec votre compte Google. Vous verrez un espace de travail similaire à celui illustré ci-dessous. Cliquez sur le bouton "Ajouter une nouvelle balise" depuis le tableau de bord. Étape 2. Créez une nouvelle balise avec la configuration de balise​ Une fenêtre contextuelle s’affichera pour créer une balise. Modifiez le nom de "Balise sans titre" en "Chatwoot" ou un nom de votre choix. Cliquez sur la configuration de la balise et sélectionnez le type de balise "HTML personnalisé" dans la liste. Copiez le script depuis la configuration de la boîte de réception dans Chatwoot et collez-le dans la zone de texte du script HTML, comme indiqué ci-dessous. Cochez la case "Prise en charge de document.write". Étape 3. Configurez le déclencheur​ Cliquez sur "Déclencheur" et sélectionnez "Toutes les pages" dans la liste. Cliquez sur "Enregistrer" pour sauvegarder la balise. Vous pourrez voir la balise listée sous les modifications de l’espace de travail. Cliquez sur "Soumettre" pour déployer la balise. Donnez un nom à la version et déployez les modifications en cliquant sur "Publier". Étape 4. Rayez-le de votre liste de tâches​ Vous avez déployé avec succès le widget de chat en direct Chatwoot sur votre site web. Actualisez votre site pour voir le widget de chat en direct apparaître sur toutes les pages.

Comprendre l'identité du contact et la validation de l'identité dans Chatwoot

Lorsqu’un client contacte votre équipe, Chatwoot crée ou met à jour un profil de contact pour lui. Ce profil aide les agents à comprendre qui est le client, quelles conversations il a eues auparavant et quel canal il a utilisé. Par exemple, le même client peut vous contacter via : - Chat en direct sur le site web - WhatsApp - Email - Un widget d’assistance intégré à l’application Chatwoot peut utiliser des identifiants tels qu’une adresse e-mail, un numéro de téléphone ou un identifiant client unique pour relier ces interactions au même profil client. Rapprochement de contact vs validation d’identité Il y a deux concepts liés mais différents : Le rapprochement de contact aide Chatwoot à reconnaître que deux conversations peuvent appartenir au même client. La validation d’identité aide Chatwoot à confirmer que le client est vraiment autorisé à utiliser cette identité. Cette distinction est importante, car quelqu’un pourrait saisir l’adresse e-mail d’un autre client dans un formulaire de chat public. Le rapprochement de contact seul peut enregistrer l’e-mail, mais ne prouve pas que le visiteur est bien propriétaire de cet e-mail ou de ce compte. Ce que voient les agents lorsque l’identité n’est pas vérifiée Lorsqu’une identité client n’est pas vérifiée, Chatwoot affiche un indicateur d’avertissement près du nom du contact. Cela aide les agents à comprendre que le visiteur n’a pas été vérifié de façon sécurisée par votre application. Cela ne signifie pas toujours que le client est suspect. Cela veut simplement dire que Chatwoot n’a pas reçu de jeton de validation d’identité fiable pour ce visiteur. Pour les demandes sensibles, les agents doivent être vigilants avant d’aborder des informations privées telles que facturation, détails de compte, transactions ou statut de vérification. Pourquoi la validation d’identité est importante La validation d’identité aide à protéger les conversations privées des clients. Elle réduit le risque d’usurpation d’identité, notamment lorsque l’assistance s’effectue depuis un portail client connecté, une application bancaire, une plateforme de trading, un tableau de bord SaaS ou tout produit basé sur un compte. Par exemple, si un client connecté démarre une conversation depuis votre portail, votre système peut indiquer à Chatwoot, en toute sécurité : « Ce visiteur est le client 12345, et nous l’avons vérifié de notre côté. » Chatwoot peut alors faire confiance à l’identité car elle a été vérifiée par votre système backend, et non simplement saisie dans un formulaire de chat. Configuration recommandée Pour les visiteurs du site public, vous pouvez utiliser des champs de contact classiques comme le nom, l’e-mail et le numéro de téléphone. Pour les utilisateurs connectés, nous recommandons d’activer la validation d’identité. Cela est utile lorsque les agents peuvent discuter d’informations sensibles telles que : - détails de compte - informations de facturation - commandes ou transactions - statut de vérification ou KYC - demandes internes d’employés - problèmes d’assistance réglementée Où activer la validation d’identité La validation d’identité peut être configurée depuis les paramètres de votre boîte de réception du site web. Accédez à : Paramètres -> Boîtes de réception -> Sélectionner la boîte de réception du site web -> Configuration -> Validation d’identité Dans cette section, Chatwoot affiche la clé secrète utilisée pour générer des jetons d’identité sécurisés. Vous pouvez également choisir si la validation d’identité doit être exigée pour toutes les conversations. Si Exiger la validation d’identité pour toutes les conversations est activé, les visiteurs doivent fournir un jeton d’identité valide avant de pouvoir démarrer une conversation. Les demandes sans jeton valide seront rejetées. Comment cela fonctionne en termes simples Votre application crée une signature sécurisée pour l’utilisateur connecté. Chatwoot vérifie cette signature avant de faire confiance à l’identité de l’utilisateur. Le secret utilisé pour créer cette signature reste sur votre serveur. Il ne doit pas être exposé dans le navigateur. Si la signature est valide, Chatwoot considère l’identité client comme vérifiée. Si la validation d’identité est imposée et que la signature est manquante ou invalide, Chatwoot rejette la demande. Ce que les agents doivent savoir Les agents n’ont pas besoin de comprendre la configuration technique. Le point important est : Si la validation d’identité est activée, l’identité affichée dans Chatwoot provient de la session connectée du client, et non d’une valeur saisie manuellement dans le chat. Cela donne plus de sérénité aux équipes de support lorsqu’elles traitent des conversations sensibles. Quand utiliser la validation d’identité Utilisez la validation d’identité lorsque le widget de chat est affiché dans un produit ou un portail client nécessitant une connexion. Exemples : - portail client fintech - tableau de bord bancaire - espace compte d’un site e-commerce - application SaaS - portail d’assistance pour employés - portail santé ou assurance Pour un site marketing public, la validation d’identité peut être facultative. Pour l’assistance aux clients connectés, elle est fortement recommandée. Pour les développeurs Cet article expose le concept de façon générale. Si vous êtes prêt à configurer la validation d’identité, utilisez ce guide de configuration technique.

Comment installer un chat en direct sur un site WordPress ?

WordPress est un système de gestion de contenu populaire. Si vous hébergez votre site web sur WordPress, vous pouvez ajouter un widget de chat en direct Chatwoot et discuter avec vos visiteurs en temps réel. Cela peut être fait en 4 étapes simples grâce à l’extension WordPress de Chatwoot. Étape 1. Téléchargez l’extension Chatwoot Téléchargez le fichier Zip de la dernière version de l’extension WordPress Chatwoot depuis GitHub, comme indiqué ci-dessous. Étape 2. Téléversez l’extension sur votre site WordPress Connectez-vous à votre compte WordPress. Accédez au panneau d’administration et cliquez sur « Extensions » dans la barre latérale. Vous verrez alors le bouton "Ajouter". Vous verrez une option pour téléverser l’extension, comme illustré sur la capture d’écran ci-dessous. Cliquez sur « Télécharger » et sélectionnez le fichier Zip téléchargé à l’étape 1. Étape 3. Activez l’extension Une fois l’extension téléversée, un écran de succès apparaît avec l’option "Activer l’extension", comme indiqué ci-dessous. Cliquez sur le bouton "Activer l’extension". Félicitations ! L’extension est désormais installée. Pour terminer la configuration, vous devez renseigner les identifiants de l’application Chatwoot, comme indiqué dans les étapes suivantes. Étape 4. Configurez l’extension Désormais, vous verrez « Chatwoot Settings » dans votre menu "Réglages". Cliquez dessus pour mettre à jour la configuration du chat en direct. On vous présentera alors l’écran de configuration, comme ci-dessous. Configurez ici votre extension Chatwoot pour la faire fonctionner. Vous devez créer une boîte de réception pour votre site Web sur votre installation Chatwoot. Veuillez consulter ce guide pour créer une boîte de réception de canal site web. Les champs du formulaire sont expliqués ci-dessous. 1. Jeton du site Chatwoot / URL d’installation Chatwoot Une fois que vous créez une boîte de réception de canal site web dans votre installation Chatwoot, vous obtiendrez un script. Vous pouvez copier le jeton et l’URL comme indiqué ci-dessous. 2. Design du widget Chatwoot prend en charge deux designs de widget de chat en direct : Design Standard et une bulle élargie. Choisissez selon votre préférence. 3. Position du widget Vous pouvez choisir où placer le widget de chat en direct sur le site web selon votre préférence. Les options disponibles sont Gauche & Droite. 4. Langue Chatwoot prend en charge plus de 30 langues. La langue par défaut est l’anglais. 5. Texte du lanceur Il s’agit d’un champ optionnel. Si vous utilisez le design de bulle élargie, vous pouvez personnaliser le texte affiché sur la bulle via ce champ. Après avoir complété le formulaire, cliquez sur le bouton "Enregistrer les modifications". Assurez-vous aussi d’avoir créé la boîte de réception site web sur Chatwoot. Étape 5. Vérifiez que l’extension fonctionne correctement Visitez votre site web et vérifiez si le widget apparaît bien sur le site !

Comment envoyer des informations utilisateur supplémentaires à Chatwoot en utilisant le SDK ?

Le SDK du site web Chatwoot vous permet d'envoyer des informations utilisateur supplémentaires à Chatwoot. Si vous avez installé notre code sur votre site web, le SDK exposera l'objet window.$chatwoot. Pour vous assurer que le SDK a été complètement chargé, veillez à écouter l'événement chatwoot:ready comme suit : window.addEventListener("chatwoot:ready", function () { // Utilisez window.$chatwoot ici // ... }); Si vous souhaitez écouter les messages dans le widget, vous pouvez utiliser l'événement suivant. window.addEventListener('chatwoot:on-message', function(e) { console.log('chatwoot:on-message', e.detail) }) Paramètres du SDK​ Pour masquer la bulle, vous pouvez utiliser le paramètre mentionné ci-dessous. Remarque : Si vous utilisez ceci, vous devez également déclencher l'ouverture du widget. window.chatwootSettings = { hideMessageBubble: false, showUnreadMessagesDialog: false, // Désactive la boîte de dialogue des messages non lus position: "left", // Peut être left ou right locale: "en", // Langue à définir useBrowserLanguage: false, // Définir la langue du widget d'après celle du navigateur de l'utilisateur type: "standard", // [standard, expanded_bubble] darkMode: "auto", // [light, auto] // baseDomain: "yourdomain.com" // à configurer si vous souhaitez suivre les utilisateurs sur plusieurs sous-domaines }; Utiliser automatiquement la langue du navigateur dans votre widget de chat en direct Pour afficher le widget de chat en direct dans la langue du navigateur de l'utilisateur, définissez useBrowserLanguage sur true dans le window.chatwootSettings ci-dessus. Remarque : Si useBrowserLanguage est activé (true), la valeur de locale spécifiée sera ignorée. Si la langue du navigateur n'est pas supportée par Chatwoot, la locale indiquée sous locale sera utilisée. Si celle-ci est également manquante, le widget utilisera la locale du tableau de bord agent par défaut. Mode sombre​ Le widget de chat en direct Chatwoot prend en charge le mode sombre à partir de la version v2.4.0. Pour activer le mode sombre, suivez les étapes indiquées ici. Designs du widget​ Chatwoot prend en charge deux designs pour le widget. 1. Standard (par défaut) 2. Bulle élargie Si vous utilisez la bulle élargie, vous pouvez personnaliser le texte affiché dans la bulle en définissant le paramètre launcherTitle dans chatwootSettings comme indiqué ci-dessous. window.chatwootSettings = { type: "expanded_bubble", launcherTitle: "Discutez avec nous", }; Activer la fenêtre popout​ Pour activer la fenêtre popout, ajoutez la configuration suivante dans chatwootSettings. Cette option est désactivée par défaut. window.chatwootSettings = { // ...Autres configurations showPopoutButton: true, } Vous pouvez également ouvrir la fenêtre popout du chat par programmation avec la méthode `popoutChatWindow()`. Messages personnalisés​ Personnalisez le message de bienvenue et les messages de disponibilité affichés dans l'en-tête du widget et les indicateurs de statut de l'équipe. window.chatwootSettings = { // ...Autres configurations welcomeTitle: "Besoin d'aide ?", // En-tête personnalisé du widget welcomeDescription: "Nous sommes là pour vous aider.", // Sous-titre de l'en-tête availableMessage: "Nous sommes en ligne et prêts à discuter !", // Lorsque l'équipe est en ligne unavailableMessage: "Nous sommes actuellement hors ligne." // Lorsque l'équipe n'est pas disponible }; Bascule des fonctionnalités Activez ou désactivez des fonctionnalités UI optionnelles dans le widget : window.chatwootSettings = { // ...Autres configurations enableFileUpload: true, // Afficher le bouton de pièce jointe enableEmojiPicker: true, // Activer le sélecteur d'emojis dans l'entrée de chat enableEndConversation: true // Permettre aux utilisateurs de terminer la conversation }; Ouvrir la fenêtre popout par programmation​ Vous pouvez ouvrir la fenêtre popout par programmation avec la méthode popoutChatWindow(). Pour cela, appelez la méthode ainsi : window.$chatwoot.popoutChatWindow(); Afficher ou masquer la bulle du widget​ Si vous souhaitez masquer/afficher la bulle du widget Chatwoot, vous pouvez utiliser toggleBubbleVisibility('show/hide') Exemple window.$chatwoot.toggleBubbleVisibility("show"); // pour afficher la bulle window.$chatwoot.toggleBubbleVisibility("hide"); // pour masquer la bulle Déclencher le widget par programmation Si vous souhaitez ouvrir la fenêtre de chat en cliquant sur un lien de votre site web, suivez la méthode ci-dessous. Dans votre action, appelez le SDK Chatwoot comme décrit ci-dessous. window.$chatwoot.toggle(); // Ouvrir/fermer le widget en passant l'état window.$chatwoot.toggle("open"); // Pour ouvrir le widget window.$chatwoot.toggle("close"); // Pour fermer le widget Définir l'utilisateur dans le widget​ window.$chatwoot.setUser("<unique-identifier-key-of-the-user>", { email: "<email-address-of-the-user@your-domain.com>", name: "<name-of-the-user>", avatar_url: "<avatar-url-of-the-user>", phone_number: "<phone-number-of-the-user>", }); setUser accepte un identifiant qui peut être un user_id dans votre base de données ou tout autre paramètre unique représentant un utilisateur. Vous pouvez passer email, name, avatar_url, phone_number en paramètres. Le support d'autres paramètres supplémentaires est en cours de développement. Veillez à réinitialiser la session lorsque l'utilisateur se déconnecte de votre application. Validation d'identité via HMAC​ Pour éviter l'usurpation d'identité et garantir que la conversation avec vos clients reste privée, nous recommandons de configurer la validation d'identité dans Chatwoot. La validation d'identité est activée en générant un HMAC (hash basé sur SHA256) à partir de l'attribut identifier. En plus de l'attribut identifier, vous pouvez aussi transmettre identifier_hash comme ci-dessous pour vous assurer que l'utilisateur est bien le bon. window.$chatwoot.setUser(`<unique-identifier-key-of-the-user>`, { name: "", // Nom de l'utilisateur avatar_url: "", // URL de l'avatar email: "", // Email de l'utilisateur identifier_hash: "", // Hash de l'identifiant généré depuis le hmac_token du webwidget phone_number: "", // Numéro de téléphone description: "", // description sur l'utilisateur country_code: "", // Code pays à deux lettres city: "", // Ville de l'utilisateur company_name: "", // nom de l'entreprise social_profiles: { twitter: "", // Nom d'utilisateur Twitter linkedin: "", // Nom d'utilisateur LinkedIn facebook: "", // Nom d'utilisateur Facebook github: "", // Nom d'utilisateur Github }, }); Pour générer le HMAC, lisez validation d'identité. Notez que la mise en œuvre de l'authentification HMAC permettra de conserver l'historique des chats entre les sessions. Définir des attributs personnalisés​ Pour renseigner des informations supplémentaires à propos du client, vous pouvez utiliser le champ d'attributs personnalisés client. En savoir plus sur les attributs personnalisés ici. Pour définir un attribut personnalisé, appelez setCustomAttributes comme ceci window.$chatwoot.setCustomAttributes({ accountId: 1, pricingPlan: "paid", // Ici la clé existe déjà comme attribut personnalisé // La valeur doit correspondre au type (actuellement supporte Number, Date, String et Number) }); Vous pourrez visualiser ces informations dans le panneau latéral d'une conversation. Pour supprimer un attribut personnalisé, utilisez deleteCustomAttribute comme ci-dessous window.$chatwoot.deleteCustomAttribute("attribute-key"); Définir la langue manuellement​ window.$chatwoot.setLocale("en"); Pour définir la langue manuellement, utilisez la fonction setLocale. Définir des labels sur la conversation​ Veuillez noter que les labels seront affectés à une conversation si l'utilisateur n'a pas encore démarré de conversation. Dans ce cas, les actions suivantes n'auront aucun effet : window.$chatwoot.setLabel("support-ticket"); window.$chatwoot.removeLabel("support-ticket"); Rafraîchir la session (à utiliser lors de la déconnexion de l'utilisateur depuis votre application)​ window.$chatwoot.reset(); Erreurs du widget​ Pour visualiser les erreurs éventuelles dans le widget, veillez à écouter l'événement chatwoot:error comme ceci : window.addEventListener("chatwoot:error", function () { // ... }); Remarque : Cette fonctionnalité est disponible à partir de la version v2.3.0. Personnaliser l'en-tête et la description de bienvenue Vous pouvez modifier : - Le titre et la description de bienvenue - Les messages affichés lorsque votre équipe est en ligne ou hors ligne - Activer sélectivement des fonctions UI comme l'envoi de fichiers, le sélecteur d'emojis et le bouton de fin de conversation window.chatwootSettings = { welcomeTitle: 'Besoin d’aide ?', welcomeDescription: 'Nous sommes là pour vous aider.', availableMessage: 'Nous sommes en ligne et prêts à discuter !', unavailableMessage: 'Nous sommes actuellement hors ligne.', enableFileUpload: true, enableEmojiPicker: true, enableEndConversation: true };

Explication des paramètres du chat en direct du site web

Ce document vous aidera à configurer entièrement le chat en direct sur votre site web. Il explique comment créer et utiliser les réglages supplémentaires pour une boîte de réception de site web souhaitée. Compatibilité et exigences​ Le tableau de bord web et le widget de chat en direct fonctionnent avec la plupart des navigateurs modernes. Voici les versions de navigateurs prises en charge : - Mozilla Firefox : v52 et versions ultérieures - Google Chrome : v57 et versions ultérieures - Chromium : v57 et versions ultérieures - Apple Safari : v14.1 et versions ultérieures - Microsoft Edge : v16 et versions ultérieures Voici les versions de systèmes d'exploitation mobile prises en charge pour l'application mobile Chatwoot : - Android : v5.0 et versions ultérieures - iOS : v11.0 et versions ultérieures Comment créer un canal de site web sur Chatwoot ? Étape 1. Rendez-vous sur la page Boîtes de réception. Allez dans Paramètres → Boîtes de réception → bouton « Ajouter une boîte de réception ». Étape 2. Cliquez sur l’icône « Site web ». Étape 3. Entrez le nom de votre site web, l’URL, et les autres détails comme décrit ci-dessous. Les champs disponibles sont expliqués ci-dessous. 1. Nom du site web Entrez le nom de votre site web. Par exemple, Exemple Inc. 2. Domaine du site web Entrez l’URL de votre site web. Par exemple, www.example.com 3. Couleur du widget Cliquez sur la palette et sélectionnez une couleur pour votre widget de chat en direct. 4. En-tête de bienvenue Écrivez un message de bienvenue pour vos clients. Par exemple, Bonjour 👋 5. Slogan de bienvenue Par exemple : Nous sommes là pour répondre à vos questions. Demandez-nous n'importe quoi ou partagez vos retours. 6. Activer/désactiver le message de bienvenue du canal Activez pour envoyer le message de bienvenue lorsque le client commence une conversation. 7. Message de bienvenue du canal Rédigez un message pour démarrer la conversation. Par exemple, Bonjour. Comment pouvons-nous vous aider ? Une fois tous les détails saisis, cliquez sur le bouton « Créer une boîte de réception ». Étape 4. « Ajouter des agents » à la boîte de réception de votre site web. Les conversations seront dirigées vers les agents uniquement si ceux-ci sont associés à la boîte de réception. Même si vous êtes administrateur, vous devez vous ajouter comme agent à la boîte de réception pour la voir apparaître sur votre écran. Sélectionnez les Agents dans le menu déroulant puis cliquez sur Ajouter des agents. Si aucun agent n’a été ajouté, suivez les étapes pour ajouter des agents. Étape 5. Félicitations ! Vous avez créé avec succès une boîte de réception de site web. Ajoutez maintenant le widget à votre site. Copiez et collez l’extrait de code affiché sur la page dans votre site web pour commencer à aider vos clients. Vous pouvez cliquer sur le bouton Copier puis coller dans le fichier racine de votre site. Si vous cliquez sur le bouton « Paramètres supplémentaires », vous accéderez aux paramètres additionnels de la boîte de réception. Si vous cliquez sur le bouton « M’y rendre », vous serez redirigé vers la nouvelle boîte de réception. Étape 6. Si vous souhaitez mettre à jour la liste des agents ayant accès à la boîte de réception, allez dans Paramètres → Boîtes de réception. Vous pourrez voir la boîte de réception de votre site listée ici. Cliquez sur Paramètres. Vous verrez à la fois le code et la liste des agents ayant accès à la boîte de réception. Terminer la configuration de la boîte de réception web Vous disposez déjà d’une boîte de réception web fonctionnelle. Voyons maintenant les réglages additionnels de la boîte de réception.​ Sur votre écran Boîtes de réception, cliquez sur l’icône engrenage pour accéder à la page Paramètres. Vous verrez l’écran suivant : Onglet Paramètres Faites défiler la page vers le bas pour voir plus d’options, où vous pouvez définir les différentes notifications que vous souhaitez recevoir lorsque votre boîte de réception web sera en service. Voici quelques exemples pour vous aider à comprendre : Activer la collecte de l’adresse e-mail est activée par défaut. Cela signifie qu’un message automatique pour collecter l’adresse e-mail apparaîtra dès qu’un client commence une conversation. Le client/utilisateur final sera invité à saisir une adresse e-mail. Activer CSAT. Une fois cette option activée, votre enquête de satisfaction client sera lancée à chaque résolution de ticket. Les résultats du CSAT seront consultables plus tard dans la section Rapports. Cliquez sur le bouton « Mettre à jour » pour sauvegarder les modifications apportées. Onglet Collaborateurs​ Cliquez sur l’onglet « Collaborateurs ». Ici, vous pouvez ajouter des agents à la boîte de réception ou supprimer les agents déjà ajoutés. Vous pouvez aussi activer ou désactiver l’attribution automatique des nouvelles conversations aux agents ajoutés à cette boîte. Cliquez sur Mettre à jour pour sauvegarder les changements. Onglet Heures d’ouverture​ Cliquez sur l’onglet « Heures d’ouverture ». Dans cette section, vous pouvez définir les horaires de travail de votre équipe. Cochez la case Activer la disponibilité commerciale pour cette boîte de réception si vous avez des horaires de travail définis. Une fois la case cochée, une nouvelle section s’ouvrira comme ci-dessous. Vous pouvez écrire le message à afficher au client en dehors des heures d’ouverture. Note : Lorsque Captain est activé sur une boîte de réception, le message d’indisponibilité est automatiquement supprimé. Captain gérera directement les conversations, même en dehors des heures de travail. Le message d’indisponibilité ne sera envoyé que si Captain transfère la conversation à un agent humain ou si Captain n’est pas configuré pour la boîte de réception. Vous pouvez également sélectionner les heures d’ouverture pour chaque jour de la semaine, ainsi que le fuseau horaire approprié. Cliquez sur le bouton Mettre à jour les horaires d’ouverture. Onglet Formulaire avant chat​ Cliquez sur l’onglet « Formulaire avant chat ». Grâce à cette fonctionnalité, vous pouvez collecter des informations sur vos clients dès leur arrivée dans la fenêtre de chat / widget. Vous pouvez recueillir le nom, l’adresse e-mail et plus avant de démarrer la conversation. Les champs visibles sont expliqués ci-dessous : 1. Activer le formulaire avant chat Sélectionnez Oui ou Non. Oui si vous souhaitez utiliser le formulaire avant chat. Non si vous voulez le laisser désactivé. 2. Message avant chat Saisissez un message pour démarrer la conversation avec le client. Par exemple, Bonjour, nous avons besoin de quelques informations pour mieux vous servir. 3. Champs du formulaire avant chat Cochez les champs nécessaires. Important : « Nom », « Email » et « Téléphone » sont les seuls attributs standards du formulaire avant chat. Les autres champs sont créés via des attributs personnalisés. Si vous avez besoin de champs personnalisés, créez-les comme attributs personnalisés d’abord. Cliquez sur le bouton « Mettre à jour ». Le formulaire avant chat est maintenant activé. Onglet Configuration​ Cliquez sur l’onglet « Configuration ». Vous trouverez ici l’extrait de code à copier sur votre site web. Vous pouvez cliquer sur le bouton Copier pour copier le code puis le coller dans le fichier racine de votre site. Onglet Générateur de widget​ Vous pouvez personnaliser votre widget web grâce aux réglages simples proposés sur cette page. Vous pourrez visualiser les changements en temps réel.