Testing changes to your mobile website can be tedious. This, and that Buttons, by default, do not render on your website when accessed from a regular desktop computer makes it even more difficult to know whether or not your Button is properly working in your mobile website.

In this tutorial, we’re going to test that a web app is properly rendering a Button when accessed from a mobile device. To do this, we’re going to do the following:

  1. Create a Node.js application
  2. Create a new Button on the Button dashboard
  3. Add a Button to the front end
  4. Create a server file and run it on port 5000 on the localhost
  5. Open our computer to outside web traffic using ngrok
  6. Test to see everything is working by opening the URL given to us by ngrok on our mobile device

You can find the completed code in this Github repo.

App layout

In this guide, we’re going to use a Node.js server to run our mobile web app, although any language and web framework (Flask, Sinatra, Rails, etc.) can be used. If you do not have Node.js installed, you can download it from here.

First, open up your terminal, create a new directory, and move into it

mkdir test_mobile_web_button && cd test_mobile_web_button

Then, initiate a package.json file

npm init

and click ‘Enter’ through the steps.

Next, install express

npm install —-save express

Create an index.js file, which will house our server code

touch index.js

Create a folder to house our views

mkdir views

Then, create a simple_button.html file within the views folder, which will house our HTML and the code that renders our Button

touch views/simple_button.html

Create a Button on the dashboard

Head over to usebutton.com and login. If you do not already have an account, you can sign up for one here.


In the navigation bar, head to where it says ‘Publisher’ and then ‘Buttons’. Then click ‘Add a Button’. Give the Button a name and select ‘Mobile Web’ under platform. If you do not already have a mobile website added, add one where it asks where you would like to integrate a Button. Under ‘Connections’, click ‘Add Actions’. Under ‘Actions’, select ‘All’. Scroll down to where you see ‘Uber’ and click it. Scroll back up and click ‘Save’. This will bring you to the dashboard for this Button. Here, you will see the Button ID, Application ID, and some sample code we will add to our simple_button.html file in the next section.

simple_button.html file

Take the sample code in the dashboard you were just routed to and copy it into your simple_button.html file, found in the views folder

&lt;!-- simple_button.html --&gt;<br><br>window.ButtonWebConfig = {<br>  applicationId: 'app-XXXXXXXXXXXXXXXX'<br>};<br>(function(u,s,e,b,t,n){<br>  u['__bttnio']=b;u[b]=u[b]||function(){(u[b].q=u[b].q||[]).push(arguments)};t=s.createElement(e);n=s.getElementsByTagName(e)[0];t.async=1;t.src='<a href="https://web.btncdn.com/v1/button.js%27;n.parentNode.insertBefore%28t,n%29" target="_blank">https://web.btncdn.com/v1/button.js';n.parentNode.insertBefore(t,n)</a><br>})(window, document, 'script', 'bttnio');<br>
     data-bttnio-context='{ "user_location": { "latitude": 40.6827, "longitude": -73.9754 }, "subject_location": { "latitude": 40.7382869, "longitude": -73.9823721 } }'&gt;

This code includes the ButtonJS library and creates an Uber Button that takes the user from one set of GPS coordinates to another. If you’re taking the code directly from this guide, remember to replace where it says ‘app-XXXXXXXXXXXXXXXX’ and “btn-XXXXXXXXXXXXXXXX” with your application ID and Button ID, both of which are found in the dashboard.

index.js file

Our server file will be pretty bare-bones. All it will do is run on our localhost 5000 port and render our simple_button.html file when a user goes to the URL that will be generated by ngrok.

// index.js<br>var path = require('path')
var express = require('express')<br>var app = express()
var port = process.env.PORT || 5000
app.get('/:html_file', function(req, res) {<br>  res.sendFile(path.join(__dirname, 'views', req.params.html_file + '.html'))<br>})
app.listen(port, function() {<br>  console.log('Listening on port: ' + port)<br>})

ngrok

ngrok is a powerful tool that opens up your localhost to external web traffic, which is great for testing a website on your mobile device that is running locally on your computer. If you don’t already have ngrok installed, download it here.

Navigate to where you have ngrok downloaded and run the following command

./ngrok http 5000

This will open up a connection to your localhost port 5000 through ngrok. In the terminal, it will log a couple things, but what we care about is the URL (Note: your URL will be different from this one, so use the one that ngrok gives you, not the one in this tutorial).


Get out your mobile device, open up your device’s browser, and head to the URL ngrok is operating on at the endpoint ‘/simple_button’. So, for the URL in the above snapshot, you would go to ‘https://3f406e56.ngrok.io/simple_button’. If all went well, you should see an Uber Button on the webpage.