Passer au contenu principal

Configurer le widget Spotlight

Mis à jour il y a plus de 6 mois

PremiÚre étape : intégrer le widget sur votre page

👉 Suivez ce guide : IntĂ©grer un widget sur une page

Comment fonctionne le positionnement

Dans le code que vous avez intégré, vous trouverez une classe CSS que vous pouvez modifier pour gérer le positionnement :

<style> 
 #join-widget-YOUR_ALIAS {
  position: absolute; 
  top: 10px; 
  right: 0; 
 } 
</style>

Choisir le mode de positionnement

  • position: absolute; → AncrĂ© Ă  l’intĂ©rieur du parent positionnĂ© le plus proche. IdĂ©al pour placer le widget dans une section ou une carte spĂ©cifique.


    👉 Si vous utilisez absolute, assurez-vous que le parent cible ait position: relative;.

  • position: fixed; → AncrĂ© Ă  la fenĂȘtre (reste visible lors du scroll). IdĂ©al pour un bouton flottant.

📍 DĂ©placer le widget

Pour le dĂ©placer, vous n’avez qu’à modifier ces propriĂ©tĂ©s : top / bottom / left / right

#join-widget-YOUR_WIDGET {
 position: absolute; 
 top: 10px; 
 right: 0; 
}

  • Exemple pour coin supĂ©rieur droit :

    top: 0; 
    right: 0;

  • Vous pouvez utiliser des valeurs en px ou en % :

    top: 20px; /* décale de 20px vers le bas */ 
    right: 50px; /* décale de 50px depuis le bord droit */ 
    left: 50%; /* centre horizontalement */

Garder le widget au-dessus des autres éléments (optionnel)

Si un autre Ă©lĂ©ment recouvre le widget, augmentez son ordre d’empilement :

#join-widget-YOUR_WIDGET {
 ... 
z-index: 9999; 
}

👉 La valeur maximale est 2147483647.

Orientation de la bulle (important !)

Dans les paramùtres du widget, vous pouvez inverser l’orientation de la bulle.

  • Si la bulle pointe → vers la droite, placez le widget Ă  gauche de la page :

    left: 0;

  • Si la bulle pointe ← vers la gauche, placez le widget Ă  droite de la page :

    right: 0;

✅ De cette façon, la bulle pointe toujours vers l’intĂ©rieur de la page, et non en dehors de l’écran.

Design

  • Configuration de la taille : ajustez la taille selon desktop vs. mobile.

  • Bordure / Couleur interne / IcĂŽne : personnalisez le style pour l’adapter Ă  votre site.
    💡 Si vous ne dĂ©finissez pas de couleur interne, elle sera transparente.

  • Onglets Cover / Player : choisissez l’image/vidĂ©o de couverture et le comportement du lecteur.

Avez-vous trouvé la réponse à votre question ?