Build Your Widget Script

Answer the questions — your <script> tag updates as you go.

Your PCOWidget API key

Using demo data (Emmanuel Lutheran Church). Paste your key to preview & build with your own events. ✓ Key saved in browser

1. What layout do you want?

simple table week list cards tiles

2. Which events to show?

All events Featured only Non-featured only

3. Filter by tag? (optional)

Leave blank for all tags. Comma-separate for OR: Youth, Women's Ministry

4. Rolling 7-day window?

No — show all upcoming Yes — this week only

5. Include past events?

No — hide past events Yes — show past events

6. Show end time?

Yes — show start & end No — start time only

Hide widget if no events match?

No — show empty message Yes — hide completely

When hidden, no box or space appears on the page. Useful for tag or this-week filtered widgets.

Custom "no events" messageNew

Shown when nothing matches. Leave blank for the default wording. Not used when the widget is set to hide completely.

Which tags should be visible?New

Enter a Planning Center tag group name (such as Campus) to show only the tags in that group, or list individual tag names separated by commas. Enter 0 to hide tag chips entirely. This only changes which tags are visible, never which events appear.

Gather several months into one set?New

No, navigate month by month Next 1 month 2 months 3 months 4 months 6 months 12 months

If the current month is empty?New

Stay on this month Look ahead 1 month 2 months 3 months 4 months

Jumps to the next month that has events, so a visitor arriving late in the month still sees what is coming up. The month heading follows the jump. Applies only when someone first lands on the page: once they click the month arrows they get exactly the month they asked for.

Which events should appear?New

Published only (recommended) + Approved + Pending + Rejected

Approved and published to Church Center. This is the right setting for a public page.

7. How many events?

events (leave blank for all)

Blank shows every event in the month or week displayed. Set a number only if you want a deliberately short list.

8. How many rows? (list, cards, tiles, simple)

rows (leave blank for all)

Caps the height of the widget instead of the event count. On cards, tiles, and simple a row is as wide as your tiles-per-row setting, so 2 rows at 4 per row shows 8 events.

9. Tiles per row? (simple layout)

auto 1 2 3 4 5 6

8. Shadow style?

blue burgundy standard

9. Section heading? (optional)

10. Add prev/next week navigation?

No Yes — add week nav

Nav button alignment?

left center right

Your script tag

Live Preview

◯

Widget is hidden — no events matched your filters.
This is because data-hide-if-empty="true" is set.
On a real page the widget takes up zero space.

Preview runs the real widget JS, exactly as it appears embedded on a page. It is held to about one screen, like a real browser window, so scroll inside it to see the rest of a busy month.
Just changed something in Planning Center? Give it about a minute, then refresh. Why?