Embed your ChurchSuite calendar on your website
Embedding your ChurchSuite events calendar into a website is easy and means that the website always includes the latest events as they're added or updated in the Calendar module. You can preview all of ChurchSuite's event Embed functionality on our demonstration website here.
Enabling calendar embed
Working within the Calendar module, click into the module's settings, accessed via the cog wheels icon in the top right corner of the module. Select the Embed Options tab. Click Edit to Enable embedding.
The Calendar embed and Featured Events embed sections are now surfaced (see related article for further information on the Featured Events embed).
You can Preview the embedded calendar at any time - especially while you're still customising. Select Customise to open the Embed options pop-up. Here you customise the functionality and appearance of the embed calendar, perhaps selecting to embed just certain categories of events and showing a Category filter. Multi-site customers will also be able to further filter events by site - only events for the selected categories and sites will be included in the embed.
Clicking Done to close the Embed options pop up now surfaces updated embed code. Note that you can further customise the height and width of the calendar - find the bits of the code that say "height=800" and "width=100%". To make the calendar higher, for instance, you could replace the number with a bigger number. Additionally, you can prevent scrolling within the embedded calendar's iFrame but setting the scrolling="yes" parameter to scrolling="no".
Once you are satisfied, you can copy and paste the long line of embed code out of ChurchSuite and into the source code or embed block section of the calendar page on your website.
Following the above steps, you can use the Customise option as many times as you wish to generate multiple embed codes, perhaps for use in different areas of your website. For example, imagine a student event calendar embed that surfaces all your student-related events on the Student page of your website!
Important!
It's important to remember that the Customise option is essentially an embed code generator, allowing you to generate multiple embed codes for different uses if you wish. Once you've made customisation selections click Done. You must then copy and save the generated embed code (perhaps to a text document) before closing the Embed Options page. When navigating away from the Embed Options the embed code resets back to its default state.
Similarly, if you subsequently create new Categories in the Calendar module - be sure to update any category-specific embed code in your website to reflect the changes; otherwise, the events in your new category will not be shown in the embed calendar.
Importantly only events set as Show in Embed are shown in an embed calendar - Leave, user birthdays and public holidays, which do show on your ChurchSuite calendar, are now displayed in an embed calendar. The Show in Embed visibility option is only available if Enable embedding is ticked in the Embed Options.
That's all there is to it - your ChurchSuite calendar is embedded - as you make changes to events and add new events to ChurchSuite, your website is instantly up to date with the changes.
Note that only events whose visibility is set to Show in embed are surfaced in an embed calendar.
Top Tip!
You can further customise your embedded calendar to use any Google Font. Include the font family 'name' in the iFrame URL and you'll be able to choose a font that matches perfectly with your website!
<iframe frameborder="0" height="800" scrolling="yes" src="https://demo.churchsuite.com/embed/calendar? font_family=Hammersmith+One" style="border-width:0" width="100%"></iframe>