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.

Make an editable copy of the code block

Here’s a <3 minute 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.