Embed small group lists and maps on your website

Introduction

ChurchSuite's Small Groups module includes website integration, enabling you to easily embed small group lists and group location maps into relevant pages on 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 user experience for prospective group members is incredibly intuitive and a great way to maximise small group ministry reach to those looking for a group, with group leaders and ministry leads optionally notified of new signups, and new signups taken through an optional approval process before they are fully accepted to the group member list.

Using embed configurations - perhaps with different configurations deployed on different pages of your website - once embedded your website remains up to date as group changes are made in ChurchSuite, with no need to copy and paste new embed code to your website when later making configuration changes.

Overview of small group embed configurations

Embed configurations include a wide range of options to control the groups 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. You may wish to embed both - some people will find visualising group locations a helpful way to find a group, while others may prefer a list of groups to scroll and read.

The Embed Map plots each group on a map. The map configuration can be customised to include optional filters to help website visitors better see groups of interest. Clicking on a group map pin will pop up further details about the group, and depending on the group settings, they can sign up to join.

The Embed List shows each group 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, they can sign up to join.

In-built person detection during the signup process attempts to match visitors to existing people in your ChurchSuite database, linking the signup where a definitive match is made based on the signup's 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 signups, 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 when joining a small group.

Managing website group visibility

Before defining an embed configuration, it will be helpful to first consider how group visibility in Embed is determined. Each 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 a website embed

In addition to showing 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 always be ticked (see below). Similarly, for any group to accept signups via an embedded list or map, Sign up through Embed must be ticked (see below).

Note also the options to further manage the signup 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 specified. Leaving the Sign-Up End date empty permits signups indefinitely until the group ends. Furthermore, signup will not be possible once a group's Capacity has been reached, although a Small Groups module user can always add signups, overriding a group's capacity if they wish.

Adding or editing embed configurations

To integrate small group lists of maps into your website, you'll first add an embed configuration; adding a separate configuration for each embed instance. 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 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 embedded content.

Continuing down the pop-up to the Groups section, select whether the embed should only show Active groups, 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 embed to help website visitors further filter the groups visible on an embedded map or list by the 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 want to avoid label descriptions and site naming that use abbreviations or terminology only understood by those who know your church.

Finally, the Details section control which information about each group is also shown in the embed. While full group details will be seen when a website visitor clicks through from the embed to an individual group page, you can optionally set some group details visible on the group 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 group Preview gives an example representation of how each group 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 or View changes made to a configuration's settings. You can Preview a configuration at any time to visualise how the embed will look on 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.

<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>

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.

Rounding out this article - in the module's 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 via a group embed (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. And 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 on a group page...