Comment ajouter Calendly à un site Shopify

Si votre intégration Calendly n'apparaît pas sur votre site Shopify, suivez ces étapes pour résoudre le problème.

Étape 1 – Confirmez votre code d'intégration et vos paramètres de thème

1. Dans Calendly, copiez le code d'Incorporation en ligne pour votre Type d'événement.
2. Dans Shopify, accédez à Boutique en ligne > Thèmes.
3. Recherchez votre thème actif et sélectionnez Actions > Modifier le code.
4. Choisissez l'une des options suivantes :
• Ajoutez un nouveau bloc HTML personnalisé ou
• Créez un nouveau fichier d'extrait.
5. Si vous utilisez un extrait, nommez-le quelque chose de facile à consulter ultérieurement (comme Calendly).
6. Collez le code Intégration Calendly dans l'extrait ou le bloc HTML et sélectionnez Enregistrer.

Étape 2 – Référez-vous à l'intégration dans votre Modèle de page

1. Ouvrez le Modèle de page Shopify où vous souhaitez afficher votre intégation Calendly.
2. Ajoutez le code suivant au bas du fichier :
   
   
   include 'calendly'
   (Remplacez « Calendly » par le nom que vous avez utilisé s'il est différent.)
3. Enregistrez vos modifications.

Certains thèmes Shopify masquent des éléments HTML vides, ce qui peut empêcher la fermeture du pop-up.

Solution : ajoutez ce code HTML après votre code d'intégration :

<style>
 .calendly-overlay .calendly-popup-close,
 .calendly-overlay .calendly-close-overlay {
  display: block ! important;
 }
</style>

Si votre calendrier semble tronqué :

1. Augmentez la hauteur de votre code d'intégration :

   <div class="calendly-inline-widget"
   data-url="https​:​//calendl​y.com/YOUR​_EVENT"
   style="min-width:320px;height:1000px;">
   </div>

2. Si cela ne résout pas le problème, ajoutez ce CSS à votre thème Shopify :
• Accédez à la boutique en ligne > Modifier le code > Actifs > theme.scss.liquid
• Ajouter ce qui suit en bas :

  iframe {
  height: 100vh ! important;
  }

Cela oblige l'iframe à utiliser toute la hauteur de l'écran.