Build a Pure HTML Mobile App Landing Page with Twilio SMS and Parse
Time to read: 6 minutes
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.
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.
- 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.
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:
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).
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).
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:
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:
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!
From APIs to SDKs to sample apps
API reference documentation, SDKs, helper libraries, quickstarts, and tutorials for your language and platform.
The latest ebooks, industry reports, and webinars
Learn from customer engagement experts to improve your own communication.
Twilio's developer community hub
Best practices, code samples, and inspiration to build communications and digital engagement experiences.