Embed small group lists and maps in your website

In this article

Overview of small group embed
Embedding a small group list or map
Customising the small group embed content

ChurchSuite makes it super easy to embed a list and map of your small groups into your church web site, enabling visitors to browse the menu of available groups to find the group that's most suitable for them, and, if enabled, to even sign-up online.

Overview of small group embed

The Embed Map includes optional Day and Tag filters to help web site visitors drill down into the most appropriate groups. There's also an Address/postcode search - website visitors enter a partial address or postcode in the field and the map zooms and centres to that location so that they can see which groups are nearest geographically.

The Embed Group List includes optional Day and Tag filters too, to help your website visitors see appropriate groups. Web site visitors can click through to the Group Page for further information and to sign up by clicking the Sign Up button.

Embedding a small group list or map

Group-by-group control

This article explains the process of enabling, customising and deploying small group embed functionality to your website. A further article explains how to enable sign-up on each of your groups. For further information, see the related support article titled Enabling small group sign up through Embed.

Within the Small Groups module, click to access the module's settings via the cog wheels icon in the top right-hand corner of the module - to access this feature you'll need manage module or Administrator permissions. Select the Embed tab.

Next you will see two checkboxes in the Embed Settings section - Enable map embedding and Enable list embedding. Tick as appropriate to enable the functionality.

As you enable an embed setting, the respective Groups Map and Groups List embed HTML code becomes visible.

You can Preview the Groups Map embed and Groups List. If you are happy with the preview you can now simply copy and paste the embed code provided into the source code or embed block section of the appropriate page in your web site. However, for those who wish to further Customise the embed content, read on, as the following section will be helpful.

Customising the small group embed content

As shown in the previous section, click the Customise option to open the Customise Embed HTML pop-up.

Important

The options in the the Customise Embed HTML window (shown above) are essentially an HTML code generator. As you make changes to settings here to suit your preferences and needs, the underlying HTML code in the Preview box is updated accordingly. Changes can be previewed at any time.

Be sure to "copy" the newly-updated HTML code before you close the Small Group module options page - perhaps copying the generated embed code to a separate document, ready to be pasted into your website. Why? Changes made in the HTML code generator are not saved when the module settings are closed - the embed code generator reverts back to the default HTML code whenever the Embed page is opened.

With this in mind, we suggest working in multiple browser tabs as you Preview and experiment with your generated HTML code until you achieve the customisation you want; and only close the module settings page once you have copied and pasted your embed code into your web site.

Note: Once embedded into your web site, if you subsequently want to make changes to the embed Filter Options and Colour Styling, you will need to copy and paste new embed code into the source code or embed block section of the appropriate page in your web site.

Let's explore each of the embed customisation Filter Options and Colour Styling settings.

  • Filter by Tags enables you to choose which small group Tags to include in your embed lists and maps. If you just want to show discipleship groups, only select your "discipleship groups" Tag. If there are Tags you don't want to make visible (perhaps an internal Tag you're using), don't include it.
  • Show Tags filter displays a drop-down menu populated with the Tag(s) you selected above; allowing your website visitors to filter which groups to view in list or map view based on a tag.
  • Show day filter displays a drop-down menu allowing website visitors to filter groups that meet on particular days of the week.
  • Filter by Site (for multi-site accounts) enables you to choose which site's groups will be included in the list/maps. Used in combination with Tags, you can create highly customised small group lists to cater for each or your site/campus's own web site. This filter option is not visible if multi-site has not been enabled.

You also have a wide range of Colour Styling options so that your Groups List and Groups Map blends elegantly the styling of your web site. Hex colour codes can be selected here.

Once you've finished with the Customise Embed HTML options, click Done to close the window and view or preview the updated HTML embed code.

You can manually adjust the height and width of the Embed iFrame by manually editing the HTML embed code parameters. To adjust the height and width of your list or map, locate the part of the code that says height="XYZ" and width="XYZ%" and amend the values to suit with your website page. Note that some website CMSs remove "%"s when embedded, so you may need to specify width as an integer value rather than a percentage.

Once you've completed customising your Embed Code you can now copy and paste it, either into a temporary text file for later use, or directly into the source code or embed block section of the appropriate page in your web site.

Other Embed settings

Returning to the Embed options in the Small Groups module settings, you can configure a number of other embed-related small group settings.

The last setting in the Embed Settings is Show groups, which determines which groups to show in the Embed. By default only Active groups are shown, but you can also optionally switch to display Active & Future groups. In this way the Embed will continue to respect each future group's visibility settings so that only those future groups set to Show in Embed will be shown. Similarly, the Sign-up button for future groups will only be enabled if a future group's sign-up period is open and the group has available capacity.

Continuing down the Embed settings, the Notifications section is all about being able to designate one or more email addresses that will be notified when someone sign-ups to a group through the Embed, Connect or My ChurchSuite - separate multiple email addresses with a comma. These notifications can, for example, be used for notifying a small group pastor, senior pastor or small group administrator. There's also an option to Mask out sign-up details in notification emails so that a sign-up's contact details are obfuscated in emails, thus ensuring privacy.

If you have added Custom Fields in the Small Groups module's options, you can optional set these Visible in the Embed - custom fields set visible will show on the Embed list and on the group's public-facing Group page.

Next, in the Details Visible section, you can set which small group details are to be hidden in your Embed list...

...optionally hiding details such as the meeting details (day/time/location/custom fields), the group active dates (from and to) and the group description. Note that these details are still visible on the group page - these settings only affect the Embed list and map views, but they apply to all groups in the Embed.

Finally, the Sign up Page section enables you to add a custom message that will be displayed on the group signup page for each group. There are also options to Add Sign-Ups to Flows and to Add new contacts to Flows.

Having completed your embed settings and customising your HTML Embed code, remember to save any changes you have made before navigating away from the module options.

Still need help? Contact ChurchSuite Contact ChurchSuite