Fermer

décembre 13, 2021

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


Il y a quelques semaines, j'étais sur un site et j'ai remarqué lorsque 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 Google Workspace 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 pour des réunions externes.

L'utilisation d'un tel planificateur est également une bien meilleure expérience que de simplement remplir un formulaire. Pour mon société de conseil en transformation numériquenous organisons des événements de vente de groupe où l'équipe de direction est en 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 d'intégration sont un excellent outil en libre-service.

Comment intégrer Calendly dans votre site

Étrangement, vous ne trouverez des instructions sur ces intégrations qu'au niveau Type d'événement niveau réel de l'événement au sein de 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 embed

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

intégrer le 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 souhaitez appeler plusieurs personnes différentes. widgets sur une seule 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 plusieurs fois. Ce n'est pas nécessaire.
  • L'appel d'un script externe et d'un fichier de feuille de style en ligne sur 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 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 du javascript. Si vous comptez les insérer dans votre site, j'ajouterais ce qui suit dans la section head de votre code HTML :

 

Cependant, si vous êtes dans WordPress, la meilleure pratique serait d'utiliser vos fonctions .php 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 tout 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 :

 

Vous verrez que le scriptCalendly 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.
  • Color – la couleur d'arrière-plan du bouton.
  • textColor – la couleur du texte.[19659016]branding – suppression de la marque Calendly.

Calendly's Text Popup

Je souhaite é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 texte d'ancrageCalendly. Le mien a des classes supplémentaires pour l'afficher sous forme de bouton (non visible dans l'exemple ci-dessous) :

Planifier du temps avec nous

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. qui est spécifiquement appelé par classe et destination.

Encore une fois, cela est utile car vous pouvez avoir plusieurs div avec chaque planificateurCalendly dans la même page.

Side note : je souhaite que Calendly modifie la façon dont cela a été mis en œuvre afin que cela ne soit pas 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 vous êtes intéressé, Calendly… Je pourrais facilement le créer pour vous ! Cet article a des liens d'affiliation tout au long de l'article.




Source link