Add a calendar to your site with Calendly

Use Calendly to schedule meetings right from your Webflow site.

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

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

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.

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. 

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

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.

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. 

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.

‍