Embed small group lists and maps in your website
In this article
ChurchSuite enables you to put small group lists and maps directly into your church website, allowing visitors to quickly and easily find the group that's most suitable for them, and even sign-up. Using the in-built HTML Embed Code generator, embeddable lists and maps can be customised, allowing you to produce embeddable content for different purposes or sections in your website.
The embeddable map includes optional "day" and "tag" filters to help your website visitors see appropriate groups. There's also an address/postcode search field - when website visitors enter an address/postcode in the field and search, the map zooms and centres to that location so that they can see which groups are geographically closest.
The embeddable list includes optional "day" and "tag" filters too, to help your website visitors see appropriate groups.
Embedding your small group lists and/or maps
Whilst this article explains the process to enable, customise and deploy small group embed functionality, a further article explains how to enable sign-up on each of your groups. For further information, see the related article "Enabling small group sign up through your website" linked at the end of this article.
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. Next, 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 option, the embed HTML code will become visible.
You can preview the map embed and group list embed using the "Preview" button. If you are happy with the preview you can now simply copy and paste the embed code provided into the "source code" section of the appropriate page in your web site. However, for those wishing to customise the embed content, read on, as the following section will be helpful.
Customise your small group embed content
As shown in the previous image, click the "Customise" option. The Customise Embed HTML window opens.
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 is updated accordingly. This 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 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 and therefore revert back to the default Embed HTML code whenever the Embed page is re-opened. We suggest working in multiple browser tabs as you 'preview' and experiment with your HTML generated code until you achieve the customisation you want, and to only close the module settings page once you have copied and pasted your embed code.
Let's explore each of the embed customisation options.
- Filter by Tags allows 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) allows 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 option is not visible is multi-site has not been enabled.
You have a wide range of colour styling options so that your embedded list or map blends with 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 see the updated HTML embed code.
You can 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 section of the appropriate page(s) in your website.
Other Embed settings
Returning to the Embed options in the module settings, you can configure a number of other embed-related small group settings.
Directly under the Group List embed code box is the option to choose which groups to show in the Embed. By default only active groups are shown, but you can also optionally toggle to display future groups too if you wish. In this way Embed will continue to respect each future group's visibility settings, so only those future groups set as "Show in Embed" will be shown. Similarly, the sign-up button for future groups will only be enabled if the future group sign-up period is open and the group has spaces.
Continuing on to the Notifications section, here you can designate one or more email addresses that will be notified whenever someone sign-ups to a group through the Embed, Connect or My ChurchSuite. Separate multiple email addresses with a comma. These notifications can be used for notifying a small group pastor, senior pastor or small group administrator. There's also an option to obfuscate or partially mask a sign-up's contact details included within notification emails, perhaps for privacy.
If you have created Custom Fields in the Small Groups module options, you can set these visible in your Embed group lists - custom fields set visible will show on the embed list and the group page URL.
Next, you can set which small group details are visible in your embed lists...
...optionally hiding certain 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.
The Sign-up Page section allows you to set a custom message that will be displayed on the group sign-up page for each group.
Finally, you have the option to add embed sign-up contacts into a Flow. Remember that group sign-ups not matched to your Address Book and added with a 'pending' status, while added to the Flow, will not be able to be processed through the Flow until they are set "active".
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.