sudo npm install -g nodemon
Instead of an administration interface, you are going to use your existing email, which will also substitute a database. Consider the following scenario:
- A customer opts in through a web form
- You receive the opt-in in your incoming email
- Your app sends a template message (welcome) to the customer on opt-in submission
- The customer sends a message
- You receive the message in your incoming email
- [Within 24 hours from the last message] You send a free-form response through your outgoing email
We have prepared an easy-to-use app tyntec-mail-demo, which you’re going to use in this tutorial to bridge your email with the tyntec Chat API.
You should use two email accounts – a service email that will only transport the outgoing email, and an admin email that you will use directly to receive opt-ins and messages and to reply to them. If you used only a single email account, you would also receive your own replies, which isn’t very friendly.
You will need
- A mobile phone with the WhatsApp application and a working phone number as a testing customer
- Your tyntec API key from your tyntec account
- Your WABA phone number that has been assigned to you by tyntec
- Two email accounts to which you have access
- Your favourite text editor or IDE with JavaScript highlighting
Step One: Get your environment ready
First, you’re going to prepare your development environment.
1. You need to install a couple of tools (unless you’ve got them already):
- Download and install Postman.
- Get an ngrok account, download the binary and install it.
- Download and install Node.js.
You will be building your code gradually, so add nodemon Node.js tool from a terminal globally:
When you run your app with nodemon instead of node, it will watch the changes for you and restart your app automatically.
2. You will be using a prepared demo code base. So clone our apps:
- webhook-starter (with which we’ve already played in our Receiving Messages Tutorial) and
- tyntec-mail-demo.
Make a new directory for your project and copy server.js from the webhook-starter and the api directory from the tyntec-mail-demo. In the new directory, install required modules for your project:
npm install express body-parser axios imap-simple mailparser nodemailer
3. Tunnel a local port with ngrok, so your local computer is exposed on the internet and tyntec can call your webhook.
Set your ngrok authtoken, which you will find in your ngrok dashboard > Auth under Your Tunnel Authtoken.
Then you can launch ngrok with your local port number, such as:
ngrok http 3000
var listener = app.listen(3000, function () { console.log('Your app is listening on port ' + listener.address().port); });
nodemon server.js
When you go to your ngrok address from your browser, you should see the response generated by server.js.
6. Now do a little cleanup of server.js to have a nice skeleton for coding.
Remove all routes (app.get() and app.post()) and the variables used by them, you won’t be needing those. You should have something like this:
const express = require('express') , bodyParser = require('body-parser') //// You will be adding new requires here. ; var app = express(); app.use(bodyParser.urlencoded({extended: false})); app.use(bodyParser.json()) //// You will be adding new routes here. var listener = app.listen(3000, function () { console.log('Your app is listening on port ' + listener.address().port); });
7. Last but not least, set environment variables in your OS used by the tyntec-mail-demo scripts:
- IMAP_HOST – the IMAP server of your service email account, for example: imap.example.com
- IMAP_PORT – the IMAP port on the server, for example: 993
- SMTP_HOST – the SMTP server of your admin email account, for example: smtp.example.com
- SMTP_PORT – the SMTP port on this server, for example: 465
- ADMIN_EMAIL – your admin email address
- ADMIN_PASSWORD – your admin email password
- EMAIL – your service email address
- API_KEY – your tyntec API key
- WABA_NUMBER – your WABA number
Step Two: Collect an opt-in
Let’s code! Start by creating a form, serving it and routing form submissions.
Important: Remember to follow the guidelines on Getting Opt-ins!
1. Create a simple HTML file index.html that will provide an opt-in form.
Save the file, the WhatsApp logo and styles to a new directory, which will contain static files, such as static.
For our demo app, the form will gather two input parameters: name of the customer and their phone number.
The form part should look like this:
<form action="/optin" method="post"> <p><img id="wa-logo" src="WhatsApp_Logo_1.png" alt="WhatsApp Logo" height="60px"> <input type="checkbox" name="agree" value="1"> I want to receive notifications on my WhatsApp.</p> <p><label for="name">Name:</label><input type="text" id="name" name="name" value=""></p> <p><label for="phone">Phone:</label><input type="text" id="phone" name="phone" placeholder="+420123456789" value=""></p> <input type="submit"> </form>
app.use(express.static('static'));
const optin = require('./api/form.js')
app.post("/optin", optin);


const incoming = require('./api/incoming.js')
app.post("/incoming", incoming);
2. Now you need to update the tyntec API with the new callback URL via Postman. This is described in detail in the Receiving Messages Tutorial, except you will use the ngrok address instead of a Glitch address in the request body, e.g. https://ab12c3de.ngrok.io/incoming.
3. And guess what, it’s test time again! Be a nice testing customer, grab your phone and send a cool WhatsApp message to your WABA number.


const mailfetch = require('./api/fetch.js')
app.get("/mailfetch", mailfetch);



Tip: You may use Zapier integration to call the mailfetch automatically when your service email receives a reply from your admin email.