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.
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!