You get what you give…

Devices today are becoming powerful and stronger, not to forget, having a profound impact in our day to day lives. Mobile apps are everywhere for every thing. 

I always pondered, when you install a new app, how the providers send you welcome messages / on boarding messages ? 

If you did too……, this is the exact article.

Enter Flutter…

Flutter has no-doubt revolutionized the speed of mobile development. For this article, we have a simple Google-Sign In App.

flutter, whatsapp and twilio
Flutter, Whatsapp and Twilio

Once we click on Sign in with Google, below actions happen :

  1. Our entry is logged in Firebase 
  2. Cloud Function onCreate event is triggered
  3. This function sends the On-Boarding messages via SMS and WhatsApp.

Okay….

First two actions can be handled by programmers, but… what about on-boarding…HMMMMM…

Enter Twilio….

If you haven’t heard about Twilio, you should check out here…

Twilio is a cloud communications platform as a service (PaaS) which allows developers to programmatically make and receive phone calls, send and receive text messages, and perform other communication functions using its web service APIs.

Steps : 

  1. Create Twilio account.
  2. On the Left Hand side, you will see the menu as below
Twilio Menu
Twilio Menu

NOTE : You get a $15 USD balance in your trial account after signing up.

Click on the three dots icon, and choose the services which you want to activate.

Twlio Services
Twlio Services

3. In our case Programmable SMS. Click on that

Twilio SMS
Twilio SMS

This would prompt you to first assign a phone number, which you need for sending SMS. 

Don’t worry the balance is deducted from the $15 and not from your pocket. 🙂

4. For sending whatsapp messages, simply click on the top notification (above image) which says Get started here.

If everything’s perfect, you should see a screen like below : 

Twilio WhatsApp
Twilio WhatsApp

Simply send a whats app message (join moving-particles) to the number (in my case +1 415 523 8886)…..

You should receive a ack message from Twilio. 🙂

Last Step, integrate Twilio in Cloud Functions…

  1. Get the accountSid and authToken, from your Twilio account.
  2. Install Twilio from npm. 

npm i twilio

3. Initialize twilio in cloud function script as

const client = require('twilio')(accountSid, authToken);

4. For sending SMS

client.messages.create({
body: 'Hello there!!! Welcome aboard....Stay tuned.',
to: ‘NUMBER TO SEND’,
from: ‘YOUR TWILIO NUMBER’
})

body : The text of the message you want to send, limited to 1600 characters.

from: Your Twilio Number

to: The phone number to receive the message.

5. For sending Whats App

client.messages
.create({
body: 'Hello newbie..Welcome aboard!!!! Learn more at: https://flatteredwithflutter.com/',
from: 'whatsapp: TWILIO WHATS APP NUMBER’,
to: 'whatsapp:NUMBER TO SEND’
})

NOTE : Don’t remove whatsapp: in the from and to params.

body : The text of the message you want to send, limited to 1600 characters.

from: Your Twilio Number

to: The phone number to receive the message.

Real Device look…
Real Device look…

1 Comment

  • Nelson

    I was looking on the internet for some content about the integration of twilio with flutter and I found your article.

    I’m new to programming, and I’d like to know what is, or where is, clound funcions.

    Could you help me?

Valuable comments