Le widget de chat du site Web permet aux visiteurs du site Web de vous contacter via le chat en direct ou via d'autres canaux de messagerie auxquels vous êtes connectés.

Connexion d'un widget de chat de site Web

Regardez la vidéo ci-dessous pour un guide étape par étape sur la façon de connecter le chat du site Web à respond.io.

How to Connect Website Chat to respond.io

Étape 1 : Allez dans Paramètres > Chaînes

Étape 2 : Cliquez sur Ajouter une chaîne > Chat sur le site Web > Connectez-vous

Étape 3 : Renseignez le(s) site(s) Web sur lequel le widget sera ajouté.

Reportez-vous à ce qui suit pour savoir comment les sites Web peuvent être ajoutés à la liste blanche.

Si l'utilisateur ajoutehttps://app.respond.ioalors seulementhttps://app.respond.iosera sur liste blanche. Tout autre sous-domaine ou racine ne devrait pas fonctionner.
Si l'utilisateur ajoutehttps://*.respond.io, alors tous les sous-domaines, y compris le domaine racine, seront ajoutés à la liste blanche.
Si l'utilisateur ajoutehttps://respond.io, alors seul le domaine racine sera ajouté à la liste blanche.

Étape 4 :Sélectionnez une couleur de thème pour le widget à l’aide du sélecteur de couleurs interactif.

Choisissez une couleur qui correspond à votre marque couleur et à votre site Web.

Étape 5 :Sélectionnez une icône pour le widget à afficher sur le site Web. Si vous préférez télécharger une icône personnalisée, vous pouvez télécharger une icône carrée avec une taille recommandée de 256 px x 256 px.

Les widgets peuvent être davantage personnalisés une fois connectés.

Étape 6: Cliquez surSuivant> Ajoutez le script à votre site Web préféré. Vous pouvez également envoyer les instructions d’installation à quelqu’un d’autre par e-mail.

Installation du widget de chat

Vous aurez peut-être besoin d'un webmaster ou d'un administrateur technique pour vous aider à installer le widget de chat sur le site Web. Veuillez demander de l'aide si nécessaire.

En fonction du système que vous utilisez pour créer et gérer votre site Web, nous avons créé un guide étape par étape pour vous guider dans l'installation d'un widget de chat sur votre site Web.

Pour les autres plateformes ou services, accédez à la source HTML de la page. Collez le script avant la balise </body> .

<body>
...
...
...
<Paste Script Here>
</body>

Si vous avez besoin d’aide, vous pouvez choisir de transmettre le script ainsi que les instructions d’installation à l’administrateur de votre site Web. Cochez la case correspondante et saisissez l'adresse e-mail d'une personne qui peut vous aider à installer le plugin de chat.

Le widget de discussion du site Web respond.io apparaîtra sur votre site une fois le script installé avec succès.

Personnalisation du widget de chat

Étape 1 :Dans votre espace de travail, accédez àParamètres>Chaîne

Étape 2 : Localisez le canal de discussion du site Web > cliquez sur Personnaliser

Personnalisez le widget du site Web pour qu'il corresponde à l'apparence de votre site afin que le widget soit harmonieux. Sur le côté droit de la page, il y a un aperçu du widget de chat du site Web. Toute personnalisation apportée au widget se reflétera sur le widget pour vous aider à avoir une meilleure idée de ce que vous personnalisez.

Affichage & Apparence

Vous pouvez personnaliser les éléments suivants pour modifier l’apparence d’affichage du widget sur le site Web.

Champ	Description
Couleur du thème	La couleur choisie sera utilisée comme couleur principale de votre widget.
Couleur du texte	La couleur choisie sera utilisée comme couleur de texte principale de votre widget.
Icône de chat du site Web	L'icône sélectionnée est utilisée à l'intérieur de la bulle du widget avec la couleur du thème. Vous pouvez télécharger une icône personnalisée si nécessaire.
Message contextuel	Le message contextuel est affiché aux visiteurs du site Web une fois par jour 5 secondes après le chargement de la page. Si ce paramètre n'est pas défini, aucun message contextuel n'apparaîtra aux visiteurs du site Web.

Validation de l'icône de chat du site Web :

Taille maximale du fichier : 1 Mo
Dimension maximale du fichier : 256 x 256 px
Forme : Carré

Position

