How to install a livestream button (expert mode)


It's been a while since we went FULL nerd-mode.

Today's the day, ladies & gentlemen. 🤓


This past week, I was asked a question:

"Can you make the livestream button only show up on Sunday mornings?"

Well, of course!

Do I have any idea how to do that? No!

Will I figure it out? Yes!

And I did!

Why do this? We wanted to make a BIG RED BUTTON show up on the homepage of the church's website so that a few older, home-bound members could easily find the link. BUT—we didn't really want this slightly obnoxious button to be there all the time.

I'm assuming you might like to do the same. Perhaps you can think of another use for such a function: maybe a button to join Zoom that only shows up during a teacher's office hours or during Zoom Bible study.

Here is my best crack at teaching you how to use a little code to create a button with a timer in it. No coding experience is required, but you will need to feel very comfortable in your web builder. (And comfortable fiddling around if it doesn't work right away)

Step 1: Make your button. Nothing special—just use a regular old button and link it to wherever you need it to go (Zoom link, YouTube livestream page, etc). Place it where you'd like it.

Step 2: Name your button.

Find somewhere that says "Element ID" or "Element slug." You need to tell your web builder that this button element is named time-restricted-button for the code to work.

Step 3: Find the place where you can infuse some invisible code into your web page.

SquareSpace: Settings > Advanced > Code Injection

Wix: Dev Mode > Select the page > Open masterPage.js

Showit: Select the page > Advanced Settings > Page loaded Javascript

If you're in another web builder, common locations for these settings include:

  • "Custom HTML" or "Embed" elements
  • Site header/footer settings
  • Custom code sections in page settings
  • JavaScript or HTML widgets

Step 4: Decide when you'd like your button to show up. Pick a day of the week and hours in the day.

Then, determine the javascript code that coordinates with your chosen time.

Time in javascript is written in 24-hour intervals. So 10 AM is 10, 12 PM is 12, 1 PM is 13, 7 PM is 19, and so on...

Days of the week have numbers 0-6 assigned to them. Sunday is 0, Monday is 1, Saturday is 6.

Ex: I want my button to show up on Sundays from 10 a.m. to 1 p.m.
So—the numbers I'll need for the code are 0 (Sunday), 10 (10 AM) and 13 (1 PM)

Step 5: Edit the code to include YOUR information.

Here's a <3 min video showing you how to edit the code.

Step 6: Plop it into the space you found in Step 3. Publish your site and refresh the live site to make sure that the button is not showing up (assuming it's not the time that your button should be showing up).

You can edit the code to be the current time if you want to test it in real time. Otherwise, just peek at your site during the time the button is supposed to show up.


Let me know if this worked for you! If you're running into issues, just reply.

Until next week,

Grace Ungemach

I offer digital marketing education written with ministry in mind. Subscribe to my free, weekly newsletter to learn something new every Friday.

Read more from Grace Ungemach

You all have really loved my Pinterest boards for business cards & brochures... It's time to look at a whole bunch of merch inspo. 😍 You'll see a lot of wedding favors and wedding party gifts; these are just there to show you just how many products can be customized these days and get your gears turning. Browse my board The content of this board could be used in a variety of ways: Items on sale to your people so they can "rep" their church or school New visitor gifts Small disposable or...

Sending out Easter postcards? Here are a few ways to squeeze the most possible value out of that pretty significant investment. 1) Incentivize a QR code scan Ideally, try to get the recipient to interact with the mailer. Choose an action that's likely to pique your particular community's interest. Here are a few ideas: Scan for 7 SMS devotions leading up to Easter morning Scan to see the breakfast menu Scan for an email reminder on Good Friday RSVP for the egg hunt on Facebook Scan for Holy...

It took me far too long to learn this: Sometimes when we look at a web page, we can tell that something is off, but we can't put our finger on exactly what. This could be a host of things, but most often it's a problem with the sizes of your text. Either the wrong proportions, too many font sizes, and/or not enough negative space. Today I'll teach you a quick fix that will make your website pages or long-form text look just right. Here's what I mean. Picture these as sections on your website:...