Notify clients via SMS (Twilio)
Updated: Aug 3, 2022
Objective:
Post SMS, whenever wherever.
Technology:
Twilio ,
Wix Velo (form)
Wix NPM Module
Wix Secret Manager
DemoLinks:
Step1: Add Contact
Step2: Post SMS to Contact
DEMO Video
STEP 1: Twilio Account Setup
Generate "Test From Phone Number"
Create Messaging Service
Setup SMS Service
Send Test Message.
STEP 2 Wix Site Secret Manager Setup
Click New Secret to start storing secrets, used on your website
Add a secret named accountSID and give it the value of your Twilio account SID.
Add a secret named authToken and give it the value of your Twilio auth token.
Add a secret named fromPhone and give it the value of the phone number you received from Twilio.
STEP 3 Open your site and under Wix Developer's console Import Twilio Module
STEP 4 Backend, define twilioSMS.jsw file
import { getSecret } from 'wix-secrets-backend';
import twilio from 'twilio';
export async function sendMessage(toPhone, message) {
const fromPhone = await getSecret('fromPhone');
const accountSID = await getSecret('accountSID');
const authToken = await getSecret('authToken');
const client = twilio(accountSID, authToken);
try {
await client.messages.create({
body: message,
from: fromPhone,
to: toPhone
});
} catch (error) {
throw 'Failed to send SMS';
}
}STEP 5 Invoke from frontend
import { sendMessage } from "backend/twilioSMS.jsw";
$w.onReady(async function () {
$w('#btnPostSMS').onClick(async () => {
displayMessage('Post SMS triggered');
const toPhone = "9198********";
const message = $w('#iptBody').value;
$w('#txtErrorMsg').hide();
$w('#txtErrorMsg').hide();
sendMessage(toPhone, message).then(() => {
$w('#txtErrorMsg').show();
$w('#txtErrorMsg').text = "SMS posted successfully, to admin mobile number";
}).catch(() => {
$w('#txtErrorMsg').show();
$w('#txtErrorMsg').text = "failed to post SMS!!";
})
});
});
Successful SMS, posted to admin (As we are using a Twilio test account)
Fellow full stack developers, kindly leave a comment with the final project website name and how this was helpful to you in upgrading your client's site with this custom code patch. This will surely encourage DiTAPS to build more such blogs.