How to build a phone capture landing page with SuperPhone®
Build your phone book the SuperPhone® way
One of the more frequently asked questions we receive both on- & off-line is: “How do I get a site like textryan.com?” This comes as no surprise to us since more than 10,000 people have added their numbers and started a conversation with our CEO Ryan Leslie through his own branded url. Here’s a guide to setting up your own SuperPhone®-powered phone capture landing page using Ryan’s downloadable template:
1. Create a SuperPhone® account to get your widget web address
Once you select a plan and log in, navigate to the widget page and select ‘COPY URL’.
2. Create a free GitHub account
Head to Github.com and create an account. The site will ask you to select a plan — you can do what you need to do easily with the free one.
3. Log in to GitHub and create a new repository
Once you verify your email, log in and click create a repository:
4. Name the repository ‘textme’ and click create
Once you name the repository, make sure that ‘Public’ is selected. You can skip all of the other options and just scroll down to click the green button and create the repository:
5. Upload the textryan.com template to GitHub
Download Ryan’s template here, and double click to unzip the file.
You should now have a file called ‘index.html’, which you will upload to GitHub by clicking ‘uploading an existing file’ on this screen:
Once you upload the file, scroll down and click the green ‘Commit changes’ button
6. Once uploaded, click the file and select edit
Once uploaded, the file will appear as ‘index.html’. Click to view the code:
When viewing the code, click the pencil icon to edit:
7. Copy/paste the widget url from step one
Scroll down to line 53 of the code and find this:
‘https://superphone.io/w/my-url ’
Replace with the url of your SuperPhone® widget that you copied in Step 1. Make sure you leave the single quotes around the url.
This makes sure all of the numbers entered on your page are saved to your SuperPhone®.
8. Update the page to say your name
Scroll to line 198 in the code and change the text ‘YOUR NAME HERE’ to your first and last name.
9. Save your changes
Scroll all the way down and click the green ‘Commit changes’ button to save your page.
10. Publish your page
To publish your page, select ‘Settings’ in the top right.
On the ‘Settings’ page, scroll down to the ‘Github Pages’ section and click the dropdown button to change ‘None’ to ‘master branch’.
Once you click ‘Save’, refresh the page after 90 seconds and you’ll see that your site has been published and viewable:
You can click the link to test your new page.
11. Direct your custom domain to GitHub
Now, you’ll need to buy a ‘text-yourname.com’ domain.
For this example, we’re using a domain purchased at GoDaddy. Once you buy, tell GoDaddy where to point your domain by updating your DNS records.
Follow their instructions here to edit your first A record to point to the GitHub IP address 185.199.108.153. Then, add three more A records and change the third number in sequence to 109, 110, and 111 until your ‘Records’ look like this:
12. Add your custom domain
Once you buy, go back to the ‘Github Pages’ section, scroll down to the ‘Custom domain’ sub-section, add your custom domain and click save.
Refresh the page. After a few minutes, you’ll know your domain is configured the right way when your ‘Github Pages’ section looks like this:
Make sure you check the box to ‘Enforce HTTPS’ so your site is secure.
Collect numbers like a boss
In the event of any trouble, you can always drop your number at textryan.com for help on this — tell him we sent you.
— Team SuperPhone®
