How to Build a SMS-Powered Survey System with Reshuffle Open Source
Tags: opensource, tutorial, javascript
Published: 2020-10-21 18:40:23

Communicating with customers via SMS text messages is fast becoming part of a multi-channel customer experience — where people get to choose which channel they prefer to use when connecting with brands. SMS offers speed, accessibility, and the option to communicate privately without going on public social media channels. 

Building a simple SMS integration, for example, an auto-responder for order confirmation, is easy. But what if you want to connect multiple services to generate a more interactive flow and do more than just send an outbound SMS to a customer? The solution can become complex, and fast. 

We built Reshuffle’s [open source integration framework](https://dev.reshuffle.com/) to simplify these types of integrations. In this article, we show you how easily you can build a series of connections that link different services to create a unique solution. We encourage you to imagine what’s possible, and get creative! Here’s an example of what you can do. 

## Watching a Film Just Got More Interactive

Let’s say you are a major media and entertainment brand that offers live streaming services.  You want to take it up a notch and get your customers to be more engaged, so you decide to make things interactive.

Rather than offering a standard “thumb up/thumb down” click option on screen, you decide to give customers the option to ask questions via SMS or comment on the live content. All by integrating services into the SMS and using Google Sheets as the interface with marketing. 

Once a question or a comment is submitted, the marketing team can see it in the Google sheet, then answer or reply straight in the sheet, sending the reply or answer back to the user. For example, the marketing team can post user comments into the live stream, and thank the user in the spreadsheet for submitting it.

## How to Build It

As a developer, we know you care about the technical know-how. You’ll notice, there are multiple services at play. Reshuffle makes it easy to build integrations that complete complex tasks, so you can deliver unique experiences and outcomes for the business and for customers. 

Here’s how you’d build the SMS example above: 

Reshuffle is an open source, lightweight, and event-driven framework that helps you integrate services — these integrations and workflows are created inside a Reshuffle App. The objects that let you interact with these services are called [connectors](https://dev.reshuffle.com/docs/connectors). The first thing we need to do is to declare a Reshuffle App and a [Twilio connector](https://dev.reshuffle.com/docs/TwilioConnector) that will receive the SMS:

```js
const app = new Reshuffle()
const twilioConnector = new TwilioConnector(
   app, {
       accountSid: process.env.TWILIO_ACCOUNT_SID,
       authToken: process.env.TWILIO_AUTH_TOKEN,
       twilioNumber: process.env.TWILIO_NUMBER
   });
```

Now, we need to also declare a [Google Sheet connector](https://dev.reshuffle.com/docs/GoogleSheetsConnector):

```Javascript
const googleSheetsConnector = new GoogleSheetsConnector(app, {
  credentials: {
    client_email: process.env.GOOGLE_CLIENT_EMAIL,
    private_key: process.env.GOOGLE_PRIVATE_KEY.replace(/\\n/g, "\n")
  },
  sheetsId: process.env.GOOGLE_SHEET_ID
});
```

Next, we need to define the event we want to listen to using the Twilio connector `on()` method. In this case we want to listen to an incoming SMS on the Twilio number:

```Javascript
twilioConnector.on({method:'POST', path:'/sms'}, (event, app) => {
   const messageReceived = event.req.body.Body
   const fromPhoneNumber = event.req.body.From
   // more code to come here
})
```

As you can see, we extract the message and number from the event. Now we need to add that information to the spreadsheet using the GoogleSheets Connector. Let's add that to the code above:

```Javascript
twilioConnector.on({method:'POST', path:'/sms'}, (event, app) => {
   const messageReceived = event.req.body.Body
   const fromPhoneNumber = event.req.body.From
   const sheetId = 0
   const values = [fromPhoneNumber, messageReceived]
   await googleSheetsConnector.addRow(sheetId, values)
})
```

Here is how the spreadsheet looks like after the first entry is entered:

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

To finish off, we will add an event handler to the GoogleSheet Connector to handle the use case of the marketing manager adding an answer in the `answer` column in the spreadsheet. 

```Javascript
googleSheetsConnector.on({}, (event, app) => {
   const rows = await myGoogleSheetsConnector.getRows(sheetTitle) 
  rows.forEach(async row => {
    if (row.answer && !row.sent) {
      twilioConnector.sendSMS(row.answer, row.from)
      Row.sent = 'true'
      row.save()
    }
  });
};
);
```

Lastly, let's initiate the integration by starting the Reshuffle App:

```Javascript
app.start();
```

That is it! With minimal code and an intuitive user interface for marketing staff, we have created a full workflow for our media company. 

Note that in real life, we would probably have some production safety precautions such as a “confirm_send” column so the marketing team can confirm that the answer is truly ready to be sent. 

## Now, Get Creative

As you work with your sales, marketing, and customer experience colleagues, we encourage you to get creative in making SMS integrations that drive better customer experiences and help differentiate your business in the marketplace. 

Reshuffle is continually listening to what our customers need and desire. Don’t see a Connector to a service you’d like to integrate? 

Send a tweet to [@ReshuffleHQ](https://twitter.com/reshufflehq) to let us know which Connector you’d like us to develop next.