Build Your Widget Script
Part 1: which events show, and how they are laid out. Your <script> tag updates as you go.
Your PCOWidget API key
Clear
Using demo data (Emmanuel Lutheran Church). Paste your key to preview & build with your own events.
✓ Key saved in browser
Already have a widget? Paste it here to edit or check itNew
Load these settings
Clear
Paste the whole <script> tag from your page. Every setting below fills in to match it, then change what you need and copy the new code at the bottom. Widget not working? Paste it here and anything misspelled or set to a value the widget cannot read is listed, with a fix.
1. What layout do you want?
simple
table
week
list
cards
tiles
2. Which events to show?
All events
Featured only
Non-featured only
4. Filter by campus?New (optional)
Leave blank to show every campus. Name one campus to show only its events, or comma-separate
several to show any of them:
Downtown, Westside . Type the campus names exactly as
they read in your Planning Center
Campus tag group.
How to set campuses up in Planning Center .
Events with no campus tag?
Hide them
Show them on every campus
Events carrying no campus tag at all are usually churchwide. Show them if that is what
yours are, so a campus page still lists the Christmas Eve service. Hide them if untagged
means internal.
5. Rolling 7-day window?
No — show all upcoming
Yes — this week only
6. Include past events?
No — hide past events
Yes — show past events
7. 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.
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
Repeating events: show every date?New
Show every date
Once, for these tags
Once, for every repeating event
If the current month is empty?New
Stay on this month
Look ahead 1 month
2 months
3 months
4 months
5 months
6 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.
Staff pages only. This shows events your church has not published for the public.
Do not use this setting on a page your congregation or visitors can reach.
8. 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.
9 . 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.
10 . Tiles per row? (simple layout)
auto
1
2
3
4
5
6
7
8
When should a tile open its event card?
On a click (recommended)
Also when the pointer rests on it
A tile opens the full event card when it is clicked, like every other layout. You can also have it open when a visitor's pointer pauses on a tile for about half a second, though some visitors find a card appearing on its own surprising. Phones and tablets always open on a tap.
9. Shadow style?
blue
burgundy
standard
11. Add prev/next week navigation?
Available on the simple layout, and on any layout set to this week only.
No
Yes — add week nav
Nav button alignment?
left
center
right
Add an "Ask about these events" button?New
No
Yes, when the Events Assistant is on the page
For churches that also run the CESai Events Assistant. A button under the events opens the assistant with a question about what this widget shows, for example "What is coming up for Women?". On a page without the assistant the button never appears, so it is safe to leave on. The preview here does not show it for that reason.
Show each visitor the events they care about?New
No, everyone sees the same events
Yes, use their saved preferences
When a visitor has picked their interests, campus and days in the Events Assistant's "What matters to me" panel, the widget shows their events first, with a line saying so and a "Show all events" link. Their choices stay in their own browser and are never sent to us. Visitors with no saved preferences see the widget as usual, and this widget's own tag and campus settings always come first.
Style Your WidgetNew
Part 2, optional: colours, font, frame and dark mode. Leave it all as it is for the standard look.
Brand colour
Reset
Buttons, date badges, times, today's date and the event card all follow this colour. Hover and tint shades are worked out for you, and a light colour gets darker text so it stays readable.
Light or dark
Light
Dark mode
Dark mode is for websites with dark pages. Your brand colour still applies, with its shades adjusted so text stays readable on dark.
Font
Widget font
Match my website
A font I name
Frame
Card with shadow
Border only
No frame
No frame lets the widget sit directly on your page, which suits a white or light section. On a dark section, choose Dark mode as well.
Corners
Rounded
Square
Text size
Standard
Larger
Heading above the widget
Show
Hide, my page has its own
Preview it on (preview only, not part of your code)
White page
Light grey page
Dark page
Sans-serif site font
Serif site font
On the free Starter plan the small "Powered by PCOWidget" line stays under the widget, and it takes on your brand colour. The Pro plan removes it.