Using Calendly Widgets in Divi

This is a post for collecting together anything interesting I come across relating to the use of Calendly together with the Divi theme.

Changing the Height of Calendly Inline Widgets

If the height of the widget content is larger than a certain amount, the widget will be displayed with a scroll bar. To prevent this, you can set a height explicitly using CSS, e.g.

.calendly-inline-widget {
    height: 1000px !important;
}

Problems using Calendly Inline Widgets in Code Modules

Calendly offers various methods for embedding its calendars, etc. One is the inline widget, which lets you place some HTML into your page to add the widget. I came across an issue where the widget doesn't play nicely with the Divi code module. It seems that when they are processed into HTML in the page the resulting HTML has too many closing </div> tags. The result of this is that the structure of the rest of the Divi layout is getting messed up.

I'm not precisely sure why the extra </div> tags were being added, but there seems to be some interaction with Divi's processing of the HTML comments accompanying the Calendly widgets in the code modules.

Deleting the comments and newlines from the code module, just leaving the actual HTMl of the widget, seems to solve the problem.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

4 Comments

  1. I'm wondering how to make the Calendly window taller when it pops up so there isn't a scroll bar at the right. Any suggestions?

    Reply
    • Hey Cheryl, you should be able to do it by setting a specific height using some CSS like so:

      .calendly-inline-widget {
          height: 1035px !important;
      }
      

      I can't see an easy way of determining the necessary height automatically but I think the above value should work for the widget on the contact form of the site linked in your comment.

      Hope that helps!

      Reply
  2. Thank you for posting this solution! I've been trying to figure this out for so long, I really appreciate it!

    Reply
    • You're very welcome, Veronica. If there's anything else Calendly or otherwise that I can help with just give me a shout. Cheers!

      Reply

Submit a Comment

Your email address will not be published.