
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:
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.
First, you’re going to prepare your development environment.
1. You need to install a couple of tools (unless you’ve got them already):
You will be building your code gradually, so add nodemon Node.js tool from a terminal globally:
sudo npm install -g nodemon
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:
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:
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.