How to embed Calendly in Bubble.io

If you want an app where you allow users to book a session with you, 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 would need an account with Calendly to allow your users to book sessions.

How to embed Calendly in your app

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. To do so, go to the event’s settings by clicking the small grey settings icon and click ‘Add to Website’.

This will open a popup where you should click ‘Inline Embed’. You’ll now be shown your 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

If you need some help with your Bubble app, send me an email at himanshu@nocodeassistant.com or follow me on Twitter