Champ	Description
Aligner sur	Les utilisateurs peuvent choisir de spécifier une position pour afficher le widget à gauche ou à droite de la plateforme.
Espacement vertical	Les utilisateurs peuvent spécifier la quantité d’espacement vertical entre le widget de discussion du site Web et le bas de l’écran.
Espacement horizontal	Les utilisateurs peuvent spécifier la quantité d’espacement horizontal entre le widget de discussion du site Web et le côté de l’écran.
Taille du widget	Les utilisateurs peuvent choisir la taille du widget entre Petit, Standard ou Grand.
Options d'affichage	Les utilisateurs peuvent choisir d'afficher ce widget sur le bureau, les appareils mobiles ou les deux.

Éléments d'en-tête

Champ	Description
Titre	Le titre s'affichera en haut de votre widget de discussion.
Slogan	Le slogan sera affiché sous le titre.
Logo du chat du site Web	Déposez l'image de votre logo ici afin qu'elle s'affiche en haut de la discussion du site Web. Le format peut être au format PNG, SVG ou JPG et la taille du fichier ne dépasse pas 4,0 Mo.
Icônes de chaîne	Cette option permettra aux contacts de vous contacter via leur canal préféré, à condition que les options soient proposées. Vous pouvez ajouter jusqu'à six canaux et ils seront affichés en haut du widget de discussion du site Web.
Couleur des icônes de chaîne	Les icônes de chaîne peuvent être affichées en blanc ou en couleur sur votre widget de chat. Sélectionnez Blanc ou Coloré pour correspondre à la couleur du thème de votre widget de chat.

Validation du logo du chat du site Web :

Taille maximale du fichier : 4 Mo
Dimension maximale du fichier : 1 024 x 1 024 px
Forme : Carré

Icônes de chaîne

Si le widget de discussion du site Web n'a jamais été configuré auparavant, les canaux connectés avec des informations adéquates seront répertoriés par défaut sous forme de liens de canal de widget.

Vous pouvez ajouter le widget Liens de chaîne et spécifier les informations nécessaires pour la chaîne sélectionnée.

Voici la liste des champs de saisie requis pour chacun des liens de chaîne pris en charge.

Liens des chaînes	Champ de saisie obligatoire
WhatsApp	Numéro de téléphone WhatsApp
Facebook Messenger	ID de page Facebook
Télégramme	Nom du bot Telegram
Gazouillement	identifiant Twitter
DOUBLER	ID DE LIGNE
Viber	Nom du compte public Viber
SMS	Numéro de téléphone SMS
E-mail	Adresse email
Coup de fil	Numéro de téléphone
Lien personnalisé	Adresse URL et icône
QR personnalisé	Image et icône QR

Validation de l'icône de chaîne :

Taille maximale du fichier : 1 Mo
Dimension maximale du fichier : 256 x 256 px
Forme : Carré

Formulaire de pré-chat

L'activation de cette option ajoutera un formulaire de pré-chat à votre chat de site Web. Si cette option est activée, les visiteurs de votre site Web se verront présenter un formulaire à remplir avant de démarrer la discussion.

Avec cette option activée, vous pouvez inclure des champs personnalisés supplémentaires si nécessaire. En plus de cela, vous pouvez également personnaliser l'étiquette des champs par défaut sur la façon dont ils apparaissent à vos contacts.

Les étiquettes des champs peuvent être personnalisées dans une langue différente pour correspondre à la langue du site Web'.

Paramètres supplémentaires

Champ	Description
Texte de la barre de saisie	Ce texte fonctionnera comme un espace réservé dans la zone de saisie.
Police de texte	La police qui sera utilisée pour afficher la police dans le widget de chat du site Web.

Restreindre les pièces jointes entrantes

Lorsque cette option est cochée, le visiteur du site Web n'a pas la possibilité de joindre une pièce jointe dans le widget de chat du site Web.

Gardez le chat du site Web caché

Lorsque vous utilisez cette option, le widget sera complètement masqué. Jusqu'à ce que la référence d'ancrage ait été cliquée ou lorsque le chat est ouvert via l'API programmatique.

#webchat_widget

En utilisant l'ancre ci-dessus, vous pouvez créer un bouton sur votre page, pour ouvrir le widget une fois cliqué.

Masquer la marque Respond.io

En utilisant cette option, vous pouvez supprimer la marque respond.io de votre widget.

Configuration des canaux

Étape 1 : Cliquez sur Paramètres > Chaînes

Étape 2 : Localisez le chat du site Web > cliquez sur Gérer

Étape 3 : Dans la page de configuration du chat du site Web , vous verrez les configurations suivantes :

Lien de discussion - Le lien URL permettant à votre contact d'accéder à votre chaîne.
Nom du canal - Le nom du canal peut être modifié et est utilisé en interne pour identifier le canal.
Domaines de sites Web - Site(s) Web connectés à votre widget.
Code de discussion du site Web - Le code que vous pouvez coller dans la source HTML de votre site Web si vous devez récupérer l'extrait de code généré.

