Embed Calendly

Use Calendly to schedule meetings right from your Webflow site.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Transcript
This video features an old UI. Updated version coming soon!

Calendly can link to 6 of your calendars to automatically check availability and help you connect with your best contacts, prospects, and clients.

In this lesson:

  1. Copy Calendly link
  2. Embed Calendly in your design
  3. Copy popup widget code
  4. Popup text

Copy Calendly link

If you don’t already have one, go ahead and sign up for a Calendly account. This is important for two reasons:

  1. Lets us sync our calendar account (i.e. Google Calendar)
  2. It'll synchronize appointments made through Calendly
Sign up page with an email entered to get started. A log in link and language selector link are also on the page.

Once you’ve done that, you’ll click Home in the navigation of Calendly and click Copy Link for whatever event we want to schedule from the Event Types tab. Calendly starts us off with 3 options (we can create more as needed):

  1. 15 Minute Meeting
  2. 30 Minute Meeting
  3. 60 Minute Meeting

Now you’ll paste the copied link into your Webflow project. You can use a number of link options, but for our example, you’ll use a button. You can add a button onto your page from the Add panel (A) within the Elements tab under the Basic section. Next, enter your copied link to the button from the settings window that appears once the button is added to the canvas. Learn more about link settings.

The link settings panel displays a URL input field, check box for Open in new tab, a preload dropdown menu and a show all settings button. The URL entered is highlighted.

Embed Calendly in your design

In this step, you’ll grab the code snippet for Inline Embed. In Calendly on the Home page, click the share button of the Event Type of your choice. Then, click the Add to Website

Step one on the left, share the 30 minute meeting. Step two on the right, add to the website link is highlighted.

Click the Inline Embed option, press Continue and then click the Copy Code button. 

Step one on the left, select the embed inline add option. The embed inline is highlighted. Step two, copy code is on the right. The blue copy code button is highlighted on the right.

Next, we can paste the copied code in a custom code embed element in Webflow. To add an Embed element, just use quick find (CMD/CTRL+E) and type “embed” or drag an Embed element from the Add panel. Then paste the copied code and click the Save & Close button. Learn more about custom code embed.

Copy popup widget code

In this step, you’ll grab the code snippet for the popup widget. On the Calendly homepage, click the cog icon of the Event Type of your choice. Then, click the Add to Website dropdown and choose the Popup Widget. Click Continue and the Copy Code button. 

Now you can paste the copied code in the page settings where you’d like the popup widget to appear. From inside the Designer, open the page settings, enter the code in the Before tag section, save the settings, and publish your project.

Step one on the left select the widget popup button in the Add to website tab. Step two on the right, click the copy code button.
 Step three, paste the code in the before tag input field under the custom code section in the page settings.

Popup text

In this step, you’ll grab the code snippet for Popup Text. On the Calendly homepage, click the cog icon for the Event Type of your choice. Click the Add to Website dropdown and choose the Popup Text option. Click Continue and the Copy Code button. 

Step one on the left, select Text popup under the add to website tab. Step two on the right, click on the copy code button at the bottom right. These two buttons are highlighted.

Head back to your project in Webflow. From the left toolbar, click the plus sign. Under Components, drag an Embed element into your design where you want the Calendly link to appear. Let's paste in the code and click Save & Close.

Step one on the left, select the embed element from the components section in the add panel, step two on the right, paste the code inside of an HTML embed code editor and click save.
Note: We can change the text styling of the parent of our HTML embed (this could be any div block, any section, or container that's a parent element) and it will affect the text styling of the HTML embed.

Clone this project
Try Webflow — it's free
This video features an old UI. Updated version coming soon!