Badge Webflow Award Winner 2023

Comment intégrer facilement un calendrier Calendly dans votre site web Webflow ?

Publié le 
22/2/2023
Modifié le 
5/3/2024
Temps de lecture : 5 min
Intégrer un calendrier calendly dans Webflow
Écrit par
Icon digidop

L'équipe Digidop

Agence Web

Découvrez comment intégrer un calendrier Calendly sur votre site web Webflow pour faciliter la prise de rendez-vous de vos utilisateurs.

Points clés à retenir

Calendly est un outil de planification relié à vos agendas et qui facilite la prise de rendez-vous aux utilisateurs parcourant votre site. Il est facile à utiliser, intuitif et offre une multitude de fonctionnalités pour personnaliser votre calendrier en fonction de vos besoins.

Dans notre article, nous allons vous présenter l'outil et voir les différentes étapes pour l'intégrer sur votre site Webflow.

Les fonctionnalités et avantages de Calendly :

L'ajout de Calendly à votre site web vous permet d'avoir une solution simple et rapide pour entrer en contact avec des prospects, des clients, des candidats, qui peuvent voir vos disponibilités en temps réel et choisir un créneau qui leur convient sans avoir à échanger par e-mail ou des appels téléphoniques.

vous pouvez :

  • Définir des heures de disponibilités
  • Personnaliser les types de rendez-vous
  • Configurer des calendriers différents avec des thèmes distincts et des options supplémentaires (par exemple des questions).
  • Gérer les confirmations et les rappels, et bien plus encore.

De plus, si un changement de rendez-vous est nécessaire, les deux interlocuteurs reçoivent une notification.

Expérience utilisateur fluide

Permettez à vos utilisateurs de planifier un rendez-vous avec vous ou votre équipe de manière fluide, sans quitter la page.

Planification personnalisée à votre image de marque :

Personnalisez les couleurs et l'apparence de votre page de planification pour qu'elle soit en cohérence avec votre marque.

Exécution rapide

Personnalisez et ajoutez calendly à votre site Web en quelques minutes.

Créer un compte ou se connecter sur Calendly

Vous pouvez créer un compte Calendly gratuit ou opter pour un abonnement payant et bénéficier de fonctionnalités supplémentaires.

Une fois votre compte créé, vous pouvez créer des événements, définir des heures de disponibilité et personnaliser votre calendrier en fonction de vos besoins.

Comment générer votre Embed Calendly ?

Voici les étapes à suivre sur le site calendly :

  • Cliquez sur >mon compte"
  • On y trouve les différents évènements, par exemple un rendez-vous téléphonique de 20 minutes
  • Cliquez sur > partage
  • 3 options sont proposées. Il faut sélectionner > Ajouter au site web
  • Cliquez sur > Incorporation en ligne (ajouter une page de planification à votre site)
  • Cliquez sur continuer
génerer un embed calendly
  • le code d’intégration a été généré 
  • Copiez le code embed Calendly ou "Ctrl+C"

Si vous souhaitez uniquement ajouter le calendrier, procédez comme suit :

  • Incorporation en ligne
  • Paramètres
  • Cochez > masquer les détails du type d'événement
  • Un nouveau script est généré
génerer un embed calendly

Intégrer Calendly à Webflow : Guide rapide et facile

Maintenant que vous avez généré le code embed Calendly, vous pouvez l'intégrer sur la page souhaitée de votre site Webflow.

Voici les étapes à suivre :

  • Ouvrez votre site Web dans l'éditeur Webflow
  • Créez un DIV Block que vous pouvez nommer, par exemple : calendly-embed
  • Ajoutez un élément d'intégration ou avec la commande "Ctrl+K" > Embed
  • Cliquez sur l'élément d'intégration Embed pour accéder à son panneau de paramètres
  • Cliquez sur l'onglet Code
  • HTML Embed Code Editor s'ouvre
  • Collez le code d'intégration Calendly ou "Ctrl + V"
designer webflow embed code
  • Personnalisez les paramètres d'affichage du calendrier Calendly si nécessaire
  • Enregistrez les modifications et publiez votre site Web pour voir le calendrier Calendly en action et tester !
embed-calendly dans webflow et rendu calendrier

Personnaliser l'apparence de votre calendrier

Vous pouvez modifier l'apparence de votre calendrier sur le site calendly en personnalisant les couleurs, les messages et les textes, ainsi que les heures de disponibilité, les types de rendez-vous et les confirmations. Vous pouvez également adapter votre calendrier de manière responsive sur Webflow et lui ajouter des spécificités CSS en appliquant les styles des paramètres (par exemple lui donner une largeur, hauteur).

Ajouter un calendrier Calendly à votre site internet Webflow est un excellent moyen de faciliter la prise de rendez-vous pour vos clients et prospects. N'attendez plus pour tester cette fonctionnalité webflow et Permettez aux visiteurs du site Web de planifier avec vous ou votre équipe.

Si vous souhaitez suivre un tutoriel vidéo, vous pouvez consulter celui de Florian sur notre chaîne Youtube :

Et pour aller plus loin, découvrez l'article de Thibaut :

projet Flomodia by Digidop
projet Coudac by Digidop
projet Heka by Digidopprojet Flaw by Digidopprojet Morfo by Digidop