Comment définir la position d’un élément visuel personnalisé (attention grabber)

Vous pouvez importer votre logo ou une autre image personnalisée en tant qu’élément visuel (attention grabber) pour indiquer aux visiteurs de votre site qu’un agent est disponible et prêt à discuter via votre widget.

Comme les éléments visuels personnalisés varient en taille et en forme, nous avons mis en place un moyen de définir précisément leur position.

Suivez les étapes d’une des deux méthodes ci-dessous. Vous pouvez soit faire glisser manuellement l’élément visuel à l’endroit souhaité, soit utiliser l’API JavaScript pour un placement plus précis.

REMARQUE : Les instructions ci-dessous ne peuvent être suivies que depuis un navigateur ou les applications de bureau de tawk.to. Elles ne sont pas réalisables dans l’application mobile tawk.to.

Si vous gérez plusieurs propriétés, vérifiez que vous consultez la bonne en survolant l’icône en forme de hamburger dans le coin supérieur droit du tableau de bord.

Rendez-vous dans ⚙️Administration ➞ Canaux ➞ Widget de discussion

Sous Apparence du widget, cliquez sur Avancé.

Ensuite, activez l’interrupteur Capteur d'attention (Attention Grabber) en le faisant glisser vers la position activée (verte).

Une fois Capteur d'attention activé, cliquez sur le bouton Galerie.

En bas à gauche de la Galerie, sélectionnez Télécharger.

Importez votre image. Elle s’affichera dans l’aperçu du widget bureau, situé à droite du panneau Apparence du widget.

Ensuite, faites glisser l’image dans la zone d’aperçu pour modifier sa position sur la page. Vous pouvez la placer à côté du widget ou par-dessus.

Une fois l’image positionnée comme vous le souhaitez, cliquez sur Enregistrer pour valider les modifications. Votre widget de chat se mettra automatiquement à jour après l’enregistrement. Il n’est pas nécessaire de modifier le code du widget dans le HTML de votre page.

Vous pouvez également définir la position de votre élément visuel personnalisé en utilisant l’objet customStyle dans l’API JavaScript.

Ajoutez le code ci-dessous à votre code de widget existant.

Remarque : N’intégrez pas cet objet dans une fonction, car ses valeurs doivent être disponibles avant que le script du widget ne soit chargé. Modifier ces valeurs après le chargement du script n’aura aucun effet sur le style du widget.

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

• Cliquez sur l’icône verte du chat en direct
• Planifiez un appel avec nous
• Visitez notre communauté