Integrate a schedule to your website using Calendly

Use Calendly to schedule meetings right from your Webflow site.

Calendly has the capability to connect with 6 of your calendars to automatically verify availability, facilitating connections with your top contacts, leads, and customers.

In this tutorial:

  1. Replicate Calendly link
  2. Integrate Calendly in your layout
  3. Reproduce popup widget code
  4. Popup content

Replicate Calendly link

If you have not yet created one, go ahead and register for a Calendly account. This is important for two main reasons:

  1. Enables synchronization with your calendar account (e.g. Google Calendar)
  2. Facilitates coordination of appointments scheduled 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 the account setup is complete, navigate to Home in the Calendly menu, and select Copy Link for the specific event you wish to schedule from the Event Types section. Initially, Calendly provides us with 3 choices (additional can be created if required):

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

Proceed by pasting the copied link into your Webflow project. Various linking options are available, but for this instance, we will utilize a button. You can insert a button onto your page through the Add panel (A) located in the Elements tab under the Basic section. Subsequently, input the copied link into the button settings accessed once the button is added to the canvas. Further understanding link adjustments can be found.

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.

Integrate Calendly in your layout

This stage involves acquiring the code snippet for Inline Embed. While in Calendly on the Home page, select the share button associated with the desired Event Type. Subsequently, choose 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.

Opt for the Inline Embed choice, proceed by selecting Continue, then click Copy Code.

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.

Subsequently, the copied code can be pasted in a custom code embed element within Webflow. To incorporate an Embed element, utilize quick find (CMD/CTRL+E) and search for “embed” or drag an Embed element from the Add panel. Paste the code and select the Save & Close option. More details regarding custom code embed are available.

Reproduce popup widget code

This phase involves obtaining the code snippet for the popup widget. On the Calendly homepage, click the gear icon linked to the desired Event Type. Proceed by selecting the Add to Website dropdown menu and opt for the Popup Widget. Select Continue and click the Copy Code button.

Place the copied code in the page settings where you want the popup widget to be displayed. Within the Designer, access the page settings, input 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 content

This stage involves acquiring the code snippet for Popup Text. On the Calendly homepage, select the gear icon related to the desired Event Type. Choose the Add to Website dropdown menu and select the Popup Text option. Click Continue followed by 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.

Return to your Webflow project. Utilizing the left side toolbar, click the addition symbol. Within Components, drag an Embed element into your design for the Calendly link placement. Proceed by pasting the code, then finalize by selecting 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: Text styling modifications applied to the parent element of our HTML embed (can be any div block, section, or container as a parent element) will reflect on the text style of the HTML embed.

Ewan Mak
Latest posts by Ewan Mak (see all)