There are two types of integrations we can achieve with Hubspot Calendar:

Simple Embed: Have your Hubspot Calendar appear within your flow to use

Advanced Embed: Have data through your flow sent to Hubspot Calendar, so users do not have to re-enter basic details.

In your HubSpot account, navigate to Sales > Meetings.

  • Hover over the meeting, click the Actions dropdown menu, and select Embed.

  • Click Copy code.

    Simple Embed:

    A simple embed would embed the Calendly link to your Upflowy flow. If your customers have already submitted their details like name and email ID, they must be manually entered through the Calendly flow.

    For a simple embed, you must copy the code, click on Embedded content from the Components tab inside a step of your flow, and paste the code into the code snippet section.

    Advanced Embed:

    An advanced embed is when you want your users to automatically fill up their details like Name and Email (which they have entered in their Upflowy flow) in Hubspot Calendar without entering them again.

    There is some extra code you need to add in if you have already asked your customers for:

    • A first name and last name

    • An email address

    so that they don't have to type it in again!

    This is the code snippet that you should copy and add as embedded content (serves as an example, but you can add your own meeting link by modifying the one below):

    // Put this code in embed component and one button on the step which will // be visible after confirmation. <!-- Start of Meetings Embed Script --> <div class="meetings-iframe-container" data-src="[YOUR-BOOKING-LINK-HERE]?embed=true&firstName={{first_name}}&lastName={{last_name}}&email={{email}}"></div> <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script> <!-- End of Meetings Embed Script --> <script> var button = document.querySelector('.UP_formContainer button[type="submit"]'); button.style.display = 'none'; window.addEventListener('message', (event) => { const success = event.data && event.data.meetingBookSucceeded; if (success) { button.style.display = 'inline-block' } }); </script>

    Now all you need to do is:

  • Change [YOUR-BOOKING-LINK-HERE] to the link of your own calendar. You can find this within Hubspot.

  • If needed, modify the parameters captured in your previous steps to send it to the Hubspot link using the {{ }} function in the embedded code.

  • After this is done, copy-paste the entire code into your Embedded content! This will pull through the relevant data and proceed to the next step once something has been booked!

    Congratulations! Now you have a flow that users can book in time with!


    Our Help Center is an amazing resource for learning more about Upflowy. Return to Collection >>

    Jump in and try your hand at making your flows and forms with Upflowy for free. More features are offered on our paid plans. Find out more about our pricing here.

    Sign up for our weekly update and be the first to know about our new product announcements and more. Join our mailing list >>

Did this answer your question?