Calendly Block

Jetpack’s Calendly block allows visitors to schedule one-on-one appointments, group events, and team meetings directly from your website.

Requirements

You will need a free Calendly account to use this block. Sign up here for free if you do not have a Calendly account.

Inserting a Calendly Block

You can add the Calendly block by searching and/or selecting it from the Jetpack section of the block selector:

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

See Jetpack Blocks for detailed instructions on adding blocks.

Adding a Calendly Block

To configure the block, you will need to enter your Calendly web address or link for a specific type of event.

Here is how you can get a link from Calendly:

1. Log in to your Calendly account.
2. Click on the blue button in the top right corner to access My account.

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:

Back on your site, paste that link into your Calendly block.

Customizing a Calendly Block

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

1. Your Calendly account and
2. 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.

Changing the Type of Calendly Embed

The Calendly block can be displayed on your post or page as a full calendar, button, or popup. You can also display a floating button for your entire site. You can set the display as follows:

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
   • Go to your Calendly account;
   • Click on the blue Share button;
   • Click on the Add to the website tab;
   • Select the Widget popup and click Continue;
   • Click on the Copy code button;
   • If your site has an Appearance → Editor menu:
     • Go to Appearance → Editor;
     • Scroll down to the bottom of the page, and select the Footer area;
     • Add a Custom HTML block;
     • Paste the Calendly code into the block;
     • Ensure you save your changes.
   • If your site has an Appearance → Widgets menu:
     • Go to Appearance → Widgets and select any widget area;
     • Add a Custom HTML block;
     • Paste the Calendly code into the block;
     • Ensure you save your changes.

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. Add a Custom HTML block to the post or page;
2. Paste the Calendly code into the block;
3. Publish or Update your post or page.

Aligning the Calendly Block

When you display the Calendly block as an Inline calendar or Link, you can align the block on the page.

Changing the Look and Feel of the Calendly Embed

You can customize the button’s appearance when displaying the Calendly block as a Link. You can make the following changes:

• Change the button style: you can display the button filled (where the color will fill the button) or use an outline (with only a colored border around the button)

Change the background and text color: you can specify the background and text color and the border-radius. You can also use a gradient or solid background color.

Most other changes to the look and feel of the Calendly block need to be made via the Calendly website. To do that, follow these steps:

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

You can learn more about the available options using this Calendly documentation.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

Privacy Information

This feature is activated by default. It cannot be deactivated; the Calendly block is always available in the Block Selector.

Data Used
Site Owners / Users None.	Site Visitors None.
Activity Tracked
Site Owners / Users None.	Site Visitors None.
Data Synced (Read More)
Site Owners / Users We sync options that identify whether or not the feature is activated and how its available settings are configured.	Site Visitors None.