How Do You Use Calendly in Webflow?

by

Calendly is a powerful scheduling tool that can be seamlessly integrated into your Webflow website. With Calendly, you can easily schedule meetings and appointments without the hassle of back-and-forth email exchanges. In this tutorial, we will walk you through the process of setting up and using Calendly in Webflow.

Step 1: Sign up for Calendly
First things first, you need to sign up for a Calendly account. Head over to the Calendly website and create your account. Once you’re signed in, you’ll have access to all the features and settings that Calendly has to offer.

Step 2: Create your event types
In order to use Calendly effectively, you need to create event types that define the different types of meetings or appointments you offer. For example, if you offer both 30-minute and 60-minute consultations, you would create two event types – one for each duration.

To create an event type:

  1. Go to your Calendly dashboard.
  2. Click on “Event Types” in the top navigation menu.
  3. Click on the “New Event Type” button.
  4. Give your event type a name and select its duration.
  5. Customize the other settings such as availability, buffer time between events, and any required questions or fields.
  6. Save your event type.

Step 3: Embedding Calendly into Webflow
Now that you have created your event types in Calendly, it’s time to embed them into your Webflow website. There are a few different ways you can do this depending on how and where you want to display your scheduling options.

To embed a scheduling link:

In order to embed a scheduling link on your Webflow site, you’ll need to copy the link provided by Calendly and paste it into your Webflow project.

  1. Go to your Calendly dashboard.
  2. Select the event type that you want to embed.
  3. In the right-hand sidebar, under “Share Event Type”, you’ll find a link labeled “Copy Link”. Click on it to copy the link to your clipboard.
  4. Open your Webflow project in the Designer and navigate to the page where you want to embed the scheduling link.
  5. Drag and drop an Embed element onto your page where you want the scheduling link to appear.
  6. Paste the copied Calendly link into the Embed element’s code section.

To embed a scheduling button:

If you prefer a more visually appealing way of embedding Calendly into your Webflow website, you can use a scheduling button instead of a plain text link. This button will open up a modal window with your available time slots when clicked.

  1. Go to your Calendly dashboard and select an event type.
  2. In the right-hand sidebar, under “Share Event Type”, click on the “Embed” tab.
  3. Choose whether you want a text or image button. You can customize its appearance by selecting different styles, colors, and sizes. You can also add custom text or an image if desired.
  4. Once you’re satisfied with how your button looks, copy the generated code snippet by clicking on “Copy Code”.
  5. In Webflow Designer, drag and drop an Embed element onto your page where you want the scheduling button to appear.
  6. Paste the Calendly code snippet into the Embed element’s code section.

Step 4: Styling your Calendly integration
After embedding Calendly into your Webflow website, you may want to customize its appearance to match your site’s branding and design. Luckily, Calendly provides a range of customization options to help you achieve a seamless integration.

To customize the appearance of your scheduling link:

If you embedded a scheduling link, you can customize its appearance by adding CSS classes or inline styles.

  1. In Webflow Designer, select the Embed element that contains your scheduling link.
  2. Add a CSS class or apply inline styles to modify font color, size, style, and any other properties you wish to change.

To customize the appearance of your scheduling button:

If you embedded a scheduling button, you can customize its appearance using Calendly’s customization options.

  • Scroll down to find the “Button Style” section. Here, you can choose different styles, colors, sizes, and even add custom CSS if needed. The changes you make will be reflected in the code snippet provided below.
  • Copy the updated code snippet by clicking on “Copy Code”.
  • Paste the new code snippet into your Webflow project’s Embed element that contains the scheduling button.

    • Conclusion

    Congratulations! You have successfully integrated Calendly into your Webflow website.

    Now visitors can easily schedule meetings and appointments with you directly from your site without any hassle. Remember to regularly check your Calendly dashboard for new bookings and stay on top of your schedule. Enjoy the seamless scheduling experience that Calendly and Webflow offer!