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 what the regular Hubspot calendar code looks like.

  • <!-- Start of Meetings Embed Script -->
    <div class="meetings-iframe-container" data-src="https://meetings.hubspot.com/koushik-venkatasubramanian?embed=true"></div>
    <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
    <!-- End of Meetings Embed Script -->

  • You can further make changes to the code to capture details like Name, Email etc., which you might have captured in your previous steps of the Upflowy flow by adding a code like bookingformURL?name={{first_name}}& email={{email}}&address={{address}} where {{first_name}}, {{email}} and {{address}} are ids that you have already captured in the previous steps.

  • Similarly, you can pass parameters captured in your previous steps 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?