Adding Calendly to Webflow is a great way to streamline your scheduling process and make it easier for clients or customers to book appointments with you. In this tutorial, we will walk you through the step-by-step process of adding Calendly to your Webflow website.
Step 1: Sign Up for Calendly
The first step is to sign up for a Calendly account if you haven’t already. Go to the Calendly website and click on the “Sign Up” button.
Fill in your details and choose a plan that suits your needs. Once you’ve signed up, you’ll be directed to your Calendly dashboard.
Step 2: Create Your Event Type
In the Calendly dashboard, click on the “Event Types” tab and then click on the “Create Event Type” button. Give your event type a name, choose the duration of the event, and set any other preferences such as location or description. You can also customize the availability of your event type by choosing specific dates and times or setting up recurring availability.
Step 3: Customize Your Scheduling Page
Once you’ve created your event type, it’s time to customize your scheduling page. Click on the “Scheduling Page” tab in the Calendly dashboard and then click on the “Edit” button next to your event type. Here, you can customize various elements such as colors, logo, and messaging to match your branding.
Step 4: Embed Calendly in Webflow
Now that you’ve customized your scheduling page, it’s time to embed it into your Webflow website. Open up your Webflow project and navigate to the page where you want to add Calendly.
Option 1: Embed Code Element
If you want more control over the placement of Calendly on your page, you can use the Embed Code element. Drag and drop an Embed Code element onto your page where you want Calendly to appear.
In the settings for the Embed Code element, click on the “Open in Editor” button. This will open a code editor where you can paste your Calendly embed code.
To get the embed code, go back to your Calendly dashboard and click on the “Share” button next to your event type. Copy the embed code and paste it into the Webflow code editor.
Option 2: HTML Embed
If you prefer a simpler method, you can use an HTML Embed element. Drag and drop an HTML Embed element onto your page where you want Calendly to appear.
In the settings for the HTML Embed element, click on “Edit Custom Code” and then paste your Calendly embed code into the text box. Click on “Save” to apply the changes.
Step 5: Publish Your Webflow Website
After adding Calendly to your Webflow website, it’s important to publish your changes so that visitors can see and interact with it. Click on the “Publish” button in the top-right corner of your Webflow project dashboard.
- Clicking on ‘Publish’ will open a popup where you can choose a domain or subdomain for your website.
- Select an option that suits your needs and click on ‘Publish’ once again.
- Your website will now be live with Calendly embedded.
Conclusion
Adding Calendly to Webflow is a simple process that can greatly enhance your scheduling capabilities. By following these steps, you’ll be able to seamlessly integrate Calendly into your Webflow website and provide an easy way for clients or customers to book appointments with you.
Remember to customize your scheduling page and publish your changes to make it live on your website. Happy scheduling!