Dépannage des intégrations de Calendly

Si votre intégration Calendly ne fonctionne pas comme prévu, ce guide peut vous aider. Vous trouverez ci-dessous des problèmes courants et comment les résoudre.

Résoudre les problèmes de défilement et de chargement d'images

Si votre page ne défile pas ou si les images ne se chargent pas, cela peut être dû à un conflit entre les styles d'intégration de Calendly et la présentation de votre site Web.

Essayez cette correction CSS :

body {
overflow: unset ! important;
}

Utilisez Squarespace ?
Ajoutez également :

.site-wrapper {
height: auto;
}

Ces modifications permettent à votre page de défiler normalement et d'éviter les conflits de mise en page, en particulier si votre modèle de site outrepasse les paramètres de hauteur de Calendly.

Empêcher les bloqueurs de publicités de masquer les intégrations

Les extensions de navigateur peuvent bloquer les intégrations de Calendly. Pour aider les visiteurs :

  • Affichez un message comme :
    « Veuillez désactiver votre bloqueur de publicité pour afficher ce calendrier. »
  • Ajoutez un bouton de secours qui ouvre la page de planification dans un nouvel onglet.

Corriger les menus déroulants sur mobile

Des menus déroulants dans les intégrations peuvent s'ouvrir hors écran sur les appareils mobiles. Essayez ces correctifs :

  • Utilisez une hauteur d'intégration plus courte
  • Remplacez les listes déroulantes par des boutons radio (pour des listes courtes)
  • Optez pour une intégration pop-up, qui convient mieux à un appareil mobile

Adaptez la mise en page en fonction de la largeur du conteneur

La présentation de Calendly répond à la largeur de son conteneur.

  • Pour afficher la présentation côte à côte : définissez une largeur de 1000 px ou plus
  • Pour passer à une mise en page superposée : réduisez la largeur à moins de 650 px

Découvrez comment contrôler la mise en page et la taille de l'intégration

Centrez votre intégration sur mobile

Si votre intégration semble mal centrée sur mobile :

  • Assurez-vous que le conteneur a au moins 320 px de large
  • Supprimez les espaces ou les marges supplémentaires autour de l'intégration

Corrigez les éléments intégrés apparaissant au bas de la page

Si vous utilisez HubSpot, Marketo ou des outils similaires et que votre intégration apparaît au mauvais endroit, vérifiez que cette feuille de style est incluse :

<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">

Sans cela, les styles peuvent s'avérer inefficaces et pousser l'intégration vers le bas.

L'intégration ne fonctionne pas après avoir modifié votre lien Calendly

Vous voyez une erreur « calendly.com a refusé de se connecter » ? Votre intégration peut utiliser un lien ancien ou incorrect. Corrigez le problème en :

  • Générer un nouveau code d'intégration dans Calendly
  • Remplacer l'ancien code sur votre site

Ou inspectez le lien à l'aide de ⌥⌘I (Mac) ou cliquez avec le bouton droit de la souris > Inspecter, puis mettez-le à jour manuellement.

Supprimez les barres de défilement en trop

Consultez ce guide  : supprimez le défilement de l'intégration.

Astuce : utilisez « Inspecter » dans votre navigateur pour tester différentes hauteurs d'intégration.

Problèmes spécifiques à l'outil de création de site Web

Si vous avez des problèmes avec des outils de création de sites Web spécifiques, veuillez consulter nos ressources liées.

  • Squarespace – L'intégration n'apparaît pas dans l'éditeur
  • Shopify – Le bouton de fermeture du pop-up n'apparaît pas
  • Wordpress – L'intégration ne fonctionne pas dans Elementor

Besoin d'aide ? On s'occupe de tout pour vous ! 

Chaque abonnement payant comprend l'assistance standard de Calendly. Cependant, seuls les propriétaires et les administrateurs autorisés de votre entreprise peuvent faire certaines demandes de compte. Identifiez-vous sur Calendly et accédez à la section d'aide où vous pouvez :