Comment contrôler la disposition et la taille de votre intégration

Calendly ajuste la disposition du calendrier pour s'adapter à la taille de son conteneur. Vous pouvez modifier la disposition et la taille pour mieux l'adapter à votre site Web ou à votre application.

Choisir une disposition en fonction de la largeur

L'intégration en ligne de Calendly dispose de trois styles de disposition. Le style dépend de la largeur du conteneur (appelé « conteneur parent »).

Grande disposition de fenêtre

Largeur de l'élément parent >= 1100px

Wide inline embed.png

Exemple

<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:1100px;height:700px;"></div>

Mise en page de fenêtre moyenne

Largeur de l'élément parent < 1100px et >= 650px

Medium inline embed.png

Exemple

<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:700px;height:700px;"></div>

Petite disposition de fenêtre

Largeur de l'élément parent < 650 px

Small inline embed.png

Exemple

<div class="calendly-inline-widget"
data-url="https://calendly.com/YOUR_LINK"
style="width:600px;height:700px;"></div>

Supprimer les barres de défilement

Si vous voyez une barre de défilement à l'intérieur de l'intégration :

  • Augmentez la hauteur dans le code d'intégration style="min-width:320px;height:750px;"
  • Utilisez data-resize="true" pour activer le redimensionnement automatique

Exemple :

<div 
class="calendly-inline-widget"
data-url="https://calendly.com/your-link"
style="min-width:320px; height:750px;"
data-resize="true">
</div>
<script
type="text/javascript"
src="https://assets.calendly.com/assets/external/widget.js"
async>
</script>

Largeur minimale pour mobile

Calendly a besoin d'au moins 320px de large pour s'afficher correctement sur mobile.

Si l'intégration semble décentrée ou incomplète :

  • Vérifiez s'il y a des marges ou des espacements supplémentaires sur mobile.
  • Assurez-vous que le conteneur a au moins 320 px de large.

Testez la disposition de votre intégration

Après avoir ajouté l'intégration :

  • Vérifiez la disposition sur ordinateur et mobile
  • Utilisez l'outil d'examen de votre navigateur pour prévisualiser différentes tailles
  • Ajustez la taille ou les marges du bloc selon les besoins