In this article we will cover from start to finish how to add your Google calendar into the Pilera Easysite. This includes making the calendar public, grabbing the embeddable URL and inserting it into the source code.
Brief:
To embed a Google calendar into the Pilera Easysite you must first have a google calendar created through your Google account. To give access to all visitors the calendar should be set to public. Copy the embeddable URL that Google gives you and add it to a Pilera Easysite ‘Content (Freeform HTML Blob)’ module under the source code.
Step by step:
- ACCESS YOUR GOOGLE CALENDAR. While logged into your Google account click on the grid icon in the upper right corner of the browser. From there select the calendar button. (NOTE: If you do not see the calendar icon you can find more Google product by clicking on the more button at the bottom of the pop up.)
- SELECT THE APPROPRIATE CALENDAR. In the calendar page you can find all of the calendars you have created under ‘My Calendars’. To create a new calendar, click on the ‘CREATE’ button. Otherwise select them from your calendars.
- GO TO CALENDAR SETTINGS. Hit the small arrow at the end of the name of the calendar under the ‘My Calendars’ section. A pop up will appear, select ‘Calendar Settings’.
- GO TO ‘ACCESS PERMISSIONS FOR EVENTS’. On the calendar settings page, you can see the embedded code but we will not need that at this moment. Instead click on the ‘ACCESS PERMISSIONS FOR EVENTS’ link in the upper navigation. Click the box "Make available to public".
- GET EMBEDDABLE LINK. Go back to the calendar settings page for the calendar you will be embedding into your Pilera Easysite. Scroll down until you get to the ‘Embed This Calendar’ section. Highlight and copy the URL in the text field box.
- GO TO YOUR PILERA EASYSITE by accessing your communities Pilera web portal going to the Manage tab and clicking Community website. (NOTE: If you do not have the community website option then you are not subscribed to our Pilera Easysite.)
- SET TO EDIT MODE so you can add the calendar module on your page.
- ADD NEW MODULE. In admin mode you will notice slight interface changes such as a small x (delete module), a pencil (edit module), and a plus sign (Add new module). To add a new module, click on the plus sign.
- USE CONTENT FREEFORM MODULE. A pop-up window will appear labeled ‘Select a Module to add to Column #’. Click on the ‘Content (Freeform HTML Blob)’ module.
- PASTE THE EMBED URL INTO THE SOURCE CODE. In the ‘Content (Freeform HTML Blob)’ click on the Source button in the top left (1). This will allow you to alter the HTML source code. Paste the embed URL code from Google calendar into the white text field after you click on "Source"
- DON’T FORGET TO SAVE. Be sure to save your changes by clicking on the save floppy disk icon next to the source button.
- REVIEW. Once saved the calendar should appear. We recommend following the testing procedures below to make sure it works as intended. If you want some helpful tips on how to make adjustments to your calendar review the tips sections below.
Testing:
- Sign out of all Google accounts and view the Pilera Easysite page. The calendar should still be viewable. If not visible, your calendar may not have been made public. Please review step 4 and 5 again.
- If you see the URL but no calendar, then you copied it into the ‘Content (Freeform HTML Blob)’ module and not in the source code section. Please review step 11 again.
- If you copied the URL in the source code but are still seeing only the URL. You most likely did not copy the complete URL. You may have only partially copied the URL. Go back and copy the embeddable URL again and paste it in the source code. Review step 6 again.
- Resize the screen to make sure it doesn’t cause any sort of errors. If you notice errors we recommend reviewing our Tips on resizing the calendar.
Tips:
- Resize: Google calendar is default 800 pixels wide by 600 pixels high while our Pilera Easysite modules are only 450 pixels wide. To adjust the calendar to fit in our module make small edits to the URL. Change the width and height to match what size you need. We recommend width=”450” height=”600”.
Ex.
<iframe src="https://calendar.google.com/calendar/embed?src=pilera.com_4p54t24fpj9hik2dq8ok2r45cg%40group.calendar.google.com&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
- Edit Calendar Themes: If changing the actual code is a bit too complicated, Google gives you the ability to edit the code through an easy interface. In the ‘Calendar Settings’ page under the ‘Embed This Calendar’ Section you can see a link labeled ‘Customize the color, size, and other options’ link. Click on it. In this page you can edit the width, height, colors, and more without knowing any code. Copy the URL under ‘Copy and paste the HTML below to include this calendar in your website’ and follow steps 7-13.
- Add a Google calendar to a Pilera online form using similar steps.
Conclusion:
Google calendar is an easy way to keep your community informed on upcoming events, booking, scheduling and more. Keep your business professional by having all your information in one place.