Personnaliser le placement de votre widget avec JavaScript

Vous pouvez personnaliser l’emplacement exact de votre widget en utilisant customStyle dans l’API de tawk.to, ce qui vous permet de contrôler la position au pixel près, au-delà des six positions d’écran par défaut.


Cela est utile lorsque :

  • Vous souhaitez que le widget n’empiète pas sur un menu ou un pied de page

  • Vous intégrez le widget dans une mise en page ou un design personnalisé

  • Vous voulez définir des positions différentes pour les vues mobile et ordinateur de bureau

Positions disponibles
Vous pouvez configurer le widget pour qu’il apparaisse dans l’une de ces six positions standard
Chaque position peut être ajustée davantage à l’aide des décalages (offsets) et de la rotation.

Utiliser les décalages et la rotation pour ajuster finement le placement du widget

Les décalages (offsets) vous permettent de déplacer légèrement le widget à partir de sa position de base :


  • xOffset : déplace le widget vers la gauche ou la droite

  • yOffset : déplace le widget vers le haut ou vers le bas


Comment fonctionnent les décalages :


  • En bas à droite (br), augmenter le xOffset déplacera votre widget vers la gauche.

  • En bas à gauche (bl), augmenter le xOffset déplacera votre widget vers la droite.

  • En haut à droite (tr), augmenter le yOffset fera descendre votre widget.

  • Aux positions centrales (cl, cr), ajuster le yOffset déplacera votre widget vers le haut ou vers le bas.


Vous pouvez également faire pivoter le widget en utilisant ces valeurs :

La rotation est utile pour les mises en page verticales ou les conceptions créatives.

Exemples de code

Voici un exemple de code indiquant les valeurs acceptées pour la position, le décalage et la rotation :

Voici un exemple de code que vous pouvez copier et coller avant le code du widget dans le HTML de votre site web :
Considérations importantes
  • Définissez toujours customStyle avant le script d’intégration du widget. Sinon, vos modifications ne seront pas prises en compte.

  • Personnalisez la mise en page du widget séparément pour l’ordinateur de bureau et le mobile afin de vous assurer qu’il ne perturbe pas la disposition de votre site. Testez sur différentes tailles d’écran pour vérifier que tout s’affiche correctement.

  • Il n’est pas nécessaire de modifier les paramètres du Tableau de bord, car les paramètres définis dans le code les remplacent.


Consultez les autres guides de l’API JavaScript pour découvrir d’autres façons de modifier le comportement et l’apparence du widget.


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


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

221 sur 324 ont aimé cet article