How to integrate Calendly with DIVI

What is your overall web goal? For many of my clients who are online coaches and other service providers, it is to get a potential client on a consult or sales call. So they can really start to understand their clients’ needs and how they can help and support them. So it is key to design into their website an effective and easy way for people to schedule a call.

Of course, there are a bunch of amazing scheduling tools out there, and a commonly used one is Calendly. It’s also currently my personal favourite. From a user perspective, it’s super easy to use and looks great. From my perspective, it has some cool features such as automatically checking availability in my Google calendar. It also factors in both buffer times before and after a call and allows for a daily limit on the number of meetings booked in. In summary, they have really thought through how a tool like this affects the user in terms of not only time management but also task management. What’s not to love?

Web and Business Goal

So your web goal is to get more clients on the phone, and you know the tool you are going to use. Now it’s time to drop the barriers. From my college days, this would have been called “barriers to entry.” I like to think about it as how to get an easy yes. Nowadays, we need to make sure design elements are scroll stopping and action-taking. Or in basic terms, the more effort someone has to put into the schedule a call with you, the less likely they will be to actually do it.

So the obvious solution is to embed the tool into your site, encouraging visitors to stay on your site for longer and to check out more of your site. And when we think about how traffic comes to your site, this means embedding the tool in all the right places, e.g., blog posts, thank you pages, secret offer pages—not just your service/work with me page.

How To Integrate Calendly As A Button Into Divi

1. Add a button module.
2. Create a clear call to action, such as “SCHEDULE A CALL.” The key here is to make the action you want the visitor to take a no-brainer. In the UK, we have a phrase for this, “It does exactly what it says on the tin.” Because a confused visitor equals no action taken and lost opportunities.
3. Grab your Calendly URL link. It will look something like this https://calendly.com/name. To find yours, login to Calendly, click on ACCOUNT, click on SHARE YOUR LINK, and grab the one you need.
4. In the DIVI button module, paste that link in LINK > BUTTON LINK URL.

How To Integrate Calendly As An Inline Scheduler Into Divi

1. Within DIVI, add a code module.
2. 
Grab your embed Calendly code. To find yours, login to Calendly, click on ACCOUNT, click on SHARE YOUR LINK, ADD TO YOUR WEBSITE, then select the blue box labeled .
3. Select INLINE EMBED, and press CONTINUE.
4. 
Grab the code from the EMBED CODE box or press COPY CODE.
5. Return to the DIVI code module and paste this code.
6. 
Click Save.

How To Integrate Calendly As A Popup Widget Into Divi

1. Grab your embed Calendly code. To find yours, login to Calendly, click on ACCOUNT, click on SHARE YOUR LINK, ADD TO YOUR WEBSITE, then select the blue box labeled .
2. Select POPUP WIDGET, and press CONTINUE.
3. If you wish, edit the Popup Widget button text and colors.
4. Once happy, grab the code from the EMBED CODE box or press COPY CODE.
5. Within DIVI, select DIVI, THEME OPTIONS.
6. Select the INTEGRATION TAB.
7. Paste Calendly embed code into the ADD CODE TO THE < BODY > section.
8. Click Save.

How To Integrate Calendly As A Popup Text Into Divi

1. Within DIVI, add a code module.
2. Grab your embed Calendly code. To find yours, login to Calendly, click on ACCOUNT, click on SHARE YOUR LINK, ADD TO YOUR WEBSITE, then select the blue box labeled.
3. Select POPUP TEXT, and press CONTINUE.
4. If you wish, edit the Link Text.
5. Once happy, grab the code from the EMBED CODE box or press COPY CODE.
6. Return to the DIVI code module and paste this code.
7. Click Save.

How To Link To Events

The other great thing about Calendly is you can link to a particular meeting event. So, say you (or your client) have created one meeting type for consult calls and another for a paid “power hour.” Simply log in to your Calendly account and go to Event Types and click on the gear symbol (top right). On that drop-down, select ADD TO WEBSITE and follow the instruction above.

As you can see, it is super easy to use. And it can be applied in a number of different ways to support the web goal of booking more client consults and sales calls.
Happy creating.

If you are looking to create a new website and would like a FREE Strategic Website Consult Call here, schedule it here. Our calls are totally no-pressure. We are trying to help you solve problems in your business, not sell you stuff you don’t need.