Comment contrôler la disposition et la taille de votre intégration
Mis à jour 20 mars 20261 min de lecture
- Disponible pour:
- Tous les utilisateursLes rôles déterminent les paramètres de compte et d'équipe qu'une personne peut gérer. Votre rôle peut varier selon l'organisation, l'équipe ou le groupe.
- Forfaits:
- Free, Essentials, Professional, Standard, Teams avec l'extension SSO, and EnterpriseL'accès aux fonctionnalités peut varier selon votre forfait, la date de création de votre compte et les extensions éventuelles.
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
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
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
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
Cet article vous a-t-il été utile ?
Faites-le nous savoir pour que nous puissions améliorer notre contenu.