Using Calendly Widgets in Divi

Written by Dan Mossop

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;
}

Using a Divi Button to Show Calendly in a Popup

See this post if you want to have a Divi Button module trigger a Calendly popup.

Note that it's not technically using a divi button module, but rather my Divi Shortcode Popup module which is a modified version of the Divi Button module, designed for creating popups.

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.

Easily Display Shortcodes in Popups on Your Divi Site

Add shortcode popups effortlessly with the Divi Shortcode Popup Module. Just enter your button text and shortcode, and watch it appear beautifully in a popup. Perfect for creating interactive and dynamic content on your Divi pages.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

14 Comments

  1. Hi! I’ve added the calendar inline code to the code module in Divi, and now my footer won’t show and my header slide-in menu is inaccessible (it’s a dead hamburger menu). Any ideas on how to get my footer back and the menu to work?

    Reply
    • Hey Bryan, did you manage to resolve this? I took a look at the site linked in your comment, and can see the inline calendar along with the footer and a working hamburger menu. Hopefully you're seeing the same now, but if it's still not working for you, try clearing your browser cache and refreshing the page. If that doesn't help, are you able to let me know which browser / OS you're using? Thanks!

      Reply
  2. Hi ! I am looking to use calendly integrated inside of wp membership plug-in on a main member dashboard when member is logged in for my website. Is there a way to embed calendly inside of the wp membership plugin through divi ? I’ve done some research in short codes but would like your feedback for my developer. Thank you !

    Reply
    • Hi Kyle, I believe the best way to embed Calendly in a Divi module at the moment is either:

      • by pasting the HTML for an inline widget into a Divi code module (which comes with some minor issues as covered in this post)
      • by using the Embed Calendly plugin to get a shortcode and pasting that shortcode into the Divi code module. This is similar to the process I outline in this post about embedding Calendly in the Divi Shortcode Popup module, but you just use a Code module instead of the Shortcode Popup module. It'll give you an inline, rather than popup, calendar of course.

      How that plays with the membership plugin will depend on a couple of things. First, just so I'm clear, is it WP Membership by e-Plugins that you're using? I'm not specifically familiar with it, but you should be able to restrict individual Divi pages to your logged in members. So if you're dashboard is a front-end page that can be fully hidden from non-members, then you should just be able to add Calendly in a Code module on that page (as above) and restrict access to it through WP Membership.

      If you need the dashboard to be either a back-end admin page or to be partially available to non-members (e.g. only certain sections are hidden) then that will probably require some custom coding. If it's that latter, let me know – I've just implemented a similar feature for hiding individual Divi sections, etc, by membership plan in my ARMember plugin so it might be possible to modify that to work with your membership plugin.

      I hope that helps, but please feel free to send through any follow-up questions you might have. Thanks!

      Reply
  3. Bonjour,
    J'aimerais savoir comment supprimer un widget de pop-up calendly sur divi builder wordpress.
    J'ai inséré le code de calendly, je cherche à modifier et surtout supprimer le widget. Il apparait en mode normal et quand le builder est activé n'apparait plus.
    Merci de votre aide

    Reply
    • Bonjour Audrey. If I am translating / understanding correctly, then I think you should be able to edit / delete the module containing the calendly code by switching the visual builder to wireframe mode, as described in this post:

      https://divibooster.com/fix-module-cant-be-edited-deleted-in-visual-builder/

      I hope that helps, but let me know if it doesn't solve your issue. Thanks!

      Reply
  4. Bonjour,
    J'aimerais savoir comment supprimer un widget de pop-up calendly sur divi builder wordpress.
    J'ai inséré le code de calendly, je cherche à modifier et surtout supprimer le widget. Il apparait en mode normal et quand le builder est activé n'apparait plus.
    Mercie de votre aide

    Reply
    • Bonjour Audrey. If I am translating / understanding correctly, then I think you should be able to edit / delete the module containing the calendly code by switching the visual builder to wireframe mode, as described in this post:

      https://divibooster.com/fix-module-cant-be-edited-deleted-in-visual-builder/

      I hope that helps, but let me know if it doesn't solve your issue. Thanks!

      Reply
  5. How do I add a calendly popup widget to a divi button module?

    Reply
    • Hey Sam, here's one way to display a calendly widget with a button triggered popup:

      https://divibooster.com/make-a-divi-button-popup-a-calendly-widget/

      Note that it's not technically using a divi button module, but rather my Divi Shortcode Popup module which is a modified version of the Divi Button module, designed for creating popups.

      Reply
  6. 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
  7. 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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.