WidgetsUpdated Feb 27, 2025
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.
<test-widget>,<user-badge>) 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 → Settings, 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>
3. Use Custom Elements
Place widget elements where you want them:
<test-widget></test-widget>
<user-badge id="94810"></user-badge>
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
| Widget | What it does | Works with |
|---|---|---|
| Test Widget | Shows your church name on the page | Firesky |
| User Badge | Shows a person's name and photo from your CHMS | Ministry Platform, Planning Center |
Click a widget name to see setup instructions and embed code.
Styling
Widgets inject their own Tailwind-based styles. To customize:
- Target the custom element:
user-badge { font-size: 1rem; } - Target the wrapper:
user-badge .fs-widgetor[data-firesky-widget]