How to Display HubSpot Booking Calendar in Webflow Using Button Trigger?

Other Questions HubSpot
1

Hi everyone! I’m working on a Webflow project and I need to make sure I can integrate HubSpot’s scheduling calendar properly. What I want to achieve is pretty straightforward - when someone clicks on a call-to-action button like “Schedule Meeting”, the HubSpot calendar should appear as an overlay or modal window on the same page.

Right now, our existing website uses Next.js and this functionality works perfectly there. A visitor clicks the scheduling button and boom - the calendar widget pops up without redirecting to another page. This creates a smooth user experience.

I’ve been looking through various documentation but haven’t found a clear step-by-step guide for implementing this specific behavior in Webflow. Has anyone successfully set this up before? Would really appreciate if someone could point me in the right direction or share a working example.

Thanks in advance for any help!

2

I set this up for a client recently. You’ll need HubSpot’s meeting embed code and some custom JavaScript in Webflow. Grab the embed script from HubSpot’s meeting tool settings, then create a hidden modal div in Webflow. Here’s the key part - make sure the HubSpot script only loads when the modal opens. This prevents performance issues. I used Webflow’s custom code section with jQuery to handle the modal trigger and script injection. Get the timing right and the booking widget shows up perfectly in the modal. Watch out for z-index conflicts with other elements - you can fix those with CSS tweaks.