Displaying Multiple Calendars
Last updated
Last updated
Introduction
In Gymini, you have the flexibility to display multiple calendars on a single page, facilitating easy switching between different calendars. This guide will walk you through the process of setting up a single page to display multiple calendars using calendar links and embedding them on a webpage.
Using Calendar Links:
1. Open each calendar link in a new tab by clicking the link icons for each calendar
2. Copy the calendar ID from one calendar then then go to the other calendar, add a comma after its ID, paste the other calendar's ID after the comma, and hit enter to reload the page
Embedding multiple calendars on a funnel page:
1. Go to Settings > Appointment Widget and copy the embed code from the first calendar
2. Go to the funnel page, add a "Custom JS/HTML" element, click "Open Code Editor", and paste the calendar embed code.
3. In a new tab, go back to Settings > Appointment Widget, change the calendar name dropdown to the second calendar and copy the calendar ID from that calendar
4. Go back to the funnel page tab that has your Custom JS/HTML element code editor open, add a comma after the calendar ID, paste the second calendar ID, then hit the "Yes, save."
5. Save your funnel page and preview.
Displaying Multiple Calendars Using Calendar Links
Open Your Calendars: In Gymini, open the calendars you wish to display on one page in separate tabs.
Identify Calendar IDs: In the URL of each calendar, find the calendar ID which appears after the equal sign (=
).
Combine Calendar Links: To create a single link displaying both calendars, take one calendar link, add a comma (,
), and then paste the ID of the other calendar.
Test the Link: Reload the page with the combined link. You will see a dropdown appear, allowing you to switch between the two calendars using one link.
Embedding Multiple Calendars on a Webpage
Navigate to Settings: Go to the "Settings" section in your Gymini account.
Access the Appointment Widget: Click on "Settings" in your account, and then find and click on the "Appointment Widget" to get the embed code for your calendar.
Copy the Embed Code: Copy the embed code for one of your calendars.
Open Your Funnel Builder: In your funnel builder, open the page where you want to embed the calendars.
Add Custom JavaScript/HTML Element: Add a custom JavaScript/HTML element to your page and open the code editor for that element.
Paste the Embed Code: Paste the copied embed code into the code editor.
Add the Second Calendar ID: Just like with the calendar links, add a comma (,
) followed by the ID of your second calendar to the embed code.
Save and Preview: Save your changes and preview the page to see the embedded calendars with a dropdown to switch between them.
Conclusion
You have successfully set up a single page to display multiple calendars in Gymini, allowing for a streamlined user experience where individuals can easily switch between different calendars. This setup is ideal for sharing in email signatures or embedding in web pages, offering a consolidated view of your availability across various calendars.
Remember to explore this feature to enhance the functionality of your landing pages and email communications, providing a seamless booking experience for your leads and clients.