What?

In essence, it’s a doorbell. But one that can reach you wherever you are. If a picture’s worth a thousand words, hopefully this GIF makes up for the lack of a proper written introduction.

Why?

I wanted to build a simple push button for our student helpdesk so that if we ever had to step away students could page us. I decided on Google Hangouts for the message delivery platform since I use it every day and the app is already installed on all of my devices.

How?

All you need to get started is:

• A G Suite account with Hangouts Chat enabled.
• A device that’s kiosk mode capable to act as the push button.
  • I opted for an Android tablet stuffed inside a retired Chromebook running Fully Kiosk Browser & App Lockdown.
• The Hangouts Chat app installed on all of your devices.

That’s it! If you’ve got those things, and a few minutes to spare, click through to get this setup!

Configure Hangouts Chat

We’ll be creating a chatroom that will contain each person you’d like to be paged as well as a “bot” that we’ll setup to handle the actual paging. Google has made this way easier than it sounds and the steps below are taken straight from their support site. Also, some of the code and directions have been borrowed from the one and only Wesley Chun.

Ok, let’s get started:

1. Login at https://chat.google.com
2. Create a room:
   1. On the left, click Find people, rooms, bots > Create room.
   2. Enter a room name and click Create. For my use case, I went with CLC Helpdesk.

      

3. If you want to page multiple people at once, add them now. To do that:
   1. In the room, click Add people & bots.
   2. Enter a name, email address, or Google Groups address. Or, select a person from one of the suggestions.
      • If you want to notify the people you’re adding, make sure theNotify people via email box is checked and click Send.
      • If you don’t want to notify the people you’re adding, uncheck the Notify people via email box and click Add.
        
4. Create an incoming webhook (bot). This is what will send the actual page when it’s called in Apps Script. To set it up:
   1. From the chat room menu, select Configure Webhooks. A dialog appears that lists any incoming webhooks already defined for the room:
   2.  Click on ADD WEBHOOK, then fill in the name field and optionally the avatar URL field, then click SAVE. For my use case, I went with CLC Pager Bot for the name.
5. Copy the Webhook URL the clipboard. We’ll need this in the next section.

Build Your Web App

You can use Apps Script to do all sorts of cool stuff and this paging bot just barely scratches the surface. If you’d like some more inspiration and insight into what’s going on behind the scenes, definitely check out this awesome how-to page from Google’s dev team. If you’d like to see what I’ve done, please read on.

1. Make a copy of THIS SCRIPT by clicking the link then clicking File –> Make a copy…
2. You’ll want to make a few changes to Code.gs file. In particular, you’ll want to look at lines:
   • 24: *IMPORTANT* This is where you’ll paste in your bot’s webhook URL from step 5 above. Paste the URL in between the quotes.
   • 10: Set your site’s favicon here.
   • 11: This is the title of your web app. It’s what appears next to the favicon in your browser tab.
   • 16: This is the message that will be sent to you each time someone hits the page button. Put whatever you’d like between the quotes.
3. Modify Index.html and Style.html to suit your needs.

Admittedly, I am not a web developer by trade. But to give you some idea of what’s going on here: The Index.html file loads up the bell image. When the bell image is clicked (or tapped) it calls the Apps Script function which sends the Hangouts Chat message. Then, if that’s successful, (it has yet to fail me) it plays a gong sound and updates the page to let the user know that service has been called.

Publish Your Web App and Deploy

The last piece of this puzzle is to publish your web app and get it up and running on a user-facing device. To deploy your web app, in your Apps Script project:

1. Click Publish –> Deploy as web app…
2. You should see a window like the one below. Make sure that Anyone can access the app, even anonymous. Click Update.
   
3. You’ll be asked to authorize the app to run on your behalf. Click Review Permissions.
4. Select your Google account then click Allow.
   
5. You should see a confirmation box like the one below. Copy the current web app URL.
   

Paste your app’s URL into a new tab and try it out! If everything went according to plan, you should receive a Hangouts Chat message from your bot. If not, please leave a comment down below and I’ll be happy to help in any way I can. I’d recommend using a URL shortener like https://bit.ly to make this link easier to remember. This will come especially in handy when we ready our user-facing device. All I did for that was:

1. Download the Fully Kiosk Browser & App Lockdown on an Android tablet that was collecting dust.
2. Configure the app so that it loads the app via the bit.ly URL.
3. Configure the app to reload the URL whenever it’s inactive for 120 seconds. This way the app stays up to date if/when changes are pushed and students are not able to keep mashing the bell repeatedly.

If you hit any snags along the way, please don’t be a stranger. Leave a comment! Thanks again to @wescpy for sharing his knowledge on the G Suite Dev Show. Be sure to check out the latest episode below!