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;
}Related Post: Adding CSS to the Divi Theme
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.
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?
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!
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 !
Hi Kyle, I believe the best way to embed Calendly in a Divi module at the moment is either:
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!
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
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!
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
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!
How do I add a calendly popup widget to a divi button module?
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.
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?
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!
Thank you for posting this solution! I've been trying to figure this out for so long, I really appreciate it!
You're very welcome, Veronica. If there's anything else Calendly or otherwise that I can help with just give me a shout. Cheers!