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[​](https://www.chatwoot.com/docs/product#compatibility-and-requirements "Lien direct vers le titre") 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 ». ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBNnRTVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c20bce3346e4c5302e34231b732d35756c5d8f7c/add-inbox-button-in-chatwoot.png) **Étape 2**. Cliquez sur l’icône « Site web ». ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBN3BTVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--ca254101e5b84f709f7af7422bd82a888f947073/choose%20website%20inbox.png) **Étape 3**. Entrez le nom de votre site web, l’URL, et les autres détails comme décrit ci-dessous. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOEJTVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--15de72d163b99b8c4c03979f6cf65ceaa0890c40/website%20channel%20settings%20in%20chatwoot.png) 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`](http://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. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBK1ZTVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--bc3650f3167675552f06e58f14243f29159d3716/adding%20agents%20to%20inbox.png) 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](https://www.chatwoot.com/hc/user-guide/articles/1677482414-adding-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](https://www.chatwoot.com/docs/user-guide/setting-up-chatwootwidget#root-file-of-website) de votre site. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBdzlUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--2de82601616d737879b126aa57ef963e368dfaa1/website%20inbox%20is%20ready.png) 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. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBeUpUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--d927267e1314006286bb481ac4cfad56640250c4/website%20settings.png) ## 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.[​](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#additional-inbox-settings "Lien direct vers le titre") 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 ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBekJUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--217e87f08cc9fedfd4f013077a28a7c0c7f1b3c0/updating%20website%20settings.png) 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. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBelZUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--c57a9e3df4574d12a56cfcf79567f2702a7719a8/updating%20more%20website%20settings.png) 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[**​**](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#collaborators-tab "Lien direct vers le titre") 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. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMEZUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--fb59fd3384c40aa182e8025c2ce50dbdd412679a/collaborators%20in%20website%20inbox.png) Cliquez sur `Mettre à jour` pour sauvegarder les changements. ### Onglet Heures d’ouverture[**​**](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#business-hours-tab "Lien direct vers le titre") Cliquez sur l’onglet « Heures d’ouverture ». Dans cette section, vous pouvez définir les horaires de travail de votre équipe. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMGxUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--67f7632d1b08f2600a7e9e5b57437925dbbe8d8e/website%20business%20hours%20setting.png) 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é. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMUJUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--b0121cc8955abbafb5ba02f2571be6512cf8e95d/business%20hour%20settings%20in%20chatwoot.png) Cliquez sur le bouton `Mettre à jour les horaires d’ouverture`. ### Onglet Formulaire avant chat[​](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#pre-chat-form-tab "Lien direct vers le titre") Cliquez sur l’onglet « Formulaire avant chat ». Grâce à cette fonctionnalité, vous pouvez [collecter des informations sur vos clients](https://www.chatwoot.com/blog/pre-chat-form-automations/) 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. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMXBUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--44b3215e97ab368f518d0edc68540dee5ad8c977/pre%20chat%20form%20settings%20in%20chatwoot.png) 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](https://www.chatwoot.com/hc/user-guide/articles/1677502327-how-to-create-and-use-custom-attributes) d’abord. Cliquez sur le bouton « Mettre à jour ». Le formulaire avant chat est maintenant activé. ### Onglet Configuration[​](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#configuration-tab "Lien direct vers le titre") Cliquez sur l’onglet « Configuration ». Vous trouverez ici l’extrait de code à copier sur votre site web. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOEJUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--9d1f59b59a73fa8c2b9b2bb5d43628d9aee98b5b/configuration%20settings%20tab%20in%20website%20inbox.png) Vous pouvez cliquer sur le bouton `Copier` pour copier le code puis [le coller dans le fichier racine](https://www.chatwoot.com/docs/user-guide/setting-up-chatwootwidget#root-file-of-website) de votre site. ### Onglet Générateur de widget[**​**](https://www.chatwoot.com/docs/product/channels/live-chat/create-website-channel#widget-builder-tab "Lien direct vers le titre") 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. ![](https://app.chatwoot.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBOGxUVHc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--b7cc5f2ecd054b45fed9f15da31a074dfb8df860/chatwoot's%20web%20widget%20builder.png)