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.
Regardez la vidéo ci-dessous pour un guide étape par étape sur Comment connecter le chat du site Web à respond.io.
Étape 1 : Allez dans Paramètres > Canaux
Étape 2 : Cliquez sur Ajouter le canal > Chat du site > Connectez
Étape 3: Remplissez le ou les sites Web où le Widget sera ajouté.
Reportez-vous à ce qui suit sur la façon dont les sites Web peuvent être mis en liste blanche.
Si l'utilisateur ajoutehttps://app.respond.ioalors seulementhttps://app.respond.iosera mis en 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 mis en liste blanche.
Si l'utilisateur ajoutehttps://respond.io, seul le domaine racine sera mis en liste blanche.
Étape 4 :Sélectionnez une couleur de thème pour le Widget en utilisant le 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 256px x 256px.
Les widgets peuvent être davantage personnalisés une fois connectés.
Étape 6: Cliquez sur> Ajouter un script à votre site Web préféré. Vous pouvez également envoyer les instructions d'installation à quelqu'un d'autre par courriel.
Vous pouvez avoir besoin d'un webmestre ou d'un administrateur technique pour aider à installer le widget de chat sur le site Web. S'il vous plaît, demandez de l'aide si nécessaire.
Selon le 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 d'autres plates-formes 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 avec les instructions d'installation à l'administrateur de votre site Web. Sélectionnez la case à cocher et entrez l'adresse e-mail de quelqu'un qui peut vous aider à installer le plugin de chat.
Le widget respond.io Website Chat Widget apparaîtra sur votre site une fois que le script a été installé avec succès.
Étape 1 :Dans votre espace de travail, accédez àParamètres>Chaîne
Étape 2 : Localisez le canal de discussion du site > cliquez Personnalisez
Personnalisez le Widget du site Web pour qu'il corresponde à l'apparence du site's afin que le widget soit transparent. Sur le côté droit de la page, il y a un aperçu du widget de chat du site. Toute personnalisation faite au widget réfléchira sur le widget pour vous aider à avoir une meilleure idée de ce que vous personnalisez.
Vous pouvez personnaliser les éléments suivants pour modifier l'apparence du widget sur le site Web.
Champ | Libellé |
|---|---|
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 pop-up | Le message pop-up est affiché aux visiteurs du site Web une fois par jour 5 secondes après le chargement de la page. S'il n'est pas défini, aucun message popup n'apparaîtra pour les visiteurs du site Web. |
Validation pour l'icône de chat du site web :
Taille maximale du fichier : 1 Mo
Dimension maximale du fichier : 256 x 256 px
Forme : Carré
Champ | Libellé |
|---|---|
Aligner à | Les utilisateurs peuvent choisir de spécifier une position pour afficher le widget à gauche ou à droite de la plate-forme. |
Espacement vertical | Les utilisateurs peuvent spécifier le nombre d'espacements verticaux entre le widget de chat 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 chat du site web et le côté de l'écran. |
Taille du widget | Les utilisateurs peuvent choisir la taille du widget de Small, Standard ou Large. |
Options d'affichage | Les utilisateurs peuvent choisir d'afficher ce widget sur le bureau, les appareils mobiles ou les deux. |
Champ | Libellé |
|---|---|
Titre de la page | Le titre sera affiché en haut de votre widget de chat. |
Tagline | Le tagline sera affiché sous le titre. |
Logo du chat du site web | Déposez votre image de logo ici pour qu'elle s'affiche en haut du chat du site. Le format peut être soit PNG, SVG ou JPG et la taille du fichier n'est pas supérieure à 4.0 Mo. |
Icônes des canaux | Cette option permettra aux Contacts de vous contacter via leur canal préféré à condition que les options soient fournies. Vous pouvez ajouter jusqu'à six canaux et ils seront affichés en haut du widget Chat du site. |
Couleur des icônes des canaux | Les icônes de la Chaîne peuvent être affichées en blanc ou en couleur sur votre widget de chat. Sélectionnez Blanc ou Coloré pour aller avec le thème Couleur de votre widget de chat. |
Validation du logo du chat du site web :
Taille maximale du fichier : 4Mo
Dimension maximale du fichier : 1024 x 1024 px
Forme : Carré
Si le widget de chat du site Web n'a jamais été configuré auparavant, les canaux connectés avec les informations adéquates seront listés par défaut comme des liens du canal de widget.
Vous pouvez ajouter les liens du widget Chaîne et spécifier les informations nécessaires pour le canal sélectionné.
Voici la liste des champs de saisie requis pour chacun des liens de canal pris en charge.
Liens de la chaîne | Champ de saisie requis |
|---|---|
Numéro de téléphone WhatsApp | |
Messenger Facebook | ID de la page Facebook |
Telegram | Nom du robot Telegram |
Twitter ID | |
LINE | ID de la ligne |
Viber | Nom du compte public Viber |
SMS | Numéro de téléphone SMS |
Courriel | Adresse e-mail |
Appel téléphonique | Numéro de téléphone |
Lien personnalisé | Adresse URL et icône |
Custom QR | Image et icône QR |
Validation pour l'icône de canal:
Taille maximale du fichier : 1 Mo
Dimension maximale du fichier : 256 x 256 px
Forme : Carré
Activer cette option ajoutera un formulaire de préconversation à votre chat sur votre site Web. Si activé, les visiteurs de votre site Web seront présentés avec un formulaire à remplir avant qu'ils ne commencent le chat.
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 le libellé des champs par défaut sur la façon dont ils apparaissent dans vos contacts.
Les étiquettes de champs peuvent être personnalisées dans une langue différente pour correspondre à la langue du site's.
Champ | Libellé |
|---|---|
Input Bar Text | Ce texte fonctionnera comme un espace réservé dans la zone de frappe. |
Text Font | La police qui sera utilisée pour afficher la police dans le widget de chat du site. |
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.
Lorsque vous utilisez cette option, le widget sera complètement caché. Jusqu'à ce que la référence d'ancre ait été cliquée ou quand le chat est ouvert via l'API de programme.
#webchat_widget
En utilisant l'ancre ci-dessus, vous pouvez créer un bouton sur votre page, pour ouvrir le widget une fois cliqué.
En utilisant cette option, vous pouvez supprimer la Branding respond.io de votre Widget.
Étape 1 : Cliquez sur Paramètres > Canaux
Étape 2 : Localisez le chat du site > cliquez Gérer
Étape 3 : Dans la page de configuration du chat du site Web , vous verrez les configurations suivantes :
Lien de chat - Le lien URL pour que votre contact atteigne votre canal.
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.
Site Chat Code - Le code que vous pouvez coller dans la source HTML de votre site Web si vous avez besoin de récupérer le code snippet.
Si vous donnez't inclure votre site dans cette liste, votre widget a gagné't chargé. Vous pouvez ajouter plusieurs URL si vous're en utilisant 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
Les utilisateurs connectés à votre site Web peuvent être identifiés en ajoutant un code JavaScript simple au code de votre site Web. Une fois que l'identifiant passé correspond à un contact existant, la conversation en cours sera reprise.
Le terme « utilisateur » est utilisé dans le contexte de votre site Web. Dans la plate-forme respond.io, nous continuons à les appeler « Contacts ».
window.__respond_settings = {
identifiant: "customer@example. om",
Prénom: "Jane",
Nom: "Doe",
téléphone: "60123456789",
email: "customer@example. om",
profilePic: "https://static.independent.co. k/s3fs-public/thumbnails/image/2015/07/08/14/pic. pg",
countryCode : "MY",
langue: "en",
// Champs personnalisés
custom_fields: {
// slugs de champs personnalisés
nombre: 123,
description: "un peu de texte",
},
};Guide sur la façon d'utiliser le 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 ou de l'ID de contact ou en fonction de n'importe quel autre champ de contact. Veuillez noter qu'un identifiant est un champ obligatoire.
Collez le code à droite dans la balise head de chaque page où vous voulez que le chat du site apparaisse.
Le script d'identification des utilisateurs connectés doit être placé au-dessus du code de chat du site Web qui se trouve dans la boîte de dialogue de configuration du chat du site.
Vous pouvez également envoyer les champs respond.io Contacts associés à vos Contacts afin que nous stockions le champ Contact pendant le processus de création du contact. Le nom du champ (ou slug) se trouve dans le module Champs de contact.
Veuillez noter que si vous utilisez cette fonctionnalité, le formulaire de pré-conversation 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 est de passer une adresse email comme identifiant et pendant le processus de création de contact, tous les champs de contact passés seront stockés.
Le Widget de chat du site Web peut être ouvert et fermé via le code JavaScript de votre site Web. Cela vous permet de créer un "Chat personnalisé avec nous" bouton sur votre site Web, et déclencher le Widget de Chat de Site Web à ouvrir lorsqu'un visiteur clique sur le bouton.
Ouvrir le chat
Description : Ouvre le widget de chat.
Syntaxe : $respond.do("chat:open")
Fermer le chat
Description : Ferme le widget de chat.
Syntaxe : $respond.do("chat:close")
La boîte de discussion a été ouverte
Description : Gère l'événement d'ouverture du widget de chat (déclenche votre fonction de rappel ).
Syntaxe :$respond.on("chat:open", callback)
La boîte de discussion a été fermée
Description : Gère l'événement de fermeture du widget de chat (déclenche votre fonction de rappel ).
Syntaxe :$respond.on("chat:closed", callback)
Le chat est-il ouvert ?
Description : Renvoie true si le widget de chat est ouvert, sinon false.
Syntaxe : $respond.is("chat:open")
Le chat est-il fermé?
Description : Renvoie true si le widget de chat est fermé, sinon false.
Syntaxe : $respond.is("chat:closed")
Il pourrait y avoir quelques raisons pour lesquelles les messages ne sont pas distribués :
Le contact a quitté le site Web.
L'inactivité du contact'peut dépasser le délai d'expiration.
Contacter le client'peut avoir des problèmes de connexion Internet.
Assurez-vous que le code est installé correctement. Reportez-vous aux instructionsicipour savoir comment installer le widget chat du site.
Veillez à mettre en liste blanche le site Web où le widget doit être installé. Reportez-vous à l'étape 3 deConnexion du widget de chat du site Webpour savoir comment ajouter votre domaine à la liste blanche.
Articles connexes 👩💻