Embed small group lists and maps in your website
In this article
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
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 Options tab.
Next you will see two embed Settings - Enable map embedding and Enable list embedding. Click Edit and tick to enable the functionality.
Enabling an embed setting will surface the respective Groups Map and Groups List default embed HTML code. You can Preview the Map and List embed. If you are happy with the preview you can 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, for map and list in turn, click the Customise option to open the Embed options pop-up.
The options in the the Embed options pop-up (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 Embed options 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 Tag 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 customers) 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 pop-up and view/preview the updated HTML embed code.
You can adjust the height and width of the Embed iFrame by manually editing the 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 your website page. Note that some website management systems remove % 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.
In the Settings section, theShow Groups setting determines which groups to show in the Embed. Click Edit to make changes. 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 surfaced if a future group's sign-up period is active and the group has available capacity.
Next, in the Details Visible section, you can set which small group details are to be shown in your Embed list. Click Edit to make changes...
..optionally hiding details such as the meeting Details (day/time/location/custom fields), the group Description and the group active Dates (from and to). Note that these details are still visible on each group's group page - these settings only affect the embed List and Map views and apply to all groups in the Embed.
Switching to the Group Page Options tab, which cover all the settings related to the group pages people see when they click through to a group from your embedded List or Map...
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 group page - whether that was access from Embed, Connect or My ChurchSuite. Click Edit to make changes. Separate multiple email addresses with a comma. Note that there's also an option to Mask out sign-up details in those notification emails, so that a sign-up's contact details are partially-obfuscated in the emails, thus ensuring privacy.
Next, optionally specify the Flows that All sign-ups or New contacts are assigned to when they sign up for a group via the group page. Click Edit to make changes.
Finally, you can optionally add Custom Information to every group page - adding a Title and custom Message. Click Edit to make changes.