Embed your ChurchSuite calendar in your website

ChurchSuite enables you to put the church calendar on your church website, which means that visitors can easily see what's going on and where they can get involved and join in.

Enabling calendar embed

In the "Calendar" module, locate and click the "module options" (cog-wheels) button in the top right-hand corner of the screen. You'll need Manage module or Administrator permissions to access this. Select the "Embed" tab.

Check the box that says "Enable embedding" and the embed code and preview button becomes visible.

You can preview your embed calendar at any time - especially while you are still customising. Select "Customise your embed styles" to tailor your embed calendar to suit your needs. Optionally generate embed code with filtered Categories - perhaps to display certain categories of events in different parts of your website; or provide you web visitors with a Category Filter - ideal for busy church calendars.

Important!

Do remember that the the "Customise" option is an embed code generator, essentially allowing you to generate multiple embed codes for different uses. You must copy your embed code (perhaps to a text document) each time you make a change. When save your module changes and closing the page, the embed code sample resets to the default.

Also, if you subsequently create new Categories - be sure to update any category-specific embed code in your website to reflect the changes; otherwise the events in your new category may not be visible!

Lastly, just to remind you that "Leave" and public holidays, which do show on your ChurchSuite calendar, are never displayed in an embed calendar. Embed will only feature those events where you have enabled "Visible in Embed".

In this code, you can optionally customise the background colour as well as the height and width of the calendar.

  • For background colour, find the bit of the code that says "bgcolor=ffffff". You can replace the "ffffff" with the hex code of the colour you wish to display. To find the right hex code for the colour you want, we recommend using a tool such as Adobe Kuler.
  • 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".

Once you're satisfied with this, copy the code to the clipboard (Ctrl+C on a PC, or cmd+C on a Mac) and paste it into the HMTL code of your website. Don't forget to click the "Save Changes" button!

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