Embed organisation lists and maps on your website

Introduction

ChurchSuite's Network module includes a fantastic website integration, enabling you to easily embed lists and maps of the organisations in your network on your website. Once embedded, your website remains up to date as changes are made to organisations in ChurchSuite. Embedded lists and maps are a great way of engaging website visitors with the organisations in your network - perhaps to find or look up details of a nearby church, ministry, hub or project.

Overview of organisation embed configurations

The Network module's settings include a section for setting up and managing "embed configurations". An embed configuration contains all the embed settings, and each embed configuration generates its own unique HTML code that you'll add to the appropriate page on your website to create the embed connection between your embedded ChurchSuite content and your network module. Once this website connection is made any subsequent changes to the configuration in ChurchSuite will be reflected on your website without requiring you to add new HTML each time.

In this article, we explore the wide range of customisation available for each configuration, which gives almost limitless control over the organisations that show (or don't show) in the embed. To be clear, "embed" is about organisations, not people - like the examples below, it's the organisations in your network that are shown, not the personal details of the organisation's members.

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 locate organisations of interest geographically.

The Embed List shows organisations listed alphabetically. There are three list layouts to choose from. List configurations can be further customised to include optional filters to help website visitors find organisations of interest.

The remainder of this article explains how to add or make changes to a configuration. If you're still unclear about what your network embed could look like or how it might function in your use-case scenario, do still read on - configurations have a helpful "Preview" option so you can visualise the embed before adding the embed HTML to your website.

Adding or managing embed configurations

Working within the Network module, navigate into the module's settings, accessed via the cogwheel icon in the top-right corner of the module. On the Embed tab, click Add configuration, or click Edit to make changes to an existing configuration.

On the Add/Edit configuration pop-up, enter a suitable configuration Name and optional Description, used internally to help you identify this configuration within a list. For example, you might find it helpful to note the website page URLs where the configuration HTML will later be deployed. Optionally select a custom Brand - the selected brand's colour will be used to style certain elements of the embedded content. 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.

Continuing down the pop-up to the Organisations section, the configuration displays all active organisations by default, but you can optionally filter the organisations displayed by Label and for multi-site customers, by Site, if you wish. See the related support article for further information about categorising organisations using labels.

To help website visitors navigate the embedded organisations for your network, two filtering options can be optionally made visible for Site and Labels. A clear public-facing naming convention for sites and labels will help website visitors better understand what they are choosing to filter, so you should avoid using label names and label response options and site names that use abbreviations or terminology that won't be clear to those visitors.

Finally, the Details section controls which information about each organisation is shown in the embed. In addition to the organisation name and image, selected details will be visible on the organisation cards (lists) and organisation pop-ups (maps) that your website visitors see when browsing the embed. You can later Edit a configuration to make further changes if you wish, but note the Preview, showing a likeness of how an organisation card 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, including all the details you just added for a new configuration. From here you can Add further configurations, Edit or Delete a configuration, or View changes made to a configuration's settings. You can Preview a configuration at any time to visualise how the embed will look for website visitors.

When you are happy with how the embed 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 page/s 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 the HTML for an example configuration. For those familiar working with HTML, note that you can manually edit some of the iframe parameter values if you wish e.g. iframe height, scrolling, iframe width etc.

<iframe frameborder="0" height="800" allowtransparent="yes" scrolling="yes" src="https://training.churchsuite.com/embed/v2/network/ae6df79c-9fd9-4fa4-b2e6-854c8b53393d" style="border-width:0" width="100%"></iframe>

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, subsequent changes made to a configuration's settings in ChurchSuite are automatically reflected in your website - it's not necessary to embed new HTML when configuration changes are made. However, note that changes made to a configuration may take up to an hour for the previously-cached organisation feeds to reflect the updated results. Configuration feeds are automatically regenerated every hour.