Home Page

Creating a Cloud Page for One-Click Meeting Calendar Subscriptions

Add Event to Multiple Calendars

Select your preferred calendar service:

Add to Google Calendar Add to Yahoo Calendar Add to Office 365 Calendar Add to Apple Calendar

Step 1: Set Up Your Cloud Page

The first step is to create a cloud page for your event or meeting. You can use a variety of web development tools and platforms to set up this page. HTML, CSS, and JavaScript will be essential in the process. Make sure the page is user-friendly and provides essential information about the event, such as the date, time, location, and a brief description.

Step 2: Implement Event Information

To make the process of saving the event to various calendar apps easy, you need to provide the event details in a structured format. This information should be embedded in your cloud page's code. Create variables or data fields for the event name, date, time, location, and description. This data will be used in the links you create for each calendar service.

Step 3: Generate Calendar Links

Now, let's dive into the specifics of how your subscribers can save the meeting calendar to their preferred calendar apps. We'll provide examples for Google Calendar, Yahoo Calendar, Office 365, and Apple Calendar.

Google Calendar

To create a link for Google Calendar, you can use the following code snippet:

function generateGoogleCalendarLink(event) {
            var link = 'https://www.google.com/calendar/render?action=TEMPLATE';

            if (event.title) {
                link += '&text=' + encodeURIComponent(event.title);
            }

            if (event.startDate && event.endDate) {
                link += '&dates=' + encodeURIComponent(event.startDate + '/' + event.endDate);
            }

            if (event.description) {
                link += '&details=' + encodeURIComponent(event.description + '\nJoin URL: ' + event.joinURL);
            }

            if (event.address) {
                link += '&location=' + encodeURIComponent(event.address);
            }

            return link;
        }
            

                
// Handle click events for each calendar service
        document.getElementById("addToGoogleCalendar").addEventListener("click", function () {
            var eventDetails = {
                title: 'Sample Event',
                startDate: '20230102T090000Z',
                endDate: '20230102T100000Z',
                description: 'This is a sample event description.',
                address: 'Sample Location',
                joinURL: 'https://example.com/event/join'
            };
            window.open(generateGoogleCalendarLink(eventDetails));
        });                    
                
            

Yahoo Calendar

To create a link for Yahoo Calendar, use the following code:

function generateYahooCalendarLink(event) {
            var link = 'https://calendar.yahoo.com/?v=60&view=d&type=20';

            if (event.title) {
                link += '&title=' + encodeURIComponent(event.title);
            }

            if (event.startDate && event.duration) {
                link += '&st=' + encodeURIComponent(event.startDate);
                link += '&dur=' + encodeURIComponent(event.duration);
            }

            if (event.description) {
                link += '&desc=' + encodeURIComponent(event.description + '\nJoin URL: ' + event.joinURL);
            }

            if (event.address) {
                link += '&in_loc=' + encodeURIComponent(event.address);
            }

            return link;
        }
    

document.getElementById("addToYahooCalendar").addEventListener("click", function () {
            var eventDetails = {
                title: 'Sample Event',
                startDate: '20230102T090000Z',
                duration: '01h00m', // Example duration (1 hour)
                description: 'This is a sample event description.',
                address: 'Sample Location',
                joinURL: 'https://example.com/event/join'
            };

            window.open(generateYahooCalendarLink(eventDetails));
        });    

Office 365

For Office 365, you can use the following code:

 
function generateOutlookCalendarLink(event) {
            var sd = event.startDate || '';
            var ed = event.endDate || '';

            var link = encodeURI([
                "https://outlook.office365.com/owa/",
                "?path=/calendar/action/compose",
                "&rru=addevent",
                "&subject=" + (event.title || ''),
                "&startdt=" + (event.startDate),
                "&enddt=" + (event.endDate),
                "&body=" + (event.description + '\nJoin URL: ' + event.joinURL || ''),
                "&location=" + (event.address || ''),
                (event.allday ? "&allday=true" : '')
            ].join(''));

            return link;
        }
    

  document.getElementById("addToOffice365Calendar").addEventListener("click", function () {
            var eventDetails = {
                title: 'Sample Event',
                startDate: '20230102T090000Z',
                endDate: '20230102T100000Z',
                description: 'This is a sample event description.',
                address: 'Sample Location',
                joinURL: 'https://example.com/event/join'
            };
            window.open(generateOutlookCalendarLink(eventDetails));
        });    

Apple Calendar

To create a link for Apple Calendar, use this code:

 function generateAppleCalendarLink(event) {
            var link = 'https://www.apple.com/ical/v1/add';

            if (event.startDate) {
                link += '&st=' + encodeURIComponent(event.startDate);
            }

            if (event.endDate) {
                link += '&end=' + encodeURIComponent(event.endDate);
            }

            if (event.title) {
                link += '&summary=' + encodeURIComponent(event.title);
            }

            if (event.description) {
                link += '&description=' + encodeURIComponent(event.description + '\nJoin URL: ' + event.joinURL);
            }

            if (event.address) {
                link += '&location=' + encodeURIComponent(event.address);
            }

            return link;
        }
    

document.getElementById("addToAppleCalendar").addEventListener("click", function () {
            var eventDetails = {
                title: 'Sample Event',
                startDate: '20230102T090000Z',
                endDate: '20230102T100000Z',
                description: 'This is a sample event description.',
                address: 'Sample Location',
                joinURL: 'https://example.com/event/join'
            };
            window.open(generateAppleCalendarLink(eventDetails));
        });

Step 4: Add Calendar blocks CTA

<div class="container">
        <h1>Add Event to Multiple Calendars</h1>
        <p>Select your preferred calendar service:</p>

        <a href="#" class="calendar-link calendar-link-google" id="addToGoogleCalendar">
            <i class="fas fa-google"></i> Add to Google Calendar
        </a>
        <a href="#" class="calendar-link calendar-link-yahoo" id="addToYahooCalendar">
            <i class="fas fa-yahoo"></i> Add to Yahoo Calendar
        </a>
        <a href="#" class="calendar-link calendar-link-office365" id="addToOffice365Calendar">
            <i class="fas fa-envelope"></i> Add to Office 365 Calendar
        </a>
        <a href="#" class="calendar-link calendar-link-apple" id "addToAppleCalendar">
            <i class="fas fa-apple"></i> Add to Apple Calendar
        </a>
 </div>        
    

Step 5: Testing and Integration

Before making your cloud page live, thoroughly test the links for each calendar service. Ensure that they correctly generate the event details in the respective calendar apps.

Finally, integrate these links into your cloud page alongside your event details. Encourage your subscribers to click on their preferred calendar service link to add the meeting to their calendar easily.

Conclusion

Creating a cloud page with one-click access to save events to Google Calendar, Yahoo Calendar, Office 365, and Apple Calendar is a valuable tool for event organizers and subscribers alike. By following the steps outlined in this blog, you can streamline the process of scheduling and help your audience stay organized effortlessly. This user-friendly feature will enhance the experience for your subscribers and make your events more accessible and memorable.

TOP