Si tu n'inclus pas ton site dans cette liste, ton widget ne se chargera pas. Tu peux ajouter plusieurs URL si tu utilises le plugin sur plusieurs sites Web.

Étape 4: Cliquez sur Enregistrer les modifications pour mettre à jour la page de configuration du chat du site Web

Identification des utilisateurs connectés

Les utilisateurs connectés à votre site Web peuvent être identifiés en ajoutant un simple code JavaScript au code de votre site Web. Une fois que l'identifiant transmis correspond à un contact existant, la conversation en cours reprendra.

Le terme « utilisateur » est utilisé dans le contexte de votre site Web. Sur la plateforme respond.io, nous continuons à les appeler « Contacts ».

window.__respond_settings = {
  identifiant : "client@exemple.com",
  prénom : "Jane",
  nom : "Doe",
  téléphone : "60123456789",
  e-mail : "client@exemple.com",
  photo de profil : "Anglais : https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/07/08/14/pic.jpg",
  countryCode: "MY",
  language: "fr",
  // Champs personnalisés
  custom_fields: {
    // slugs de champs personnalisés
    number: 123,
    description: "some text",
  },
};

Guide sur l'utilisation du code

Modifiez le code (donné ci-dessous) pour envoyer à respond.io l'identifiant de l'utilisateur actuellement connecté. Il peut s'agir de l'adresse e-mail, de l'ID de contact ou de tout autre champ de contact. Veuillez noter qu'un identifiant est un champ obligatoire.
Collez le code directement dans la balise head de chaque page où vous souhaitez que le chat du site Web apparaisse.
- Le script d'identification des utilisateurs connectés doit être placé au-dessus du code de discussion du site Web qui se trouve dans la boîte de dialogue de configuration de la discussion du site Web.
Vous pouvez également envoyer des champs de contacts respond.io associés à vos contacts afin que nous stockions le champ de contact pendant le processus de création de contact. Le nom du champ (ou slug) peut être trouvé dans le module Champs de contact.
Veuillez noter que si vous utilisez cette fonctionnalité, le formulaire de pré-chat sera ignoré, ce qui signifie que les contacts n'ont pas besoin de remplir leurs informations avant d'entamer une conversation.

L'exemple ci-dessus transmet une adresse e-mail comme identifiant et pendant le processus de création de contact, tous les champs de contact transmis seront stockés.

Contrôle programmatique (API pour les utilisateurs)

Le widget de discussion du site Web peut être ouvert et fermé via le code JavaScript de votre site Web. Cela vous permet de créer un bouton personnalisé "Discutez avec nous" sur votre site Web et de déclencher l'ouverture du widget de discussion du site Web lorsqu'un visiteur clique sur le bouton.

Actes

Ouvrir le chat
1. Description : Ouvre le widget de chat.
2. Syntaxe : $respond.do("chat:ouvrir")
Fermer le chat
1. Description : Ferme le widget de chat.
2. Syntaxe : $respond.do("chat:close")

Écouteurs d'événements

La boîte de discussion a été ouverte
1. Description : Gère l'événement d'ouverture du widget de chat (déclenche votre fonction de rappel ).
2. Syntaxe :$respond.on("chat:ouvert", rappel)
La boîte de discussion a été fermée
1. Description : Gère l'événement de fermeture du widget de chat (déclenche votre fonction de rappel ).
2. Syntaxe :$respond.on("chat:fermé", rappel)

Méthodes de vérification de l'état

Le chat est-il ouvert ?
1. Description : Renvoie true si le widget de chat est ouvert, sinon false.
2. Syntaxe : $respond.is("chat:open")
Le chat est-il fermé ?
1. Description : Renvoie true si le widget de chat est fermé, sinon false.
2. Syntaxe : $respond.is("chat:fermé")

FAQ et dépannage

Pourquoi mes messages ne sont-ils pas livrés aux contacts ?

Il peut y avoir plusieurs raisons pour lesquelles les messages ne sont pas délivrés :

Le contact a quitté le site.
L'inactivité du contact peut dépasser la période d'expiration.
Le client du contact peut avoir des problèmes de connexion à Internet.

Pourquoi mon widget n'apparaît-il pas sur mon site Web ?

Assurez-vous que le code est correctement installé. Reportez-vous aux instructions ici sur la manière d'installer le widget de chat du site.
Assurez-vous d'ajouter à la liste blanche le site Web sur lequel le widget doit être installé. Reportez-vous à l'étape 3 deConnexion du widget de chat du site Web pour savoir comment ajouter votre domaine à la liste blanche.

Démarrage rapide du widget de chat du site Web.