Calendly Block

Calendly is a popular tool for easy and efficient scheduling, useful if you want your site visitors to book a specific time slot in your calendar for online and offline meetings directly on your site. It integrates with your personal calendar so you can avoid missing or double-booking appointments.

Calendly offers both free and paid versions and you can use either on your site depending on the features you need.

This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans. If your site has one of our legacy plans, it is available on the Pro plan.

In this guide

1. Before You Get Started
2. Add a Calendly Block
3. Embed Your Calendly Link
4. Customize the Calendly Block
   1. Change the Type of Calendly Embed
   2. Adjust the Position of the Calendly Block on the Page
   3. Change the Look and Feel of the Calendly Embed

Before You Get Started

In order to use the Calendly block, you will need a Calendly account. If you don’t already have one, sign up here.

Add a Calendly Block

You can add the Calendly block to any page or post on your WordPress.com site. Click on the + Block Inserter icon and search for Calendly.

Alternatively, you can type /calendly on a new line and press enter.

Embed Your Calendly Link

After adding the block, you’ll see a box for your Calendly link. Here’s how to get the link:

1. Log in to your Calendly account.
2. Click on the blue button in the top right corner to go to My account.
3. On your events page that opens, click on the Copy link button at the bottom left of the event you’d like to embed on your site:

4. Back on your site, paste that link in your Calendly block, added as shown above.

Customize the Calendly Block

You can customize different aspects of your Calendly block in two different locations:

• Your Calendly account and
• Your own site.

This is important to note as, depending on what you want to customize, you’ll need to make the changes in either your Calendly account or the block’s settings on your site.

Change the Type of Calendly Embed

Calendly can be displayed on your post or page as a full calendar, button, or popup.

1. As an inline calendar or as a button

• Go to your Calendly account
• Click on the blue Copy link button
• Go to your page or post
• Insert the Calendly block as mentioned above
• Paste the link into the block
• Click Embed.

You can toggle between the two modes – Inline calendar and Button – via the Style options situated both in the block contextual menu at the top:

or in the right-side panel:

2. As a floating button

This section of the guide applies to sites with the WordPress.com Business or Commerce plan. If your site has one of our legacy plans, this feature is available on the Pro plan.

1. Go to your Calendly account
2. Click on the blue Share button
3. Click on the Add to website tab
4. Select Widget popup and click Continue
5. Click on the Copy code button
6. Go to Appearance → Widgets and select any widget area
7. Insert the Custom HTML block
8. Paste the code into the block and click Update in the top right corner.

This will display your floating button on all your pages. If you want it to have the floating button on specific pages only, you can add it to the bottom of your page or post by doing the following:

1. Click on the 3 dots at the top right of your post or page
2. Select the Code editor
3. In your post area, scroll all the way down
4. Add the snippet you picked up from Calendly at the very end of the post or page – after the last line of existing code
5. Go back to the 3 dots and select the Visual editor again
6. Publish or Update your page.

Your floating button should appear at the bottom left corner of your screen, and should scroll with you.

Adjust the Position of the Calendly Block on the Page

To move your Calendly block up or down on your post or page, you can use the arrows situated in the contextual menu at the top of the block:

To align your Calendly block: when adding the Calendly block inline – actually embedded in the page, whether as a full calendar or as a button, you can align them on the page or in the container you’ve added them to.

Note: the position of the floating widget cannot be changed via settings.

Change the Look and Feel of the Calendly Embed

To change the look and feel of the Calendly embed (style, color, shape, size) – whether inline, button or popup:

1. Go to your Calendly account – select the calendar you wish to edit
2. Click on Share, then select Add to website → Embed inline → Continue
3. On your left, you can edit the background color, text color, button, and link color
4. Recopy the code and embed it as shown above.

You can also change the style of the button itself by accessing the color, width, and border options in the settings on your right. These settings are the same as any other Buttons block.