Intégrez Calendly à votre site Shopify afin que les visiteurs puissent prendre rendez-vous avec vous sans quitter votre boutique en ligne. Shopify prend en charge les intégrations en ligne, le texte de pop-up et les widgets contextuels.
Ce guide montre comment ajouter chaque type d'intégration et résoudre les problèmes d'affichage courants.
Avant de commencer
Tout d'abord, générez votre code d'intégration Calendly. Vous pouvez intégrer :
- Un type d'événement spécifique ou
- Votre page de réservation
Types d'intégration pris en charge dans Shopify
Shopify prend en charge trois options d'intégration de Calendly :
- Intégration en ligne – Affiche votre calendrier directement sur une page
- Lien de pop-up - Un lien texte qui ouvre votre calendrier dans une fenêtre contextuelle
- Widget de pop-up - Un bouton flottant qui ouvre votre calendrier sur n'importe quelle page
Ajouter un texte intégré en ligne ou un texte de pop-up
Pour intégrer Calendly à une page Shopify spécifique :
- Dans l'administrateur Shopify, allez dans Boutique en ligne > Personnaliser
- Dans le menu de gauche, sélectionnez Ajouter une section
- Choisissez Custom Liquid
- Sur la droite, collez votre code d'intégration Calendly dans la zone de texte
- Sélectionnez Enregistrer
Cela fonctionne autant pour les codes d'intégration en ligne que les codes de texte de pop-up.
Affichez un widget de pop-up sur l'ensemble de votre site
Pour afficher un bouton Calendly flottant sur chaque page :
- Dans l'administration Shopify, allez dans Boutique en ligne > Thèmes
- Trouvez votre thème et sélectionnez le bouton ...
- Sélectionnez Modifier le code
- Dans le menu de gauche, choisissez theme.liquid
- Trouvez la balise <head>
- Ajoutez un saut de ligne juste après
- Collez votre code de widget de pop-up Calendly
- Sélectionnez Enregistrer
Pour vérifier si cela fonctionne, sélectionnez Aperçu de la boutique.
Résoudre les problèmes d'affichage de 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
- Dans Calendly, copiez le code d'Incorporation en ligne pour votre Type d'événement.
- Dans Shopify, accédez à Boutique en ligne > Thèmes.
- Recherchez votre thème actif et sélectionnez Actions > Modifier le code.
- Choisissez l'une des options suivantes :
- Ajoutez un nouveau bloc HTML personnalisé ou
- Créez un nouveau fichier d'extrait.
- Si vous utilisez un extrait, nommez-le quelque chose de facile à consulter ultérieurement (comme
Calendly). - 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
- Ouvrez le Modèle de page Shopify où vous souhaitez afficher votre intégation Calendly.
- Ajoutez le code suivant au bas du fichier :
(Remplacez
« Calendly »par le nom que vous avez utilisé s'il est différent.) - 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é :
- Augmentez la hauteur de votre code d'intégration :
<div class="calendly-inline-widget" data-url="https://calendly.com/YOUR_EVENT" style="min-width:320px;height:1000px;"> </div> - 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.