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-church-info>) where you want them - The script fetches data from Firesky API routes
- The API validates the request origin and returns data for your church
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-church-info></fs-church-info>
<fs-prayer-wall></fs-prayer-wall>
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
Fully Implemented
| Widget | Element | What it does | Works with |
|---|---|---|---|
| Church Info | <fs-church-info> | Displays church name, address, service times, contact info, and social links | Firesky |
| Prayer Wall | <fs-prayer-wall> | Community prayer request wall; visitors submit and pray for requests | 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 |
| 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 |
| Custom Form | <fs-custom-form> | Embeds a Ministry Platform form by GUID | Ministry Platform |
| Test Widget | <fs-test-widget> | Shows your church name — use to verify embed setup | Firesky |
Coming Soon
These widgets are scaffolded and will be available in a future release:
| Widget | Element | What it will do |
|---|---|---|
| Church Articles | <fs-church-articles> | Announcements and articles |
| Event Calendar | <fs-event-calendar> | Calendar view of church events |
| Event Finder | <fs-event-finder> | Search and browse upcoming events |
| Event Registration | <fs-event-registration> | Register for church events |
| Group Finder | <fs-group-finder> | Search and browse small groups |
| My Contributions | <fs-my-contributions> | Personalized giving history (requires People Login) |
| My Groups | <fs-my-groups> | Personalized group membership (requires People Login) |
| My Household | <fs-my-household> | Personalized household view (requires People Login) |
| Opportunity Finder | <fs-opportunity-finder> | Volunteer and serving opportunity discovery |
| Staff Listing | <fs-staff-listing> | Church staff directory |
| Team Badges | <fs-team-badges> | Team and ministry member badges |
Styling
Widgets render inside Shadow DOM by default, keeping their styles isolated from your site. To customize:
-
Host element — Set layout, spacing, and size on the tag itself:
fs-prayer-wall { margin: 2rem 0; display: block; } -
CSS variables — Theme the widget by setting design tokens on the custom element:
fs-prayer-wall { --primary: #1a472a; --primary-foreground: #fff; --font-sans: "Your Font", system-ui, sans-serif; --radius: 0.5rem; } -
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.