Position du widget

Vous trouverez ci-dessous un exemple d’extrait de code CSS à ajouter à la balise <head> pour pouvoir déplacer la position du widget sur le site Web.

<style type="text/css">
     /* POUR LE WIDGET HEYDAY  */
     :root {
       --HeydayStartIconHorizontal: 30px; /* Valeur arbitraire, modifiable */
       --HeydayStartIconVertical: 30px;   /* Valeur arbitraire, modifiable */
     }
    
     #HeydayStartIconContainer {
       left: var(--HeydayStartIconHorizontal) !important;
       bottom: var(--HeydayStartIconVertical) !important;
     }
    
     #HeydayStartIconClose {
       left: calc(5px + var(--HeydayStartIconHorizontal)) !important;
       bottom: calc(90px + var(--HeydayStartIconVertical)) !important;
     }
    
     #chatWindow {
       left: calc(20px + var(--HeydayStartIconHorizontal)) !important;
       bottom: calc(20px + var(--HeydayStartIconVertical)) !important;
     }
      /* Fenêtre de chat du widget Heyday plein écran sur les appareils mobiles */
   @media screen and (max-width: 479px) {
     #chatWindow.heyday-chat {
       max-height: unset !important;
       height: 100% !important;
       width: 100% !important;
       right: 0 !important;
       bottom: 0 !important;
     }
</style>

L’extrait de code présenté ci-dessus montre comment positionner le widget dans le coin inférieur gauche de la page.

Les classes et les identifiants mentionnés ci-dessus doivent être conservés afin de référencer le bouton flottant du chat Web et de Messenger.

Modifier la position du widget

Les paramètres suivants peuvent être ajustés au beson:

Propriétés de positionnement:

  • Les propriétés de positionnement sont les suivantes : top, bottom, left, right. Dans l’exemple ci-dessus, nous définissons la position dans le coin inférieur gauche.

Valeurs de positionnement:

  • HeydayStartIconHorizontal,

  • HeydayStartIconVertical

Si elle n’est pas déjà présente dans la balise HTML <head>, la ligne suivante doit être incluse

<meta name="viewport" content="width=device-width, initial-scale=1">

PreviousCookie_ConsentNextApparence du widget

Last updated

Was this helpful?