Calendly is a fantastic way to let your clients manage their own bookings and appointments. Once set up, they can book predefined time-slots to work with you and these are automatically added to your calendar. It’s quick, it’s easy and we use to help manage our client meetings.

In this guide we’ll show you how to link to your Calendly page directly from your Divi main menu. We’ll be replacing the default button link which we often add to websites we design.

Before you begin you will need to setup your Calendly profile. We won’t go into that here because Calendly have a great series of video tutorials which you can follow.

Once you’re set up we can get started.

Step 1: Login to your website

Login to your WordPress dashboard.

Step 2: Open the menu builder

In the sidebar menu click on/hover over ‘Appearance’ and then click on ‘Menus’. The menu builder page will open.

Step 3: Select your main menu

First, check that the menu name is the same as your main menu. If our team built your website then your main menu will either be called ‘main menu’ or ‘primary menu’.

Another way to check is to look towards the bottom of the page where you will see some check boxes. If the display location ‘Primary Menu’ is selected then this is your main menu.

If your main menu isn’t selected then you should use the drop-down menu selector to find your menu, then press the ‘select’ button.


Step 4: Locate your menu button

Many of the websites that we create have a menu call-to-action button. Where appropriate, we encourage clients to add a highlighted button to their menu to guide their visitors towards taking a specific action.

If your website does not have a menu call-to-action button then you should get in touch with our team so that we can assist you in creating one. We can offer this service for free to clients on one of our maintenance & support plans.

In the menu builder page your button will usually be the last item in the list. You can confirm this by checking the menu item name with the text on your menu button.

In our example, our button text is ‘join the community’ and so is the last menu item in our menu builder list.

The next step depends on how your current button is set up.

If your menu item is labelled as a ‘Page’ (found to the far right of the item) then go to step 5a. If the item is labelled as ‘Custom link’ then go to step 5b.

Step 5a: Menu item labelled as ‘Page’

If your button currently links to a page on your website then the menu item will likely be a ‘Page’ item. What this means is that it goes to a specific place on your website and will only ever go to this place. It cannot be edited to point to somewhere else because the item is specific to a page.

When this is the case what we need to do is create a new custom link menu item and then remove the page item. Here’s how:

1. Copy your Calendly link

Open up your Calendly dashboard and click on ‘Event Types’ in the menu.

Next, locate the event type that you want to link to. Click on the gear icon and then ‘copy link’.

2. Create a new custom link in your menu

Back in your WordPress menu builder locate the ‘Custom Links’ panel on the left. Open it and then paste in your Calendly link into the URL box. The content you put in the ‘Link Text’ box will be what shows up as your button text in your menu. Most of the time you will want something short and directly actionable, such as ‘book a call’.

Next, click on the ‘Add to Menu’ button.

3. Copy the button code

Your new custom link menu item will be added to the end of your menu by default. All that is left to do now is to add the button code and remove the old page link.

In the menu builder open the ‘Page’ menu item that we are going to replace. Then, locate the ‘CSS Classes’ section and copy the string of text.

If you do not see the ‘CSS Classes’ section go to the top of the page and click on ‘Screen Options’ and then ensure the ‘CSS Classes’ box is checked.

4. Replace the old menu item

With the snippet of text copied open up your new custom link and paste it into the ‘CSS Classes’ box.

Both menu items should now be almost identical except one will be a ‘Page’ and the other will be a ‘Custom Link’.

You can now delete the old ‘Page’ menu item by clicking the ‘Remove’ link.

Now proceed to step 6.

Step 5b: Menu item labelled as ‘Custom link’

If your menu button already links to an external webpage then all we need to do is change the URL where the button links to.

1. Copy your Calendly link

Open up your Calendly dashboard and click on ‘Event Types’ in the menu.

Next, locate the event type that you want to link to. Click on the gear icon and then ‘copy link’.

2. Paste your Calendly link

In your WordPress menu builder click on your button menu item to open it.

Remove all text in the URL box and then paste in your Calendly link.

If required you can also change the button label.

No proceed to step 6.

Step 6: Save your changes

Unlike some other aspects of your website your menus do not save automatically. Once you have arranged your menu items click on the ‘Save Menu’ button to confirm your changes.

Your updated menu will appear on your website immediately.