21

Personnalisation du widget

Dernière mise à jour il y a 3 mois

Modification de l’apparence du widget de discussion tawk.to Comment modifier le contenu du widget (widget content) Modifier la langue de votre widget Personnalisation des cartes d’en-tête et de corps du widget Modifier le comportement du widget sur votre site

Utiliser un lien texte ou un bouton pour ouvrir le widget

Les instructions ci-dessous concernent uniquement les ordinateurs de bureau et les ordinateurs portables.

Vous pouvez lancer votre widget de chat tawk.to depuis n’importe quel lien texte, image ou bouton de votre site web.

Tout d’abord, récupérez le code de votre widget

Suivez ces étapes :


1. Connectez-vous à votre compte tawk.to.

2. Sélectionnez la propriété correcte.

3. Cliquez sur Administration dans le menu supérieur.

4. Cliquez sur Widget de discussion sous Canaux dans le menu de gauche.

5. Copiez le code du widget et collez-le juste avant la balise de fermeture </body> de votre site.

6. Actualisez votre page pour vous assurer que le widget se charge correctement.

Ajouter un bouton ou un lien texte

Ajoutez un bouton, une image ou un texte sur lequel les visiteurs peuvent cliquer pour ouvrir le chat :


Pour les liens texte :

Pour les images :

Lorsque les visiteurs cliquent sur ce lien, cela exécute Tawk_API.toggle() et ouvre le widget de chat.

Masquer le widget au chargement de la page

Pour que le widget apparaisse uniquement lorsqu’il est cliqué :


1. Allez dans vos paramètres du Chat Widget.

2. Sous Comportement du widget, allez dans Paramètres de visibilité et activez Masquer le widget au chargement sur ordinateur.

Vos modifications sont enregistrées immédiatement. Désormais, le chat n’apparaît qu’après que le visiteur clique sur votre bouton ou votre lien.

Afficher des images ou du texte personnalisés selon le statut (Optionnel)

Maintenant que vous avez ajouté des liens texte ou image pour ouvrir votre widget, vous pouvez afficher différents boutons ou images selon que les agents sont en ligne ou hors ligne.


Tout d’abord, ajoutez un espace réservé <div> spécifique dans votre HTML, à l’endroit où vous souhaitez que le bouton ou le texte s’affiche. Vous n’avez rien à ajouter à l’intérieur du div — copiez simplement le code suivant exactement :

Ensuite, ajoutez et modifiez le code suivant, puis placez-le juste avant la balise </body> :

Cela vous permet d’offrir aux visiteurs une expérience plus personnalisée en fonction de la disponibilité de votre équipe.

Considérations supplémentaires

Cette configuration fonctionne mieux sur les navigateurs de bureau ou le tableau de bord web de tawk.to. Elle n’est pas prise en charge dans l’application mobile.


Assurez-vous que Tawk_API est entièrement chargé avant d’appeler Tawk_API.toggle(). Si nécessaire, encapsulez la fonction dans un gestionnaire onLoad pour éviter les erreurs.

Si vous avez des retours sur cet article, ou si vous avez besoin d’aide supplémentaire :


Cet article a-t-il été utile ?

186 sur 286 ont aimé cet article