Service Times 1.0 · Install guide

Tell people when to come, and when you’re live.

Service Times shows your next service with a countdown, your weekly times with the specials coming up, and a “We’re live” banner that only appears while you’re streaming. You write your services down once, in a small block of settings, and it works out every week from then on, daylight saving included. Setting it up takes about fifteen minutes.

What you need

• A Squarespace plan that runs JavaScript, which means Core, Plus or Advanced on the current plans, or Business, Commerce Basic or Commerce Advanced on older ones. The Basic and Personal plans don’t run custom scripts, so Service Times can’t work there.
• Your regular service times, and the address of your livestream if you stream. For YouTube, the address youtube.com/@yourchannel/live opens whatever you’re streaming at the time, so it never needs changing.
• Squarespace 7.0 or 7.1. Both work.

Install

1. Edit the page where you want your service times, add a block and choose Code. Leave the mode on HTML and switch “Display source” off.
2. Open paste-into-code-block.html from this download in any text editor (TextEdit or Notepad are fine), copy everything and paste it into the Code block.
3. Near the top you’ll see the settings, between <script type="application/json"> and </script>. Change the example service to one of yours and add the rest (the template below shows every option).
4. The paste shows the next-service card. Change data-service-times="next" to bar, week or live for the other styles.
5. Save, then look at the live page in a private window. Squarespace doesn’t run scripts inside the editor, so you’ll see an empty block while you’re editing.

Your services

Here’s a complete set of settings to copy. Keep the double quotes and the commas between items, because this is JSON. If a word processor turns the quotes curly or you leave a stray comma, Service Times tidies it and still works, and the setup check tells you it did.

{
  "timezone": "Pacific/Auckland",
  "services": [
    { "day": "Sunday", "time": "9:30am", "name": "Family Service", "duration": 75, "location": "Main auditorium", "live": true },
    { "day": "Sunday", "time": "6pm", "name": "Evening Service", "duration": 75 },
    { "day": "Wednesday", "time": "7:30pm", "name": "Prayer and Praise", "duration": 60, "live": true }
  ],
  "specials": [
    { "date": "2026-12-24", "time": "11pm", "name": "Christmas Eve by candlelight", "duration": 60, "live": true },
    { "date": "2026-12-25", "time": "9am", "name": "Christmas Day" }
  ],
  "skips": [
    { "date": "2026-12-27", "name": "Evening Service", "note": "Summer break" }
  ],
  "livestream": { "url": "https://www.youtube.com/@yourchannel/live", "before": 10, "after": 15 },
  "address": "12 Beacon Lane, Harbourlight Bay",
  "links": [ { "label": "Plan a visit", "url": "/plan-a-visit" } ]
}

Weekly services

Each service needs a day and a time. Days can be written in full or short (Sunday, Sun), and te reo Māori day names such as Rātapu work too. Times can be 9:30am, 6pm or 18:00. A bare 6 could be morning or evening, so Service Times asks you to say which. Add a name, a duration in minutes (an hour if you leave it out), a location such as the room, and "live": true for services you stream.

Specials and skips

Specials are one-off services with a date written like 2026-12-24, plus a time and name as above. On a special’s day the usual services don’t happen, which is what you want for Christmas Day or a combined service. To keep some of them, add "replaces": "Evening Service" (or a list of names), or "replaces": "none" to keep them all.

Skips take a single week off. Give the date and the name of the service that isn’t on, or leave the name out to skip every service that day. A note such as “Summer break” shows in the Coming up list.

The livestream

Set livestream.url to where people watch. The live banner and the Watch live button appear from before minutes before a service marked live starts (10 if you leave it out) until after minutes after it ends (15). The timing comes from your schedule, so Service Times can’t tell whether the stream itself has started, and it’s worth starting yours on time.

Time zones and daylight saving

Times are worked out in your own time zone, so when the clocks change in April and September the services stay at 9:30. If you leave timezone out, Service Times uses your Squarespace site’s own time zone (Settings, then Language and region). Time zones look like Pacific/Auckland or Europe/London. Visitors whose clocks are set somewhere else see an extra line on the card, such as “That’s 1:30 pm your time.” Add "yourTime": false to turn that off.

Directions and links

With an address, the card gets a Directions button that opens Google Maps. A service or special held somewhere else can have its own address. If you’d rather link to a map of your own, use "directions": "https://…". The links show on the card, and the first one on the slim bar.

The four styles

Using it in more than one place

You can show the bar on every page and the card on your home page without typing your services twice. Paste paste-into-code-injection.html into Settings, Advanced, Code Injection, Header, and add your settings there once, marked as shared:

<script type="application/json" data-service-times-config>
{ "services": [ … ], "livestream": { … } }
</script>

Then each Code block only needs its own line, such as <div data-service-times="bar"></div>. A block with settings of its own inside it uses those instead.

Run the setup check

Add ?services=check to the end of the page address. A panel appears above each Service Times block showing the time zone and where it came from, your weekly services, specials and skips, the livestream window, your next six services with their dates, and when the next live window opens. Underneath is a plain list of anything to fix, such as a day or time it couldn’t read, a skip that doesn’t match a service, or services marked live with no stream address. Visitors never see the panel unless they type that address themselves.

To see the live banner without waiting for Sunday, add ?services=live instead. The page then shows itself as it will look a few minutes into your next streamed service.

Options

On the <div> line:

In the settings:

Changing the wording

Every label can be changed, which is handy for other languages or your own words. Put this in the Code block above the rest of the paste and change only the lines you want:

<script>
window.ServiceTimesStrings = {
  next: 'Next gathering',
  live: 'Live now',
  watch: 'Join online',
  addToCalendar: 'Save the date',
  yourTime: 'That’s {time} where you are.'
};
</script>

Words in curly brackets, such as {time}, are filled in by Service Times, so keep them. If you’d like the full list of labels, email me and I’ll send it.

Troubleshooting

The block is empty while I’m editing

That’s normal. Squarespace doesn’t run scripts in the editor. Check the live page in a private window.

It says “Service times are being updated”

That’s all visitors see when the settings can’t be used, which usually means a missing comma between two services or a missing quote. Open the page with ?services=check on the end and the panel says what’s wrong and which line it got stuck on.

The times are an hour out

Check the time zone in the setup check. If it isn’t yours, set "timezone" in the settings or correct your site’s time zone in Squarespace’s Language and region settings.

The live banner never shows

It needs a livestream address and a service marked "live": true, and it only shows inside that service’s window. The setup check says when the next window opens, and ?services=live shows you the banner straight away.

There’s no Directions button

Add your street address as "address" in the settings.

Add to calendar on phones

On an iPhone, the .ics option opens the event in Calendar. On Android, Google Calendar is usually the better choice. Both add just that one service.

Squarespace 7.0 with Ajax loading

Some 7.0 templates load pages without a full refresh. Service Times listens for that, but if it only appears after a reload, turn off Ajax loading under Design, Site Styles.

Updates and help

Updates for the 1.x versions are free. When one comes out you’ll get an email with the new files, and you replace the old paste with the new one. Keep your settings block, because that’s where your services live.

If you get stuck, email kris@singhstudio.co.nz with your page address and what you’re seeing. A screenshot of the ?services=check panel helps a lot.