Embed organisation lists and maps in your website

In this article

Introduction
Overview of organisation embed configurations
Adding or editing embed configurations
Configuration changes and website updates

Introduction

ChurchSuite's Network module includes website integration, enabling you to easily embed lists and maps of your organisations into relevant pages on your website. Once embed configurations are embedded, your website remains up to date as changes are made to organisations in ChurchSuite, with no need to copy and paste new embed code to your website when later making configuration changes.

Overview of organisation embed configurations

Embed configurations include a wide range of options to control the organisations that are visible in the embed, the filters that your website visitors can interact with on your website, and the styling of the embed list. There are two embed Formats - Map and List.

The Embed Map plots each organisation on a map. The map configuration can be customised to include optional filters to help website visitors better see organisations of interest.

The Embed List shows each organisation listed in alphabetical order. There are three list layouts to choose from. Lists can be further customised to include optional filters to help website visitors find organisations of interest.

Adding or editing embed configurations

To integrate organisation lists or maps into your website, you'll first add an embed configuration; adding a separate configuration for each embed instance. Working within the Network module, navigate into the module's settings, accessed via the cogwheel icon in the top-right corner of the module. You'll need Manage module or Administrator permissions. Select the Embed tab and click Add configuration (or Edit a previously-added configuration).

On the Add/Edit configuration pop-up give the configuration a suitable Name and optional Description used internally to help you identify this configuration within a list of configurations. For example, you might find it helpful to note the website page URLs where the configuration HTML will later be deployed. Select the configuration Format - List or Map - and for list format only, select the Layout, choosing between two alternative grid layout options or a list layout. You can save, preview and further edit the configuration to choose which layout you prefer. Optionally select a custom Brand - the selected brand's colour will be used to style certain elements of the embed content.

Continuing down the pop-up to the Organisations section, you can filter visible organisations by Label, and for multi-site customers, by site, if you wish.

In order to help website visitors further filter the organisations visible on an embedded map or list, several filtering options can be surfaced on the embed. You can surface filters covering Site and Labels. A clear naming convention for sites and labels will help website visitors better understand 'what' they are filtering, so you may want to avoid label descriptions and site naming that use abbreviations or terminology only understood by those who know your network.

Finally, the Details section controls which information about each organisation is shown in the embed. This information will be visible on the organisation cards (lists) and pop-ups (maps) that your website visitors will see when browsing. You can easily later Edit a configuration to make further changes if you wish, but note the handy Preview giving an example of how each organisation will be styled based on the Layout and Details that you've selected. Click to Save configuration changes.

Saving the configuration returns you to the Embed Options tab and the list of Configurations. From here you can Add further configurations, Edit, Delete, Duplicate or View changes made to a configuration's settings. You can Preview a configuration at any time to visualise how the embed will look to your website visitors once the HTML code has been added to your website.

Finally, when you are happy with how the configuration looks you can Copy HTML (to copy the configuration's HTML code to your device clipboard) and then paste it into the Source Code or Embed Block section on the appropriate pages on your website. Most modern websites are easily managed through a user-friendly content management system, however, you may wish to seek assistance from your website service provider to complete the task of adding the HTML code to the appropriate page and position on the page.

Here's an example configuration HTML. For those familiar with working with HTML note that you can manually change some of the iframe parameter values if you wish e.g. iframe height, scrolling, iframe width etc.

Importantly, you can return to the Embed Options section at any time to make subsequent changes to an embed configuration. Once a configuration's HTML has been added to your website, changes made to the configuration's settings in ChurchSuite are automatically reflected in your website - it's not necessary to embed new HTML when configuration changes are made.

Configuration changes and website updates

When changes are made to an organisation configuration it may take up to an hour for the previously-cached feed to reflect the updated results - configuration feeds are automatically regenerated every hour.

Still need help? Contact ChurchSuite Contact ChurchSuite