Embed a widget on your existing website

This guide shows you how to put a MapleGather surface onto a website you already run. You can embed your event calendar, member directory, donation form, member application, or blog. Visitors then use it without leaving your site. You do this in two parts: create a widget, then paste a short snippet of code into your site.

Who can do this: Admins with the Web Editor role. Without it, the New widget button won’t appear.

Before you start

Know which surface you want to embed — events, your directory, a donation form, the member application, or your blog.
Know the web address of the site where the widget will appear (for example, https://www.riversidegarden.org). You can be signed in to that site’s editor in another tab.
If you’re embedding a directory, donation form, or member application, that surface needs to exist first (a directory, a donation form, or a membership level).

Steps

In the left sidebar, select Website, then Widgets.
Select New widget.
Under Widget type, choose the surface you want to embed: an event calendar, a member directory, a donation form, a member application, or a blog list.
If you chose a member directory, donation form, or member application, use Target to choose which directory, form, or level the widget shows. (Event calendars and blog lists cover your whole site, so they have no target.)
In Name, type a name so you can find this widget later. Visitors never see this name — it’s just for you.
Set your display options for this type — for example, an event filter, the directory fields to show, or a blog category. Leave Inherit site theme turned on so the widget matches your site’s colors and fonts. For the details of each type, see Configure each type of widget.
Under Allowed origins, type the web address of the site where the widget will appear, then select Add. Add every site that will show this widget. If your site answers at both https://www.yoursite.org and https://yoursite.org, add both.
Select Create widget. MapleGather saves the widget and generates your embed snippet.
In the Embed snippet section, select Copy snippet.
Open your website’s editor, go to the page where you want the widget, and paste the snippet into a spot that allows custom HTML (see Where to paste the snippet below).

Verify

You’ll know it worked when the widget appears on your own site at the spot where you pasted the snippet — showing your events, directory, donation form, application, or recent posts in your site’s colors. In MapleGather, the widget shows in your Widgets list with an Active status.

Where to paste the snippet

The snippet is two lines: a container and a <script> loader. Paste both into a block that accepts raw HTML. Where that block lives depends on your website tool:

WordPress — add a Custom HTML block to the page or post (block editor), or a Custom HTML widget in a sidebar or footer. Avoid pasting into the visual editor, which can strip the <script> tag.
Squarespace — add a Code block to the page and paste the snippet into it.
Wix — add an Embed HTML element (Embed Code → Embed HTML) and paste the snippet.
Webflow — drag an Embed element onto the page and paste the snippet, then publish the site.
Hand-rolled HTML — paste both lines directly into your page’s HTML where you want the widget to appear.

If your tool has both a “visual” and an “HTML/code” mode, always paste in the code mode so the <script> line survives.

If something goes wrong

The widget shows “This content isn’t authorized to appear on this site.” — the site’s address isn’t on the widget’s allowed sites list. See Fix “Embed not authorized”.
“Couldn’t copy — select the snippet and copy it manually” — your browser blocked the copy. Select the snippet text in the box and copy it yourself. The snippet is safe to copy as many times as you need.
The widget doesn’t appear at all — check that you pasted into a block that allows custom HTML (not a plain-text or visual-only field), and that you pasted both lines of the snippet.