Widgets Overview
Widgets are embeddable components that churches add to their websites. They display data from Firesky or your CHMS (Ministry Platform, Planning Center). The church is identified by request origin — the domain where the widget is embedded.
How It Works
- Add the Firesky script to your site
- Place widget custom elements (e.g.
<fs-prayer-wall>,<fs-firesky-forms>) where you want them - The script fetches data from Firesky API routes
- The API validates the request origin and returns data for your church
From Dashboard → Widgets you can browse Firesky-hosted and provider-hosted widgets, add them to your church, and get embed snippets. Manage where widgets are allowed to run under Allowed origins.
Setup
1. Allowed Origins
In Dashboard → Widgets → Allowed origins, add each domain where the widget will be used (e.g. https://mychurch.org). Requests from any other origin receive 401.
2. Embed the Script
Add this in your <head> or top of <body>:
<script id="FireSkyWidgets" src="https://www.thefiresky.com/widgets.js"></script>
The loader is ~2 KB and only loads scripts for the widgets actually used on each page.
3. Use Custom Elements
Place widget elements where you want them:
<fs-prayer-wall></fs-prayer-wall>
<fs-firesky-forms form-id="your-form-uuid"></fs-firesky-forms>
Hosting Sources
- Firesky-hosted — Data stored in Firesky. Available to all churches.
- CHMS-hosted — Data fetched from Ministry Platform or Planning Center. Available only to churches with that CHMS configured.
Each widget doc lists its supported providers.
Available Widgets
These widgets are available in the embed loader and have dedicated setup docs.
| Widget | Element | What it does | Works with |
|---|---|---|---|
| Prayer Wall | <fs-prayer-wall> | Community prayer request wall; visitors submit and pray for requests | Firesky |
| Giving | <fs-giving> | One-time and recurring donations through Firesky giving | Firesky |
| Firesky Forms | <fs-firesky-forms> | Embed custom forms managed in Dashboard → Forms | Firesky |
| Media Library | <fs-media-library> | Sermon/media library with series grouping and video playback | Firesky |
| Google Calendar | <fs-google-calendar> | Display connected Google calendars in month, week, or agenda views | Firesky |
| User Badge | <fs-user-badge> | Shows a person's name and photo from your CHMS | Ministry Platform, Planning Center |
| User Login | <fs-user-login> | Ministry Platform OAuth login button for your website | Ministry Platform |
| People Login | <fs-people-login> | Firesky-native login for congregation members | Firesky |
| My Household | <fs-my-household> | View and manage household info (requires User Login) | Ministry Platform |
| My Groups | <fs-my-groups> | Signed-in user's Ministry Platform group memberships | Ministry Platform |
| My Giving | <fs-my-giving> | Signed-in donor giving history, totals, and program breakdowns | Ministry Platform |
| My Invoices | <fs-my-invoices> | Signed-in user's invoices with optional pay-balance links | Ministry Platform |
| My Contribution Statements | <fs-my-contribution-statements> | Contribution statement downloads and paperless preferences | Ministry Platform |
| My Subscriptions | <fs-subscriptions> | Publication subscriptions and bulk email preference management | Ministry Platform |
| Custom Form | <fs-custom-form> | Embeds a Ministry Platform form by GUID | Ministry Platform |
| Job openings | <fs-job-openings> | Lists MP job positions and applies via MP custom form | Ministry Platform |
| Group Finder | <fs-group-finder> | Search and browse Ministry Platform groups | Ministry Platform |
| Group Details | <fs-group-details> | Embed a single Ministry Platform group by ID | Ministry Platform |
| Event Finder | <fs-event-finder> | Search, browse, and register for Ministry Platform events | Ministry Platform |
| Featured Events | <fs-featured-events> | Display featured Ministry Platform events | Ministry Platform |
| Event Details | <fs-event-details> | Embed a single Ministry Platform event by ID | Ministry Platform |
| Opportunity Finder | <fs-opportunity-finder> | Search and browse Ministry Platform volunteer opportunities | Ministry Platform |
| Opportunity Details | <fs-opportunity-details> | Embed a single Ministry Platform volunteer opportunity by ID | Ministry Platform |
Styling
Widgets render inside Shadow DOM by default, keeping their styles isolated from your site. The recommended customization path is Dashboard → Settings → Design, where church admins can manage:
- Colors, including primary, accent, background, text, muted, border, success, warning, and destructive colors
- Heading and body fonts, base font size, heading weight, and letter spacing
- Corner radius, spacing density, shadows, and button style
See Customizing Widget Appearance and Widget Design Settings for the full guide.
If you need page-level overrides:
-
Host element — Set layout, spacing, and size on the tag itself:
fs-prayer-wall { margin: 2rem 0; display: block; } -
CSS variables — Theme a specific widget by setting design tokens on the custom element:
fs-prayer-wall { --fs-color-primary: #1a472a; --fs-color-primary-foreground: #fff; --fs-font-body: "Your Font", system-ui, sans-serif; --fs-radius-lg: 12px; } -
Without Shadow DOM — Add
data-firesky-shadow="false"to the script tag to render in the light DOM. This lets your site's CSS affect the widgets, but widgets may also affect your page styles.