Embed your ChurchSuite calendar in your website

Embedding your ChurchSuite events calendar into your church's website is really easy and means that your website always includes the latest events. 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 tab.

Click to Enable embedding and the Calendar embed code and Featured Events embed code becomes visible (see related article for further information on the Featured Events embed).

For each of the two Embed options you can Preview the embed calendar at any time - especially while you're still customising. Select Customise to open the Customise Embed HTML pop-up. Here you customise the functionality and appearance of the Embed calendar can optionally generate embed code, perhaps selecting to embed just certain Categories of events providing users with a Category filter. Multi-site churches will also be able to select which site(s) to generate embed code for - only events for the selected categories and site(s) will be included in the embed. In this way you can use the Customise option to generate multiple embed codes, perhaps for different areas of your website.


It's important to remember that the 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 your customise 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 navigate 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.

You can optionally customise the height and width of the calendar. For height and width, find the bits of the code that say "height=600" and "width=800". To make the calendar higher, for instance, you could replace the "600" with "750", or "800".

You can additionally choose whether or not your embedded calendar is to have the option to scroll up and down available events within itself or not - simply define the 'scrolling=' value appropriately as yes or no.

Once you're finished customising, copy the code to the clipboard (Ctrl+C on a PC, or cmd+C on a Mac) and paste it into the Source Code or Embed Block section of the appropriate page on your website. 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.

Top Tip!

You can further customise your embedded calendar to use any Google Font. Simply include the font family 'name' in the iFrame URL and you'll be able to choose a font that matches perfectly with your website!

For example, if your Google font family is "Hammersmith One", ( https://fonts.google.com/specimen/Hammersmith+One), note the font family name from the end of the Google font URL, and append it to the end of the embed code URL like this...

The iFrame embed code will then look something like this example:

<iframe frameborder="0" height="800" scrolling="yes" src="https://demo.churchsuite.co.uk/embed/calendar? font_family=Hammersmith+One" style="border-width:0" width="100%"></iframe>

Still need help? Contact ChurchSuite Contact ChurchSuite