How to Create a Simple Email Sign Up with Waitress

Are you struggling with finding a FREE service to collect emails? Are you overwhelmed by all those fancy features provided by email marketing solutions? In this post, we will show you how to collect email from your website visitors with google sheet. Waitress - apio’s google sheet API microservice will help you to build relationship with users in less than 10 minutes and without using email marketing platforms.

📭 See tutorial in docs

📭 Why you don’t need email marketing tools (yet) to collect emails?

Step 1: Create Email List Google Sheet ¶

Create a google sheet that you’ll be using as your mailing list. Copy and paste the following columns to the sheet:

Step 2: Authorize Catalog Google Sheet on Telescope ¶

Go to Telescope(apio microservices platform). Log in into your existing google account.

Then go to Waitress and follow the instruction in the configure tab to authorize your google sheet. This way, only you can access your sheet through our API.

• Share editor permission with Waitress.
• Copy and past the Google Sheet URL, hit Authorize
• Copy the returned route URL

Step 3: Add New Token ¶

Go to your account in Telescope and click View Token, you will be asked to sign in again for security.

Then add a new token:

• Alias: nickname for the token
• Target Audience: the domain you’ll be calling the API from. If you’re testing locally, you could use http://localhost:8080 for example.

Step 4: Configure Token ¶

Expand the token you just created, paste the route URL from Step 2 under Access Policy. In the Request Method dropdown, select POST.

If you forget to copy the returned route URL from Step 2, put the following address in the route field waitress/gsheets/<your google sheet id>.

You can find your Google Sheet id in the url, which is the number after spreadsheet/d/ and before /edit.

Step 5: Add Sign-up Form to Website ¶

Copy and paste the html form to your website:

Sign-up form ¶

<div class="container py-3">
 <div class="card">
   <div class="card-body">
     <form>
       <div class="row">
         <div class="form-group col-4">
           <input type="text" class="form-control" id="fname" placeholder="Enter name"> 
         </div>
         <div class="form-group col-6">
           <input type="text" class="form-control" id="femail" placeholder="Enter email"> 
         </div>
         <div class="col">
           <button type="button" class="btn btn-primary" onclick="submitForm()">Sign Up</button>
         </div>
       </div>
     </form>
   </div>
 </div>
</div>

This will create the form like this:

Token ¶

• Insert the token you retrieve from Telescope account after let token = Bearer.
• Insert the Google Sheet id after /gsheets/

<script type="text/javascript">
 let token = "Bearer <your telescope token>"
 let url =
"https://trampoline.apiobuild.com/router/waitress/gsheets/<your google sheet id>";

 function submitForm() {
   var http = new XMLHttpRequest();
   http.open("POST", url, true);
   http.setRequestHeader("Authorization", token);
   http.setRequestHeader("Content-type", "application/json");
 
   let name = document.getElementById('fname').value;
   let email = document.getElementById('femail').value;
   let created = new Date().toISOString();
   let payload = [
   {
     Name: name,
     Email: email,
     Created: created
   },
   ];
   http.send(JSON.stringify(payload));
 }
</script>

Ta da! There you have a simple sign-up form to collect emails from your website visitors! Give it a try yourself. 🎉