Embed organisation lists and maps in your website

Introduction

Your ChurchSuite Network module includes a helpful website integration, enabling you to easily embed lists and maps of the organisations in your network on your website. Once embedded, your website will remain up to date as organisation changes are made in ChurchSuite. Embedded lists and maps are a great way to engage website visitors with the various organisations in your network—perhaps to find 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 configuration generates its own unique HTML code that you'll add to the appropriate page on your website to create the connection between your embedded ChurchSuite content and your Network module. Once embedded, subsequent changes to a configuration in ChurchSuite are reflected on your website without requiring you to add new HTML each time.

In this article, we explore the wide range of Embed options available for each configuration. These options give almost limitless control over the organisations that appear (or don't appear) in an embedded list or map. To further clarify, an embedded list or map shows organisations, not people—like the examples below—and not the personal details of organisation members.

There are two embeddable Formats - Map and List.

The embeddable Map plots organisations with addresses. Customisable map options provide optional filters to help website visitors locate organisations of interest geographically.

The embeddable 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 change a configuration. To visualise what your embeddable organisation lists and maps will look like and how they will function for website visitors, read on. Configurations have a helpful Preview so you can easily visualise the embedded list or map user experience before adding the HTML code to your website.

Adding or managing embed configurations

Working within the Network module, navigate to its settings, which are accessed via the cogwheel icon at the top-right corner of the module. On the Embed Options tab, click Add configuration or 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, it is helpful to note the website page URL where the configuration HTML will later be deployed.

Continuing down the pop-up to the Organisations section, the configuration shows all active organisations by default, but you can optionally filter the organisations shown 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 an embedded organisation list or map, optional Site and Label filters can be provided on an embedded list or map. A clear public-facing naming convention for sites and labels will help website visitors better understand 'what' they are filtering, so you should avoid using label names, label response options and site names that use abbreviations or in-house terminology that website visitors may not understand.

The Details section controls which information about each organisation is shown on your website. In addition to the organisation name and image, selected details will be visible on organisation cards (lists) and organisation pop-ups (maps) that website visitors will see when browsing the embedded list or map. 

Optionally select a custom Brand - the chosen brand colour is used to style certain elements of the embedded lists or maps. 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.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 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 an embedded map or list will look for website visitors. (REPLACE WHEN UPDATE)

When you are happy, click 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 on your website. Most modern websites are easily managed through a user-friendly content management system, however, you may 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 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 to make subsequent changes to a 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.