Using Twilio & Corvid: Simple SMS integration for your web app

Text messaging is the latest trend in e-commerce sites. It enables you to directly talk with your consumer and share new products or shipping updates. Twilio is a great tool that enables us as developers to add text messaging to our apps with minimal headaches. At Corvid by Wix, we're all about increasing dev velocity, so with Twilio's npm module, we can add text messaging to our website in less than 10 minutes. Don't believe me? Let's take a look.

The first thing you need to do is sign up for a Twilio trial account. This is free, and it will provide you with 3 crucial details: your account SID, your auth token, and your Twilio phone number. While you are there, it's a good idea to also add your personal phone number as a verified number as free trial accounts can only send to numbers on Twilio's verified list.

Now let's open up Corvid by Wix. If you don't already have a Wix site, it's easy to get started. All you need to do is sign up for a free Wix account, create a site from a template (or blank if you prefer!), and enable Corvid. To enable Corvid, in your Wix Editor, select Dev Mode from the top menu bar and Turn on Dev Mode.

Add a button to your site from the (+) icon. This button will be how be initialize the Twilio text message. Add an onClick event to this button through the properties panel. When you click on an UI Element on the page, the properties pane loads with that elements details. Go to the Events section, click the (+) next to onClick, and then hit Enter. You'll see a new stubbed out onClick event listener in your code editor.

Inside the new onClick event listener, let's add a new function call to sendSMS().

export function smsButton_click(event) {
    sendSms(); 
}

Now the sendSms() function has to come from somewhere, so let's have it come from the backend code so no one can get access to our secrets. To do this in Corvid, all you have to do is import the function from the backend code at the top of the UI code editor like so:

import {sendSms} from 'backend/twilio';

Of course this means we have to have a twilio.jsw file in our backend code files, so let's create one now. If you do to the Backend section in the Site Structure pane, you can add a new JavaScript Module named twilio.jsw.

In your new twilio file, we need to create an exported function so it is available to be imported by the UI (or any other code that wants to use it). To do so, stub out the new sendSms() function.

export async function sendSms() {
}

This is where we will do our Twilio call. To do that, we do need to import the Twilio npm helper package. Under node_modules in the site structure, add a new module and search for twilio. Install the Twilio package. Using Corvid to handle your npm packages means we automatically create and maintain your package.json file for you so your maintenance responsibilities are reduced.

To use the Twilio helper package, you'll need to import it in your backend code. Make sure you are working in your twilio.jsw file, and import twilio in the top of your code.

import twilio from 'twilio'; 

The next thing we need to do is instantiate a new Twilio client. You need to pass it 2 parameters: your Twilio Account SID and your Twilio Auth Token. You can create new constants for these values:

const accountSid = '<your value>';
const authToken = '<your value>';

Now create a new instance of Twilio and pass it these values.

let twilioClient = new twilio(accountSid, authToken);

Awesome! Now we can start working with Twilio. Today, we're just interested in sending a message, so let's use the Twilio SMS Message Create method. Let's create a new message which takes in a JSON object with 3 parameters: to, from, and body.

twilioClient.messages.create({
    to: '',
    from: '',
    body: ''
});

We need to fill in those details. TO will be your personal number. Again make sure it is verified with Twilio if you are working with their free trial. FROM will be your new active number on Twilio. When you created an account, you should have create a phone number that sends messages on behalf of your account. This will always be your from number when using Twilio. And last is your BODY. This can be whatever message you want to send. Maybe today it is just Hello World. So all filled out, it may look something like this:

twilioClient.messages.create({
    to: '+14155551234',
    from: '+16505550987,
    body: 'HELLO WORLD! I'm texting your from my Corvid site!'
});

Lastly, we need to send this to production which is super easy with Corvid. Click on Publish in the top right corner, and ta-da! Your site is in production. Click on your SMS button and check to make sure you get a text message. If you prefer to do your testing in QA, you can always use the Preview button instead of Publish.

And that's how simple it is to work with npm modules in your Corvid site! If you want to see other ways to speed up your web dev, feel free to reach out!