Open for Business?

Imagine an outdoor venue that is open or closed based on the weather. Each day, the Duty Manager has to decide whether the venue can open and having decided, they need to notify their customers and their staff.

They needed to figure out a way that the Manager could post an open or closed sign on their website without becoming a website administrator! Here's our quick solution using nothing more than a free Firebase account.

 

Want to see it in action?

The demo that we created below is available online if you want to test it out. Open the home page on your desktop here. Then, open the Duty Manager's page on your mobile (or in a different browser window) at http://bedford-dev.squarespace.com/set. The password for both pages is 'a'.

When you click the buttons on the Duty Manager's page, the message on the home page is automatically updated. This is a simplified example that shows how to do the basics but you'll still find it quite a trek to follow this project if you don't have coding experience. 

If you want a more professional solution for your Squarespace site, and you want some help please contact us for our development rates.

 

What's Firebase?

Firebase is a real-time cloud database that can be synchronised across multiple clients. It was produced by a company of the same name in 2012 and was then acquired by Google.

It's comparatively simple to use because you can access it from any website.

 

What's involved?

There are several steps to this project. In summary they are:

1. Create a database field in Firebase (may include creating a Google account if you don't have one already).

2. Set security on the database field.

3. Add a link to the Firebase library to your Squarespace site.

4. Add a Page to your Squarespace site in case of errors.

5. Add a Page to your Squarespace site for the Duty Manager.

6. Set a Page Password on this Page.

6. Add two Code Blocks to the page to create buttons for the Duty Manager.

7. Add some CSS to style the buttons.

8. Add a Code Block to your Squarespace home page to display the open/closed status of your business.

If all that makes sense, let's crack on.

 

Create a Firebase Database

1. Go to Firebase (now owned by Google) to create a free account.

Firebase Home Page

Firebase Home Page

2. Click GET STARTED FOR FREE.

3. Sign in using your Google account. If you don't have one, you can create one (for free).

4. Create a Database. To do this you just need to give it a unique name. For this demonstration we created one called "OpenClosedDemo". Our database is therefore accessed at https://opencloseddemo.firebaseio.com

5. On the Firebase menu (down the left side) click Database. In the right-pane you'll see the name of your new database (in our case that's OpenClosedDemo) and beside it you'll see the value 'null'. Null just means that we haven't set a value for the data yet.

The last thing we need to do is to set some security rules so that the value can be changed from your website. During development we will set your database to publicly readable and writable. This is useful for prototyping, as you can get started without setting up Authentication. 

6. For testing, change the rules to:

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

7. Click PUBLISH.

You'll want to change these rules when you've tested it successfully. The rules above make it possible for anyone to change the status from anywhere. I've deliberately set it up this way to make testing easier and my demo site is the same so that anyone can change the values without needing a password. If I published the password, that would defeat the object!

That's it. You've created your first Firebase database! You can now log on to your Squarespace site and add the database to it.

 

Adding Firebase Library

1. Log on to the CMS of your website.

2. In Settings > Advanced > Code Injection, add the following to the header:

<script src="https://cdn.firebase.com/js/client/2.2.7/firebase.js">
</script>

This will enable the Squarespace site to read and write to your Firebase database.

 

Creating an Error Page

First we are going to create a simple page to send users to if the code doesn't work. This may sound like a strange place to start, but it will make testing easier later.

1. Create a new (normal) Page in the NOT LINKED section of your site. You can call it anything you like, but you must ensure that the URL for this page is 'no-js'. If you call the page "No JS" it will be given the correct URL. You can call it something else but you'll need to change the URL in the Page Settings

2. Put the page in Edit mode and give the page a title such as "Javascript not enabled".

3. Add text to the first Text Block that explains why the page exists. For example, "You have reached this page because javascript is not enabled in your browser". 

4. Save the Page.

 

Creating the Duty Manager page

Next let's create the page that the Duty Manager will use to post a message about whether the venue is open or closed. As Squarespace sites are responsive, they'll be able to access this from their mobile phone. 

1. Start by creating a new (normal) Page in the NOT LINKED section of your site. You can call it anything you like; in this demo I called mine 'Set'.

2. In the settings for this page, set a password of your choice so that only the managers can access it.

3. Put the page in Edit mode and give the page a title and a quick explanation. 

4. Below the title/text, add a Code Block.

5. Replace the default Code Block content ("Hello World!") with the following:

<div id="myStatusContainer">
  <h2>
    We are <span id="openStatus">[updating]</span> today
  </h2>
</div>

