Build a Pure HTML Mobile App Landing Page with Twilio SMS and Parse

Build a Pure HTML Mobile App Landing Page with Twilio SMS and Parse

Today, I’d like to show you how to build a pure HTML mobile app landing page with Twilio SMS and Parse. You can use this to drive more app downloads. Using pure HTML and JavaScript, we’ll create a landing page for a fictional app that helps kids read (because there’s more to life than being really, really good looking).

This app is available for both iOS and Android, so we’ll need to be able to link to the proper page from both Android and iOS browsers. The live site is here – nothing too fancy, but it provides two big download links, plus a small form to receive the app link via text message:

If you enter your mobile phone number into the field and hit the button, you should receive a text message with a link that sends you directly to an app download page for a Zoolander-quoting app on either Android or iOS, depending on your platform version. Contrast this with the multi-step process of searching an app store on your mobile device, and you’ll notice a significant decrease in the friction of app download and install.
 

Solution Overview

So what does it take to make this link magically beam down to our user’s phone? The overall flow is as follows:

• User arrives at our landing page
• User enters their phone number, which we submit to our back end (powered by Parse)
• Our back end code sends a link to our download page to a user’s phone via SMS
• The user clicks on a link in the SMS message sent to their phone, which loads our app download page in their mobile browser
• Our download page detects the current platform based on the browser’s user agent, and redirects to the proper app download page.

The source code for this simple app landing page setup is located on GitHub. We won’t go through every line of code in this example, but we will walk through the key bits of code and steps necessary to use this page with your own mobile app. Here are the main moving parts:

• A configuration file which contains information about the app, including Parse API keys and app download links
• A Parse Cloud Code configuration file, which contains information about your app as it exists in Parse’s back end system.
• A JavaScript file containing server-side JavaScript that will send a text message, along with a file that contains all your Twilio configuration information.
• HTML files which will 1.) submit a user’s mobile number, and 2.) redirect to the proper app download page when opened on a mobile device.

Configuring All The Things!

In order to customize this app landing page for your own use, you will first need to download or clone the app source from Github. You will notice that this directory structure is the same as a new Parse Cloud Code project, plus a “www” directory which contains HTML files we want to deploy on a public web server. Once you have the code locally, rename all the configuration files, dropping the “sample” from their names:

• Rename “www/config.sample.json” to “www/config.json”
• Rename “config/global.sample.json” to “config/global.json”
• Rename “cloud/cloudConfig.sample.js” to “cloud/cloudConfig.js”

If you haven’t already, you will now need to head out to parse.com to sign up for an account and create a new application. Once your application is created, you will see a dashboard screen which looks much like this one:

Open “www/config.json” (one of the files you just renamed) and replace “YOUR_PARSE_APPLICATION_ID” and “YOUR_PARSE_JAVASCRIPT_KEY” with the appropriate values from this dashboard page. Similarly, open up “config/global.json” and replace the UPPER_CASED values with the appropriate values for your application.

That should be it for your Parse configuration. To configure your Twilio account credentials (found here after you have signed up for an account), open up “cloud/cloudConfig.js” in your app directory, and configure your Twilio account SID, auth token, and an outgoing number you can send a text message from (you can buy one here, if need be).

Deploying Your Cloud Code

Now that we have everything configured properly, let’s get this code running. In order to send an SMS text message to a potential user of your application, you will need to run a server-side script that uses Twilio’s REST API to send an outgoing text message. Usually, this requires a server side script (like one written in PHP or Python), but Parse provides a set of functionality called Cloud Code which allows you to create functions that can be remotely invoked in your client-side JavaScript (or Objective-C or Java) code.

If that wasn’t awesome enough, Parse also has support for some basic Twilio functionality baked right into one of its Cloud Modules. The Twilio Cloud Module allows Parse users to send and receive SMS text messages via Twilio. In a few lines of code, we can send a text message from Parse like so:

To deploy this code to Parse’s servers, we first need to install their command line tool. We can then upload this code using the “parse deploy” command from the root of the project (where the cloud, config, and www folders reside).

Deploying Your Client Code

With our Parse cloud code in place, we can now upload the contents of the “www” directory to any web server we have access to, and it should just work! If you’re looking for a simple HTML hosting option, I really like the service provided by site44. It allows you to turn a Dropbox folder into a web root for a live website! Follow the instructions on their site, and use your Dropbox account to create a public-facing website for your app:

After deploying your HTML pages to site44 (or the host of your choice), navigate to the “index.html” page that contains the form where we will enter in our desired mobile number. When we click the submit button, our JavaScript code on that page will intercept that event and submit a request to Parse, passing in the phone number the user gave us:

Which will show up as…

The link we sent points to an HTML file inside our “www” directory that will inspect the browser’s user agent to determine which app download link to open when it is loaded in the mobile device’s browser:

Conclusion

Using Twilio and Parse, we were able to quickly create a useful app landing page with no server side code. By allowing users to receive the app link directly on their phone, we reduce the barriers between them landing on our page and enjoying our finely crafted mobile application. With some tuning of the HTML and CSS, you should be able to make this page your own using screenshots, testimonials, and support content for your own real mobile app. Here’s to more downloads of your amazing mobile creation!