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

Tutoriel
3 min
Publié le Feb 22, 2023
Dernière mise à jour le
Intégrer un calendrier calendly dans Webflow
Résumez cet article avec une IA
Points clés de l'article

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 :

L'équipe
L'équipe
Agence Web

Articles qui devraient vous intéresser

Entrée principale de VivaTech 2026 à Paris avec l’affiche officielle célébrant les 10 ans de l’événement, considéré comme le plus grand salon européen dédié à la technologie et à l’innovation.
Evénements

VivaTech : deux jours au coeur de la tech Européenne

VivaTech : deux jours au coeur de la tech Européenne
Vue générale de la scène de 2036 by Yuri & Neil, réunissant plus de 400 décideurs marketing autour du futur du rôle du CMO à l’ère de l’intelligence artificielle.
Evénements
IA

Retour sur notre participation à 2036, l’événement marketing des CMO par Yuri & Neil

Retour sur notre participation à 2036, l’événement marketing des CMO par Yuri & Neil
Participants networking during flowConf 2026 in Belgrade, a European conference focused on the future of web, Webflow, and AI, inside a modern industrial venue featuring “Future of Web Unpacked” banners.
Evénements

L’édition 2026 de la flowConf incarne bien le tournant de l’écosystème Web(flow) européen.

L’édition 2026 de la flowConf incarne bien le tournant de l’écosystème Web(flow) européen.

Transformez votre site web en un moteur de croissance.

Nous contacter