Embed Calendly in your Bubble.io app in 5 mins

Embed Calendly in your Bubble.io app in 5 mins

Himanshu Sharma
Himanshu Sharma

If you want an app where you allow users to book a session with you, the chances are that you are thinking about using Calendly. Calendly allows you to schedule meetings by allowing the user to see a list of slots you're available in. It has a free tier as well.

You need an account with Calendly to allow your users to book sessions.

How to embed Calendly in Bubble

The simplest way is to copy the link to the event and navigate the user to that page. You can do this using a button.

To create a more native user experience, you can embed the Calendly form as an iFrame. Go to the event's settings by clicking the small grey settings icon and 'Add to Website'.

This will open a popup where you should click 'Inline Embed'. You'll see the embed code which you need to copy.

The code needs to be placed in an HTML element in Bubble.

Go to your editor and drag a new HTML element. Paste this code and check the 'Display as an iFrame' checkbox.

Preview the page, and you can see the Calendly working on your Bubble app. Your users can now book a session with you, and you'll get automated emails from Calendly.

Preview - https://nocodeassistant-tutorials.bubbleapps.io/version-test/calendly

Editor - https://bubble.io/page?type=page&name=calendly&id=nocodeassistant-tutorials&tab=tabs-1

For what purpose do you find Calendly helpful to add to your Bubble app?

If you need some help with your Bubble app or if you need a team of Bubble developers to build a Bubble app for you, reach out to me at [email protected] You can also follow me on Twitter.

Join the conversation.