DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations

Trending

  • Extending Java APIs: Add Missing Features Without the Hassle
  • What Is Istio Service Mesh?
  • Microservices Decoded: Unraveling the Benefits, Challenges, and Best Practices for APIs
  • VPN Architecture for Internal Networks
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. Using Twilio and Corvid: Simple SMS Integration for Your Web App

Using Twilio and Corvid: Simple SMS Integration for Your Web App

Texting is a huge trend in e-commerce sites. Using Twilio and Corvid, installing text-messaging features to a website can take less than 10 minutes.

Meredith Hassett user avatar by
Meredith Hassett
·
Aug. 06, 20 · Tutorial
Like (2)
Save
Tweet
Share
8.42K Views

Join the DZone community and get the full member experience.

Join For Free

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. 

texting ecommerce

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 phone number as a verified number as free trial accounts can only send to numbers on Twilio's verified list. 

verifying active numbers

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. 

turning on dev mode

Add a button to your site from the (+) icon. This button will be how to initialize the Twilio text message. Add an onClick event to this button through the properties panel. When you click on a UI Element on the page, the properties pane loads with the details of that element. 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.

screenshot of above step

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

JavaScript
 




x


 
1
export function smsButton_click(event) {
2
    sendSms(); 
3
}


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
 




xxxxxxxxxx
1


 
1
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
 




xxxxxxxxxx
1


 
1
export async function sendSms() {
2

          
3
}


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. 

installing twilio package

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
 




xxxxxxxxxx
1


 
1
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
 




xxxxxxxxxx
1


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


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

JavaScript
 




xxxxxxxxxx
1


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

JavaScript
 




xxxxxxxxxx
1


 
1
twilioClient.messages.create({
2
    to: '',
3
    from: '',
4
    body: ''
5
});


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
 




xxxxxxxxxx
1


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


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!

SMS app JavaScript Integration

Published at DZone with permission of Meredith Hassett. See the original article here.

Opinions expressed by DZone contributors are their own.

Trending

  • Extending Java APIs: Add Missing Features Without the Hassle
  • What Is Istio Service Mesh?
  • Microservices Decoded: Unraveling the Benefits, Challenges, and Best Practices for APIs
  • VPN Architecture for Internal Networks

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: