Posting SMS (Wix+Twilio)
Updated: Oct 6
Advance Topic: Posting SMS @ economical rate. Integrating Your Website with Twilio.
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 as how this was helpful. This will surely encourage DiTAPS to build more such blogs.