Discover how to integrate a Calendly calendar on your Webflow website to make it easier for your users to book appointments.
Calendly is a scheduling tool that is linked to your calendars and that facilitates the booking of appointments for users browsing your site. It is easy to use, intuitive and offers a multitude of features to customize your calendar according to your needs.
In our article, we will introduce the tool and see the different steps to integrate it on your Webflow site.
The features and benefits of Calendly :
Adding Calendly to your website allows you to have a simple and fast solution to get in touch with prospects, customers, candidates, who can see your availability in real time and choose a time slot that suits them without having to exchange e-mails or phone calls.
you can :
- Define hours of availability
- Customize appointment types
- Set up different calendars with different themes and additional options (e.g. questions).
- Manage confirmations and reminders, and much more.
In addition, if a change of appointment is necessary, both parties receive a notification.
Smooth user experience
Allow your users to schedule an appointment with you or your team seamlessly, without leaving the page.
Planning customized to your brand image:
Customize the colors and look of your planning page to match your brand.
Quick execution
Customize and add calendly to your website in minutes.
Create an account or log on to Calendly
You can create a free Calendly account or opt for a paid subscription and benefit from additional features.
Once you have created your account, you can create events, set up availability times and customize your calendar to suit your needs.
How to generate your Calendly Embed?
Here are the steps to follow on the calendly site:
- Click on >myaccount".
- You can find the different events, for example a 20 minutes phone appointment
- Click on > share
- 3 options are available. You must select > Add to website
- Click on > Online embedding (add a planning page to your site)
- Click on continue
- the integration code has been generated
- Copy the Calendly embed code or "Ctrl+C".
If you only want to add the calendar, proceed as follows:
- Online incorporation
- Parameters
- Check > Hide event type details
- A new script is generated
Integrate Calendly with Webflow : Quick and easy guide
Now that you have generated the Calendly embed code, you can integrate it on the desired page of your Webflow site.
Here are the steps to follow:
- Open your website in the Webflow editor
- Create a DIV Block that you can name, for example: calendly-embed
- Add an embedding element or with the command "Ctrl+K" > Embed
- Click on the Embed element to access its settings panel
- Click on the Code tab
- HTML Embed Code Editor opens
- Paste the Calendly integration code or "Ctrl + V".
- Customise the display parameters of the Calendly calendar if necessary
- Save the changes and publish your website to see the Calendly calendar in action and test it!
Customize the look of your calendar
You can change the look of your calendar on the calendly site by customizing colors, messages and texts, as well as availability times, appointment types and confirmations. You can also adapt your calendar in a responsive way on Webflow and add CSS specificities to it by applying the styles of the parameters (for example give it a width, height).
Adding a Calendly calendar to your Webflow website is a great way to make it easier for your customers and prospects to make appointments. Don't wait any longer to test this webflow feature and allow your website visitors to schedule with you or your team.
If you want to follow a video tutorial, you can watch Florian's one on our Youtube channel:
And to go further, discover Thibaut's article :
