How to Add Your Calendly Scheduling Tool to Your Website

Learn how to add Calendly to your website.

Calendly is a tool that simplifies scheduling by helping you find available meeting times.

Once you have set up your Calendly account, you can add it to your website. In this article, we will discuss the three most common methods for sharing your Calendly link on your website.

In this article, we will cover the three most common ways to share your Calendly link to your website.

1. How to Add a Calendly Button to Your Website: Add a button section to your website that links to your Calendly scheduling tool:

   

2. How to Add a Calendly Link to Your Website: Add a link to your Calendly scheduling tool:

   

3. How to Embed Your Calendly Scheduling Tool Directly to Your Website: Embed your Calendly scheduling tool directly onto one of your website pages:

   

    

---

How to Add a Calendly Button to Your Website

After creating your Calendly account, follow these steps to add your Calendly link to a button on your website:

1. Log in to your Calendly account.

2. In the Event Types tab, select Share on the event you want to share on your website.

3. Under the Share a Link tab, click Copy Link:

   

4. In your FMG admin, navigate to the page where you want to add a button and click "+ Add Section."

   

    

5. In the "Text" category, select the "Button" section, and click "Add Section":

   

    

6. Click the button to edit the button label and link.

   

7. Customize the button by entering the text you want to appear on your button and selecting where the button will link to from the drop-down menu.

   

    

   1. Button Label: Enter the text that you want to appear on your button here.

   2. Button Destination: Use this drop-down menu to select where the button will link to. Choose External URL.

   3. External URL: Enter your Calendly link here.

   4. Open link in a new window or tab: check this box if you would like the link to open in a new window or tab.

   Click Save to continue.

8. Lastly, make sure to preview your website to make sure your link is working.

For more information on Adding and Editing a Button section, click here.

---

How to Add a Calendly Link to Your Website

After you create your Calendly account, you can then add your Calendly link to your FMG Suite website.

To begin, log into your Calendly account.

1. From your Calendly home page, select Event Types.

2. Click Share on the event you want to share. 

3. Under the Share a Link tab, click Copy Link:

   

4. Now that you have your Calendly share link copied, you can now add the link to your website.

In your FMG Suite admin, navigate to the page and section that you would like to add your link to. You can add a new text section to a page or add your link to an existing text section.

Highlight the text you want to apply your link to, and then click the "Insert/Edit Link" icon:

Here is an overview of the Insert Link modal:

1. URL: Enter the URL that you would like to apply to the highlighted text. (For example https://calendly.com/username)

2. Text to display: This will be auto-populated by the text you highlighted. Go ahead and make changes to this, if you'd like!

3. Title: The text you enter here will appear when visitors hover over your link. This is an optional field.

4. Target: "None" will open the link in the same window. You can select "New Window" to open the link in a new tab.

Once you insert your URL click "Ok" to continue. Click "Publish" in the top right corner of your screen to send your changes to compliance!*

*Note, make sure to preview your website to make sure your link is working!

If you need to edit your link, simply highlight the link and click the "Insert/Edit Link" icon again. You will see the content you previously entered here, available to edit.

---

How to Embed Your Calendly Scheduling Tool Directly to Your Website

Adding the Calendly "Inline Embed" HTML code to one of your pages allows someone to easily see your schedule and book a time to meet with you!

After you create your Calendly account, you will need the "Inline Embed" HTML code to add to your FMG Suite website.

To begin, log into your Calendly account.

1. Select Event Types located on the left side of your Calendly home page. 

2. Choose the event type you want to embed, and select Share. Then select the Add to Website tab. 

3. Here you will see three options for adding your link to your website: Inline Embed, Popup Widget, and Popup Text. Click Inline Embed, then Continue:

   

4. Next, click Copy Code in the bottom right corner:

   

• Booking Page Settings: 
  • Hide Event Type Details: Select this option to hide your profile picture, name, event duration, location, and description. Then click Copy Code.
  • Hide Cookie Banner: Select this option to hide Calendly's request for cookie consent. Then click Copy Code.

Now that you have the HTML code copied, it's time to log into your FMG Suite admin and add the HTML code to one of your pages!

To embed your code on a page on your site, click "Add Section" on a new or existing page:

Next, navigate to "Widgets," then select the "HTML Code". Then click "Add section" to add the HTML code widget to your page:

Simply paste your code into the section and — voila! — you're Calendly schedule is now embedded directly onto your page! Don't forget to select "Publish" to send this edit to compliance for approval.