Calendly : Comment intégrer une fenêtre contextuelle de planification ou un calendrier intégré dans votre site Web ou votre site WordPress

Widget de planification calendaire

Il y a quelques semaines, j'étais sur un site et j'ai remarqué quand j'ai cliqué sur un lien pour prendre rendez-vous avec eux que je n'étais pas amené vers un site de destination, il y avait un widget qui publiait le Calendly planificateur directement dans une fenêtre contextuelle. C'est un excellent outil… garder quelqu'un sur votre site est une bien meilleure expérience que de le rediriger vers une page externe.

Qu'est-ce que Calendly ?

Calendly s'intègre directement à votre Espace de travail Google ou un autre système de calendrier pour créer des formulaires de planification à la fois beaux et faciles à utiliser. Mieux encore, vous pouvez même limiter le temps pendant lequel vous laissez quelqu'un se connecter avec vous sur votre calendrier. Par exemple, je n'ai souvent que quelques heures disponibles certains jours spécifiques pour des réunions externes.

L'utilisation d'un planificateur comme celui-ci est également une bien meilleure expérience que de simplement remplir un formulaire. Pour mon cabinet de conseil en transformation numérique, nous organisons des événements de vente de groupe où l'équipe de direction participe à la réunion. Nous intégrons également notre plate-forme de réunion Web à Calendly afin que les invitations de calendrier incluent tous les liens de réunion en ligne.

Calendly a lancé un script de widget et une feuille de style qui permettent d'intégrer le formulaire de planification directement dans une page, ouvert à partir d'un bouton ou même d'un bouton flottant dans le pied de page de votre site. Le script de Calendly est bien écrit, mais la documentation pour l'intégrer à votre site n'est pas bonne du tout. En fait, je suis surpris que Calendly n'ait pas encore publié ses propres plugins ou applications pour différentes plates-formes.

C'est incroyablement utile. Que vous soyez dans des services à domicile et que vous souhaitiez fournir un moyen à vos clients de planifier leur rendez-vous, un promeneur de chiens, une entreprise SaaS qui souhaite que les visiteurs programment une démonstration ou une grande entreprise avec plusieurs membres, vous devez planifier facilement… Calendly et les widgets intégrés sont un excellent outil en libre-service.

Comment intégrer Calendly dans votre site

Curieusement, vous ne trouverez des instructions sur ces intégrations qu'au Type d'événement niveau et non le niveau réel de l'événement dans votre compte Calendly. Vous trouverez le code dans la liste déroulante pour les paramètres du type d'événement en haut à droite.

calendly intégrer

Une fois que vous avez cliqué dessus, vous verrez les options pour les types d'intégrations :

incorporer du texte contextuel

Si vous récupérez le code et l'intégrez où vous le souhaitez sur votre site, il y a quelques problèmes.

  • Si vous voulez appeler quelques widgets différents sur une même page… peut-être avoir un bouton qui lance le planificateur (Popup Text) ainsi que le bouton de pied de page (Popup Widget)… vous allez ajouter la feuille de style et le script quelques de fois. C'est inutile.
  • L'appel d'un script externe et d'un fichier de feuille de style en ligne dans votre site n'est pas le moyen le plus optimal d'ajouter le service à votre site.

Ma recommandation serait de charger la feuille de style et le Javascript dans votre en-tête… puis d'utiliser les autres widgets là où ils ont du sens sur votre site.

Comment fonctionnent les widgets de Calendly

Calendly a deux fichiers qui sont nécessaires pour intégrer dans votre site, une feuille de style et javascript. Si vous comptez les insérer dans votre site, j'ajouterais ce qui suit dans la section head de votre code HTML :

<link href="https://calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://calendly.com/assets/external/widget.js" type="text/javascript"></script>

Cependant, si vous utilisez WordPress, la meilleure pratique serait d'utiliser votre functions.php fichier pour insérer les scripts en utilisant les meilleures pratiques de WordPress. Donc, dans mon thème enfant, j'ai les lignes de code suivantes pour charger la feuille de style et le script :

wp_enqueue_script('calendly-script', '//assets.calendly.com/assets/external/widget.js', array(), null, true);
wp_enqueue_style('calendly-style', '//assets.calendly.com/assets/external/widget.css' );

Cela va les charger (et les mettre en cache) sur mon site. Maintenant, je peux utiliser les widgets où je le souhaite.

Bouton de pied de page de Calendly

Je souhaite appeler l'événement spécifique plutôt que le type d'événement sur mon site, je charge donc le script suivant dans mon pied de page :

<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/highbridge-team/sales', text: 'Schedule a Consultation', color: '#0069ff', textColor: '#ffffff', branding: false }); }</script>

Vous verrez le Calendly le script se décompose comme suit :

  • URL – l'événement exact que je veux charger dans mon widget.
  • Texte – le texte que je veux que le bouton ait.
  • Couleur – la couleur de fond du bouton.
  • textCouleur - la couleur du texte.
  • l'image de marque – suppression de la marque Calendly.

Popup de texte de Calendly

Je veux également que cela soit disponible sur tout mon site à l'aide d'un lien ou d'un bouton. Pour ce faire, vous utilisez un événement onClick dans votre Calendly texte d'ancrage. Le mien a des classes supplémentaires pour l'afficher sous forme de bouton (non visible dans l'exemple ci-dessous) :

<a href="#" onclick="Calendly.initPopupWidget({url: 'https://calendly.com/highbridge-team/sales'});return false;">Schedule time with us</a>

Ce message peut être utilisé pour avoir plusieurs offres sur une seule page. Peut-être avez-vous 3 types d'événements que vous aimeriez intégrer… modifiez simplement l'URL de la destination appropriée et cela fonctionnera.

Popup d'intégration en ligne de Calendly

L'intégration en ligne est un peu différente en ce sens qu'elle utilise un div spécifiquement appelé par classe et destination.

<div class="calendly-inline-widget" data-url="https://calendly.com/highbridge-team/sales" style="min-width:320px;height:630px;"></div>

Encore une fois, c'est utile car vous pouvez avoir plusieurs div avec chacun Calendly planificateur dans la même page.

Note latérale : je souhaite que Calendly modifie la façon dont cela a été mis en œuvre afin que cela n'ait pas à être si technique. Ce serait formidable si vous pouviez simplement avoir une classe et ensuite utiliser la destination href pour charger le widget. Cela nécessiterait moins de codage direct entre les systèmes de gestion de contenu. Mais… c'est un excellent outil (pour l'instant !). Par exemple, un plugin WordPress avec des codes courts serait idéal pour un environnement WordPress. Si ça t'intéresse, Calendly… Je pourrais facilement te construire ça !

Démarrer avec Calendly

Avis de non-responsabilité : je suis un utilisateur de Calendly et également un affilié de leur système. Cet article a des liens d'affiliation tout au long de l'article.