WidgetsUpdated Nov 3, 2026Firesky

Staff Directory

Staff Directory shows your church's staff and leaders with photos, roles and teams. You keep it up to date in the dashboard, even from your phone, and it shows on your site in your church's style. When someone joins or leaves, change it once and every page updates.

Live preview

It's on the Website plan.

Supported providers

Firesky: people, teams and photos are kept in Firesky. No ChMS is needed.

Setup

Add Staff Directory from Add widgets.
Open Dashboard → Widgets → Staff Directory → Manage.
Under People, add each person: photo, name, title, teams, bio, email, phone and extension. Tap the face on the photo so it stays centered in any crop. Use the up and down arrows to set the order.
Under Teams, add teams like Pastors, Kids, Worship or Elders. Mark each one a Department or a Campus.
Under Fields, add anything else you want to show, like Favorite verse or Joined in. Types: text, long text, email, phone, link and year.
Under Directories, build how your page looks (see Saved directories), or use a preset.
Add your website to Dashboard → Settings → Allowed origins, then add the embed code to your page.

Embed

html

<fs-staff-listing></fs-staff-listing>

With no attributes, it shows your church's default directory. If you haven't saved one, it shows everyone in a grid under "Our Team".

Optional attributes

Attribute	Description	Default
`directory`	A saved directory's embed name, like `youth`. If it doesn't exist, your default directory shows.	Your default directory
`preset`	A ready-made page layout. See Presets.	None
`sections`	Your own sections as JSON. See Sections.	None
`heading`	A heading above the directory. With `layout` and the attributes below, it's the section title. An empty value hides it.	"Our Team"
`layout`	One simple section: `grid`, `list`, `compact` or `featured`.	`grid`
`team`	Only these teams, by the team's embed name. Comma-separated: `pastors,elders`.	Everyone
`group-by-team`	`true` or `false`. Show people under team headings.	`true` when more than one team has people
`show-bio`	`false` hides bios. Cards still open for contact details.	`true`
`columns`	Most columns in a `grid`, 2 to 4.	Picked for you

If an embed has more than one of these, the first one wins: sections, then preset, then directory, then the simple attributes (layout, team, group-by-team, heading, show-bio, columns), then your default directory.

Saved directories

A directory is a stack of sections, saved under a name: "Staff page", "Youth staff", "North campus". Build one in Manage → Directories:

Click Add directory and give it a name. Its embed name is made from the name.
Add sections: Spotlight, Grid, List or Compact, or start from a preset.
Tap a section to set its title, layout, which teams it shows, featured people only, everyone not shown above, grouping, columns, card fields, photo shape, search, team filters, A to Z, and a "We're hiring" card.
Watch the preview update with your real people as you go, then save.
Turn on Use as default for the one that should show when an embed doesn't name a directory.

The embed code for each directory sits under its preview:

html

<fs-staff-listing directory="youth"></fs-staff-listing>

Presets

Preset	What it shows
`church-staff-page`	Featured people in a large spotlight, then Elders in a grid of circle photos, then everyone else in compact rows by department
`youth`	People on the `youth`, `students` and `kids` teams in portrait cards, with a Favorite verse field if you add one
`directory`	One table (role, department, email, phone, extension) with search, team filters and A to Z
`campuses`	Everyone grouped by campus, in tabs
`photo-cards`	Portrait cards with the name over the photo
`departments`	A list grouped by department, in an accordion, with search

html

<fs-staff-listing preset="church-staff-page"></fs-staff-listing>

Simple layouts

For one section without a saved directory:

Layout	What it shows
`grid`	Cards with a square photo, name and title. Tap one for the bio and contact details.
`list`	One row per person: small round photo, name, title, team and contact.
`compact`	Name and title with a small photo.
`featured`	One large card per person, photo beside the bio. For one to three pastors.

html

<fs-staff-listing layout="featured" team="pastors" heading="Our Pastors"></fs-staff-listing>
<fs-staff-listing layout="grid" team="kids" columns="3" heading="Kids Ministry"></fs-staff-listing>

Find each team's embed name in Manage → Teams under For embeds.

Sections

For full control, the sections attribute takes a JSON list of sections. Anything you leave out uses the layout's defaults. Most churches can use a saved directory instead.

html

<fs-staff-listing sections='[
  { "title": "Our Pastors", "layout": "spotlight", "filter": { "groups": ["pastors"] } },
  { "title": "Our Staff", "layout": "compact", "filter": { "excludeShown": true }, "groupBy": "department" }
]'></fs-staff-listing>

Setting	Values
`layout`	`spotlight`, `grid`, `list`, `table`, `compact`
`filter`	`groups` (team embed names), `featuredOnly`, `excludeShown` (everyone not in an earlier section)
`groupBy`	`none`, `department`, `campus`, `auto`
`groupStyle`	`headings`, `tabs`, `accordion`
`columns`	A number, or `{ "phone": 1, "tablet": 2, "desktop": 4 }`
`card.fields`	In order: `title`, `bio`, `email`, `phone`, `extension`, `teams`, `department`, `campus`, or a custom field's name
`card.image`	`shape` (`circle`, `square`, `portrait`), `position` (`top`, `left`, `background`), `fallback` (`initials`, `silhouette`, `none`)
`visitor`	`search`, `filter`, `az` (each `true` or `false`)
`hiring`	`show`, `label`, `url`: a "We're hiring" card that links to your jobs page

A page can have up to 12 sections. If the JSON can't be read, your default directory shows instead.

Notes

Private fields stay private. Each field on a person has an eye toggle. A hidden field is never sent to your website, so it can't be copied from the page.
Email is off by default. Turn it on for a person to show an Email button. The address isn't printed on the page.
Phone shows as a tap-to-call button. The extension shows only with the phone number.
Start and end dates: people show only between their dates, so new hires appear and departures disappear on their own. Turn off Show on your site to hide someone without deleting them.
Featured people can lead a page, like a lead pastor spotlight.
Link to one person: add #staff- and their name to the page address, like /staff#staff-sam-lee, to open their details.
Search engines: the widget adds each person's name, title and photo to the page in a format search engines read. Hidden fields are left out.

Requirements

The Staff Directory widget on your church (Website plan)
At least one person in Dashboard → Widgets → Staff Directory → Manage
Allowed origins in Dashboard → Settings → Allowed origins
The Firesky widget script installed on the page