Using Twilio & Corvid: Simple SMS integration for your web app
Tags: webdev, javascript, tutorial
Published: 2020-07-17 23:19:36

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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0hr1r7ugiqksv51lwgxt.png)

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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kt05pigtbhf2u0rh30gt.png)

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**. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pj3nwxg7vgy8gpu741i2.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/17zrqld5aeanm4407qks.png)

Inside the new _onClick event listener_, let's add a new function call to **sendSMS()**. 
```javascript
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:
```javascript
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. 
```javascript
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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/al6cn4s6yu9gja7zmvt3.png)

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**.
```javascript
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:
```javascript
const accountSid = '<your value>';
const authToken = '<your value>';
```

Now **create a new instance of Twilio** and pass it these values.
```javascript
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](https://www.twilio.com/docs/usage/api). Let's **create a new message which takes in a JSON object with 3 parameters**: to, from, and body.
```javascript
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:
```javascript
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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vx5p3pddlvg39rk8fybk.png)

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!