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 utilisezabsolute, assurez-vous que le parent cible aitposition: 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.