How to create a booking popup with Calendly?
Looking to book appointments through poptin? You can now let your customers book appointments with you through popups.
Create a Poptin with the template of your choice. Add your content such as relevant text, images, and a close button for your customers that don't want to book the appointment.

Go to your Calendly dashboard > Event Types and click on the Share button on your desired event.

Next select Add to Website and then select Embed Inline . Click continue.

On the next click Copy Code to copy your embed code. You can also optionally customize Calendly to change background, text, button & link color settings to match the poptin design.

Add HTML Element to your popup and click on the Edit HTML icon as per the screenshot below.

In the HTML Box paste your previously copied Calendly Embed Code and click the save button to save your embed code.

Now click Publish to publish your popup and start taking bookings through Poptin.
Note: Minimum height suggest is 700px for Calendly to work properly and feel free to fill the blank space with Image, Text, or Logo.
Create a Poptin with the template of your choice. Add your content such as relevant text, images, and a close button for your customers that don't want to book the appointment.

Go to your Calendly dashboard > Event Types and click on the Share button on your desired event.

Next select Add to Website and then select Embed Inline . Click continue.

On the next click Copy Code to copy your embed code. You can also optionally customize Calendly to change background, text, button & link color settings to match the poptin design.

Add HTML Element to your popup and click on the Edit HTML icon as per the screenshot below.

In the HTML Box paste your previously copied Calendly Embed Code and click the save button to save your embed code.

Now click Publish to publish your popup and start taking bookings through Poptin.
Note: Minimum height suggest is 700px for Calendly to work properly and feel free to fill the blank space with Image, Text, or Logo.
Updated on: 15/11/2024
Thank you!