6. Save the Code Block. This will create an area to that shows the manager the current status of the business, i.e. open or closed.

7. Add a second Code Block and replace the default content with the following:

<div id="openButton">
    <a id="myOpenButton" class="myButton" href="/no-js" onclick="javascript:setOpen();return false;">Open</a> 
</div>
<div id="closedButton">
    <a id="myClosedButton" class="myButton" href="/no-js" onclick="javascript:setClosed();return false;">Closed</a> 
</div>
<div id="undecidedButton">
    <a id="myUndecidedButton" class="myButton" href="/no-js" onclick="javascript:setUndecided();return false;">Undecided</a> 
</div>

8. Save the Code Block and thes save the Page. The code has created three links described as Open, Closed and Undecided. Each link calls a javascript function but if the function doesn't exist, or javascript is not enabled on the visitor's browser, it sends them to the page we created earlier with the link '/no-js'. 

Your page should now look something like this (depending on the text you entered):

Next we'll add the CSS to style the two code blocks.

9. Go to Design > Custom CSS. Add the following code to the Custom CSS area:

/* Styling of control buttons for open/closed setting */
/* Centre the buttons */
.buttonContainer {
  text-align: center;  
}
/* Style the links as buttons */
.myButton {
    padding: 21px 34px;
    line-height: 5.3em;    
    letter-spacing: 1px;
    color: #fff;
}
/* Make OPEN button green */
#myOpenButton {
  background-color: green;
}
/* Make CLOSED button red */
#myClosedButton {
  background-color: red;
}
/* Make UNDECIDED button amber */
#myUndecidedButton {
  background-color: #F9A924;
}

/* Style the open/closed status label */
#myStatusContainer {
  text-align: center;
  background: #ccc;
  padding: 10px;
  margin: 0 20%;
}

Once you add this, the links should resemble the image below. 

Sample Duty Manager Page

The CSS has styled the three links in the second code block to look like Squarespace buttons. 

10. Save the Page.

If you click any of the buttons you should be sent to the 'No JS' page. This is not an error - it's just because we haven't added the Javascript yet. The code will be needed to save the correct business status in the Firebase database.

 

Adding the Javascript

We're now going to add the code that does the work behind the scenes on the Duty Manager's page.

Settings menu shown over page

1. Whilst viewing the Duty Manager page, click SETTINGS on the popup menu to show the settings for this page.

2. Click ADVANCED to show the PAGE HEADER CODE INJECTION area.

3. Paste the following code into this area:

<script type="text/javascript">
  var myFirebaseRef = new Firebase("//opencloseddemo.firebaseio.com");  
  
  myFirebaseRef.child("OpenClosedDemo").on("value", function(snapshot) {document.getElementById("openStatus").innerHTML = snapshot.val();  });    
  
  function setOpen() {  
    myFirebaseRef.set({OpenClosedDemo: "Open"});   
  }  
  function setClosed() {  
    myFirebaseRef.set({OpenClosedDemo: "Closed"});   
  }
  function setUndecided() {  
    myFirebaseRef.set({OpenClosedDemo: "checking if we can open"});   
  }  
</script>

This code provides a link to the Firebase database that you setup earlier. In the code above, the URL is //opencloseddemo.firebaseio.com.

4. Change this URL to match the database you created.

5. Save the settings. The page will reload. 

The 'buttons' should now work. When you click one of them, the status at the top of the page should change. You shouldn't get redirected to the 'No Javascript' page.

 

Adding the status to the home page

There's just one step remaining! We need to add the status message to the home page. If you've made it this far, this last step is pretty simple because we've already used this code once. 

1. Open the home page and place it in Edit mode.

2. Add a Code Block to the top of the page.

3. Replace the default Code Block content with the following:

<div id="myStatusContainer">
  <h2>
    We are <span id="openStatus">[updating]</span> today
  </h2>
</div>

4. Save the Code Block and the Page.

5. Click SETTINGS on the popup menu to show the settings for the home page.

6. Click ADVANCED to show the PAGE HEADER CODE INJECTION area.

7. Paste the following code into this area:

<script>
var myFirebaseRef = new Firebase("//opencloseddemo.firebaseio.com");
 myFirebaseRef.child("OpenClosedDemo").on("value", function(snapshot) {document.getElementById("openStatus").innerHTML = snapshot.val();  });
</script>

8. Change the URL in the code to match the database you have created.

9. Save the settings. 

That's it! Everything on your site should now work like it does in the demo. 


The code and instructions above are for demonstration purposes only and are provided without warranty, expressed or implied. Changes may be necessary before this code is used on a live website.