Embed small group lists and maps in your website

Introduction

Your ChurchSuite Small Groups module includes a helpful website integration that enables you to easily embed small group lists and group location maps into relevant pages of your website so that website visitors can browse your available groups to find a group of interest; and for groups with sign-up through embed enabled, to sign up and join. The prospective group member user experience is intuitive and a great way to maximise your small group ministry reach to those looking for a group, with group leaders and ministry leads optionally notified of new signups. New signups can be optionally taken through an approval process before they are added to the active group member list.

The Small Groups module 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 of your website to create the connection between your embedded ChurchSuite content and your Small Groups module. Once embedded, subsequent changes to a configuration in ChurchSuite are reflected on your website without requiring you to add new HTML each time. You can create multiple configurations - ideal for multi-site customers who want to embed separate groups, specific to a site, for each site's website.

Overview of small group embed configurations

A configuration has a wide range of Embed options that control the groups that are shown in an embedded group list or map, including optional filters that website visitors can interact with and styling settings to better blend embedded content with your website. There are two embeddable Formats - Map and List. You may wish to use both - some website visitors will find group locations on a map a helpful way to find a group, while others may prefer to browse a list of the groups you offer.

The embeddable group Map plots each group on a map. The map configuration can be customised to include optional filters to help website visitors find groups of interest. Clicking on a group map pin opens a pop-up with further details about the group and, depending on the group settings, the option to sign up and join.

An embedded group List shows groups listed in alphabetical group name order. There are three list layouts to choose from. Lists can be further customised to include optional filters to help website visitors find groups of interest. Clicking on a group takes the visitor through to the Group Page to see further details and, depending on the group settings, to sign up and join.

In-built person detection during the sign-up process attempts to match website sign-ups to existing people in your ChurchSuite database, linking the sign-up where a definitive match is made based on the sign-up name and contact details provided. Where a definitive match cannot be made, a new contact is added to the Address Book. Potential duplicate contacts can be later reviewed and easily merged. All sign-ups, or just the new contact signups, can be optionally added to Flows - ideal for extending your newcomer integration processes to those first connecting with your church or organisation when joining a group.

Managing website group visibility

Before adding an embed configuration, it's helpful to first consider how group visibility in embedded lists and maps is derived. An embed configuration can be set to show Active groups only or Active & Future groups:

• Active groups are those with a past Start date and a future End date (if specified), AND any future groups with Sign Up enabled and active now. In this way, a group starting in the future will be visible in the embed if signup is currently open
• Future groups are those whose Start date is in the future
• Past groups are those whose End date is in the past. Past groups are not shown in an embedded list or map

In addition to choosing between Active or Active & Future groups, Visibility and Sign Up settings are set on a group-by-group basis when adding or editing a group in the Small Groups module. For any group to be visible in an embedded list or map, Show in Embed MUST be ticked (see below). Similarly, for any group to accept sign-ups via an embedded list or map, Sign up through Embed MUST be ticked (see below).

Note also the options to further manage the sign-up period, which can be set to start before the group's meeting start date if you wish. A Sign-Up Start date is required. Sign-up then remains active until the Sign-Up End date, if one is specified. Leaving the Sign-Up End date empty permits sign-ups indefinitely until the group ends. Furthermore, sign-up will not be possible once a group's Capacity has been reached, although a Small Groups module user can always increase capacity and/or add sign-ups overriding a group's capacity if they wish.

Adding or editing embed configurations

To embed small group lists of maps into your website, you'll first add an embed configuration, creating a separate configuration for each embeddable feature instance you want to deploy. Working within the Small Groups module, navigate into the module's settings, accessed via the cogwheel icon in the top-right corner of the module. Select the Embed Options 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 it within a list of configurations. For example, you might find it helpful to note the web page URL where the configuration HTML will later be deployed.

Continuing down the pop-up to the Groups section, select whether the configuration shows Active or Active & Future groups. You can further filter visible groups by cluster and label, and for multi-site customers, by site, if you wish.

The Filters section offers several filtering options that can be surfaced on the embedded list or map to help website visitors further filter the groups visible by group meeting Day, Site and Labels. A clear naming convention for Sites and Labels will help website visitors better understand 'what' they are filtering, so you may wish to avoid label descriptions and site naming that use abbreviations or in-house terminology only understood by those who know your church.

The Details section controls which additional information about each group is shown on your website. While full group details are seen when a website visitor clicks through from the embedded list or map to an individual Group Page, you can optionally set some group details visible on the Group Cards (lists) and Group pop-ups (maps) that a website visitor sees. You can easily further Edit a configuration to make changes later if you wish.

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 colour will be used to style certain elements of the embedded content, but note the Preview, which gives an example representation of how each group will be styled based on the Layout and Details that you've selected. Click to Save the configuration changes.

Saving a configuration returns you to the Embed Options tab and list of Configurations. From here you can Add further configurations or Edit, Delete or View changes for an existing configuration. You can Preview a configuration at any time to visualise how the embedded group list or map will look on your website. When you are happy, you can Copy HTML (to copy the configuration HTML code to your device clipboard) and then paste it into the Source Code or Embed Block section on the appropriate page of 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.

The Developer JSON option will take you to the JSON feed of raw data. For more information, see the related support article on Developer API.

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.

<iframe frameborder="0" height="800" allowtransparent="yes" scrolling="yes" src="https://demo.churchsuite.com/embed/v2/smallgroups/843b2819-b632-4445-b27a-39b72b8cd72c" style="border-width:0" width="100%"></iframe>

Once configuration HTML has been added to your website, subsequent changes made to the configuration settings in ChurchSuite are automatically reflected in your website - it's not necessary to embed new HTML when configuration changes are made.

Rounding out this article - in the Small Groups module settings - take a moment to visit the Group Page Options tab located next to the Embed Options. There are additional settings relating to what happens when your website visitors interact with a Group Page accessed through an embedded list or map (and via the Group List and Group Map applications in Connect). Click Edit to make changes within the relevant section.

The Notifications settings enable you to optionally designate one or more email addresses that will be notified when someone signs up for a group through a Group Page. Multiple email addresses should be separated with a comma. Note also the option to Mask out sign-up details, so that signup contact details are partially obfuscated in the notification emails sent, ensuring the privacy of personal data outside of your ChurchSuite account.

You can also optionally specify one or more Flows that All sign-ups and New contacts are assigned to when they sign up to join a group through a group page. Finally, you can optionally add Custom Information that will be shown in the footer of every group page - adding a Title and custom Message.

Here's what this Custom Information looks like in a group page...