Are you looking to embed a Calendly scheduler in your Webflow website? Look no further!
In this tutorial, we’ll guide you through the process of embedding a Calendly scheduler in your Webflow site, allowing your visitors to easily book appointments or meetings with you. Let’s get started!
Step 1: Create a Calendly Account
If you don’t already have a Calendly account, head over to calendly.com and sign up for free. Once you’ve created an account and logged in, you’ll be able to create and manage your event types.
Step 2: Create an Event Type
To embed a Calendly scheduler on your Webflow website, you’ll need to create an event type first. An event type represents the type of appointment or meeting that can be booked through Calendly.
To create an event type, click on the “Event Types” tab in your Calendly dashboard and then click on the “+ New Event Type” button.
Note: Make sure to give your event type a descriptive name that accurately reflects the purpose of the appointment or meeting.
Step 2.1: Set Up Event Details
Once you’ve clicked on “+ New Event Type,” you’ll be redirected to the event setup page. Here, you can define various details about your event type:
- Title: Enter a title for your event type. This will be displayed to your visitors when they book appointments.
- Description: Add a brief description of what the appointment or meeting is about.
This can help your visitors understand the purpose of the event.
- Location: Specify the location of the appointment or meeting, whether it’s a physical address or a virtual meeting link.
- Duration: Set the duration of the event type. This can be as short as 15 minutes or as long as a few hours, depending on your needs.
Step 2.2: Define Availability
Next, you’ll need to define your availability for this event type. Calendly offers various options to customize your availability based on your preferences and scheduling requirements.
Note: It’s recommended to link your Calendly account with your preferred calendar application (such as Google Calendar) to avoid double bookings and keep your availability up to date automatically.3: Customize Your Scheduling Page
To make the booking experience seamless for your visitors, Calendly allows you to customize your scheduling page with your branding and additional instructions. You can add a logo, change colors, and even include custom questions for your visitors to answer during the booking process.
Step 3: Get the Embed Code
Once you’ve set up and customized your event type, it’s time to get the embed code that you’ll use in Webflow.
To get the embed code, go back to your Calendly dashboard and click on the “Share” button next to the event type you want to embed. In the dropdown menu, select “Embed.”
This will open a popup window where you can choose various customization options for how you want your embedded scheduler to look and behave on your Webflow website.
- Inline Embed: Choose whether you want the scheduler to be displayed inline on your page or as a popup overlay.
- Button Text: Customize the text that will be displayed on the button that opens the scheduler.
- Button Theme: Select a theme for the button, such as “Light,” “Dark,” or “Inverted.”
Step 4: Embed in Webflow
Now that you have the embed code, it’s time to integrate it into your Webflow website.
In your Webflow project, open the page where you want to embed the Calendly scheduler. Add an HTML Embed element to the desired location on your page.
Paste the Calendly embed code inside the HTML Embed element. You can do this by clicking on the element and then selecting “Open Code Editor” from the options menu. Paste the code into the editor and save your changes.
Note: Make sure to adjust any styling or positioning of the HTML Embed element to fit seamlessly with your website’s design.
Congratulations!
You’ve successfully embedded a Calendly scheduler in your Webflow website! Now, visitors can easily book appointments or meetings with you directly from your site. Remember to test it out yourself to ensure everything is working as expected.
Note: Calendly offers advanced features and integrations that allow for even more customization and automation. Explore their documentation and settings to further enhance your scheduling workflow!
We hope this tutorial has been helpful! If you have any questions or need further assistance, feel free to reach out to our support team. Happy scheduling!