Embedding a calendar on your funnel or website is a useful way to streamline appointment bookings and improve client interactions. Whether you're embedding a single calendar or offering a selection of group calendars, this guide walks you through the process of accessing your calendar code, adding it to your website, and ensuring it functions seamlessly. By following these steps, you will provide clients with a user-friendly booking experience while maintaining an efficient schedule.
Note: While a calendar element is available for funnels and websites built within the platform, this feature provides an alternative method for embedding a calendar on your page.
Navigate to the Calendar Settings section of your account. You can choose to copy the code for either a single calendar or a group of calendars:
For a single calendar, select the three dots associated with the desired calendar and click Share.
Within the popup modal, switch to the Embed Code tab, and click the ‘Copy’ button to save the code to your clipboard.
For a group of calendars, navigate to the Groups section within your Calendar Settings, and ensure a calendar group is created.
From the action dropdown associated with the group, copy the embed code, which allows users to choose from multiple calendars.
Navigate to the funnel or website where you want the calendar to appear.
Select the desired funnel step or website page, then click Edit to open the builder.
Add the Code element, then paste the copied calendar code into the code editor and save your changes.
After making all necessary adjustments, be sure to save the page and publish it to make it accessible for live viewing.
Once the page is saved, visit the site preview to test the embedded calendar.
For group calendars, ensure users can switch between calendars, and verify that each calendar correctly displays available appointment slots for both individual and group calendars
Note: This functionality is available for all calendars with an embed code, regardless of whether they were created within the system or not.
By embedding your calendar, you enhance the client experience, making it easier for them to book appointments, while also optimising your scheduling process.
Calendar Not Displaying
Double-check that the embed code in the code editor matches the embed code of the calendar and that it was saved.
Incorrect Calendar Displayed
Ensure the correct code was copied for the intended calendar or group. If a single calendar appears instead of a group, you may have inadvertently copied the single calendar code.
Q: Can I customise the appearance of the embedded calendar?
You can apply CSS on your website to adjust the appearance of the calendar.
Q: Is it possible to embed multiple calendar groups on the same webpage?
Yes, you can embed multiple calendar groups by inserting the respective codes for each group into different sections of your webpage.
Q: What should I do if the calendar times are not displaying correctly?
Verify that your calendar settings, including time zones and available hours, are properly configured. Additionally, ensure there are no conflicting settings on your website.
