Tutorial: TextBot app with Twilio

With ManyWho, you can build an app that sends out text messages, and based on the response from your user, take different flow directions. The messaging system is built using Twilio (a cloud communications service for voice and messaging applications) integration. To see how messaging works, we will build a TextBot.


Helping Hogwarts sort students 

The Sorting Hat at Hogwarts wants to see if students belong to either Gryffindor or Slytherin, or have not yet received an acceptance letter. Only it is 2075, and the Sorting Hat uses an automated text-messaging system to do the work. (We can keep adding layers to this app, but for the sake of simplicity, we shall assume Hufflepuffs and Ravenclaws are not being sorted at this moment.)

The way the app will work:

  1. Sends a text message to a user. The message asks the user a question.
  2. Based on the response the user has texted back, the app either texts the user the name of a Hogwarts House, or asks a second question.
  3. Based on the response the user has texted back, the app either texts the user the name of a Hogwarts House, or confirms she can not be sorted yet.

Let’s get building!
If you need to take a closer look, click on the images to enlarge them. Have a question? Click the Help button on the bottom right-hand corner of this page to ask.

This is what our canvas will look like, once we are done:
screen-shot-2016-09-23-at-7-12-57-pm-minishadow

What we need

  1. ManyWho username/password. (If you do not have a ManyWho login, please click here to request one.)
  2. Twilio account and password. (You can create a Twilio account here.)
  3. A Twilio programmable SMS number, with text messaging supported and configured for the country of your mobile phone.
  4. Twilio Service for ManyWho configured. (To see a list of Services you have installed, click Services in the Home screen sidebar. Learn more here.)
  5. Your mobile phone number.
  6. A new flow. (Here is how you can create a new flow. Use the ManyWho Identity Service. Make sure the Access is set to ‘Anyone can run this flow’ and Social Feed is set to ‘None.’ You can call the flow ‘TextBot’ or anything you wish.)

Importing the Twilio Service 
  1. Open your flow, and click Shared Elements on the right-hand-side navigation.
  2. Select Services.
  3. Click Import Existing.
  4. Click the Import button next to the Twilio: Service.
  5. Click Close.

The Shared Elements > Services screen will show the Twilio service once it is imported to the flow. The ManyWho Identity Service is available to all flows by default.


Configuring the Message action for the first question
  1. Drag a Message element from the sidebar to the canvas.
  2. In the Configuration Panel, copy-paste Question 1 in the Name text field and click New Message Action.
  3. Select Twilio Service from the The Service to send the Message drop-down menu.
  4. Click the Select button next to Send SMS (Simple).
  5. In the Message Action for: Question 1 screen that opens, click Select or create a new Value in the Value field for Body.

  6. Click Create a new Value.
  7. In the Value dialog box, copy-paste Q1: Kittens in the Name field.
  8. Select String from the What kind of Value is this? menu.
  9. In the Default Value field, type Do you think all lions are really cute courageous kittens? and click Save.

  10. Click Select or create a new Value in the Value field for From.
  11. Click Create a new Value.
  12. Copy-paste Twilio: Number in the Name field.
  13. Select String from the What kind of Value is this? menu.
  14. In the Default Value field, enter your Twilio programmable SMS number and click Save.
  15. Click Select or create a new Value in the Value field for To.
  16. Click Create a new Value.
  17. Copy paste To: Me in the Name field.
  18. Select String from the What kind of Value is this? menu.
  19. Enter your mobile phone number in the Default Value field and click Save.
  20. Click Select or create a new Value in the Value field for Reply under Outputs.

  21. Click Create a new Value.
  22. Copy-paste Text: Response in the Name field.
  23. Select String from the What kind of Value is this? menu and click Save.
  24. Click Apply Message Action.
  25.  Click Save Message.

Creating the outcome for Start

A ManyWho flow begins with the Start element, which is fixed on the canvas. The first outcome in the flow is the outcome of the Start element, which connects an arrow from Start, to the first element the builder places on the canvas.

Outcomes show how a flow progresses. The ‘Label’ text on outcomes gets converted into clickable buttons.

  1. Hover your mouse on StartThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Start to Question 1. This opens a Configuration Panel on the right-hand side.
  3. In the Configuration Panel, type Go in the Name text field, and click Save Outcome.

This is what the canvas looks like now:


Confirming the house (If the user responds Yes to the first text message)
  1. Drag a Message element from the sidebar, to the Canvas.
  2. In the Configuration Panel, copy-paste Gryffindor in the Name text field and click New Message Action.
  3. Select Twilio Service from the The Service to send the Message drop-down menu.
  4. Click the Select button next to Send SMS (Simple).
  5. In the Message Action for: Gryffindor screen that opens, click Select or create a new Value in the Value field for Body.

  6. Click Select or create a new Value.
  7. In the Value dialog box, copy-paste Result: Gryffindor in the Name field.
  8. Select String from the What kind of Value is this? menu.
  9. In the Default Value field, type You are a Gryffindor, just like Harry! and click Save.
  10. Click Select or create a new Value in the Value field for From.
  11. Enter Twilio in the Search bar, and select Twilio: Number.
  12. Click Select or create a new Value in the Value field for To.
  13. Enter To in the Search bar and select To: Me.
  14. Click Apply Message Action.
  15. Click Save Message.

    This is what the canvas looks like now:

Sending the second question (If the user responds No to the first text message) 
  1. Drag a Message element from the sidebar, to the Canvas.
  2. In the Configuration Panel, copy-paste Question 2 in the Name text field and click New Message Action.

  3. Select Twilio Service from the The Service to send the Message drop-down menu.
  4. Click the Select button next to Send SMS (Simple).
  5. Click Select or create a new Value in the Value field for Body.
  6. Click Create a new Value.
  7. In the Value dialog box, copy-paste Q2: Slytherin in the Name field.
  8. Select String from the What kind of Value is this? menu.
  9. In the Default Value field, type Do you think Voldemort is kinda cool? and click Save.
  10. Click Select or create a new Value in the Value field for From.
  11. Enter Twilio in the Search bar, and select Twilio: Number.
  12. Click Select or create a new Value in the Value field for To.
  13. Enter To in the Search bar, and select To: Me.
  14. In the Outputs section click Select or create a new Value in Reply.
  15. Enter Text in the Search bar, and select Text: Response.
  16. Click Apply Message Action.
  17. Click Save Message.

    This is what the canvas looks like now:

Creating the outcome – Yes for Q1
  1. Hover your mouse on Question 1The mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Question 1 to Gryffindor.
  3. In the Configuration Panel, type Yes in the Name text field.
  4. Click the + to expand the Advanced section.
  5. Click New Business Rule.
  6. In the The Value to test field, click Select or create a new Value.
  7. Enter Text in the Search bar, and select Text: Response.
  8. In The criteria to test by field, select Contains.
  9. In The Value to test against field, click Select or create a new Value.
  10. Click Create a new Value.
  11. In the Value dialog box, write Y in the Name field.
  12. Select String from the What kind of Value is this? menu.
  13. In the Default Value field type Y and click Save.
  14. Click Apply Business Rule.
  15. Click Save Outcome.

This is what the canvas looks like now:


Creating the Outcome – No for Q1

We now need to create an outcome from Question 1 to Question 2. Our canvas will look neater if the question boxes were aligned. Drag the Question 2 step and place it under Question 1 (you can drag and drop the element boxes and the outcomes around the canvas anytime). This is what the canvas looks like now:

  1. Hover your mouse on Question 1The mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Question 1 to Question 2.
  3. In the Configuration Panel, type No in the Name text field.
  4. Click New Business Rule.
  5. In the The Value to test field, click Select or create a new Value.
  6. Enter Text in the Search bar, and select Text: Response.
  7. In The criteria to test by field, select Is Empty.
  8. In The Value to test against field, click Select or create a new Value.
  9. Enter $False in the Search bar, and select $False.
  10. Click Apply Business Rule and then click Save Outcome.

This is what the canvas looks like now:


Confirming the house (If the user responds Yes to the second text message)
  1. Drag a Message element from the sidebar, to the Canvas. Place it next to the Question 2 box.
  2. In the Configuration Panel, copy-paste Slytherin in the Name text field and click New Message Action.
  3. Select Twilio Service from the The Service to send the Message drop-down menu.
  4. Click the Select button next to Send SMS (Simple).
  5. Click Select or create a new Value in the Value field for Body.
  6. Click Create a new Value.
  7. In the Value dialog box, copy-paste Result: Slytherin in the Name field.
  8. Select String from the What kind of Value is this? menu.
  9. In the Default Value field, copy-paste Lord V welcomes you, Slytherin. We have better pizza. And Vader. We have Vader. and click Save.
  10. Click Select or create a new Value in the Value field for From.

  11. Enter Twilio in the Search bar, and select Twilio: Number.
  12. Click Select or create a new Value in the Value field for To.
  13. Enter To in the Search bar, and select To: Me.
  14. Click Apply Message Action and click Save Message.

This is what the canvas looks like now:


Confirming user not a wizard
  1. Drag a Message element from the sidebar, to the Canvas. Place it under the Question 2 box.
  2. In the Configuration Panel, copy-paste Hello Human in the Name text field and click New Message Action.
  3. Select Twilio Service from the The Service to send the Message drop-down menu.
  4. Click the Select button next to Send SMS (Simple).
  5. Click Select or create a new Value in the Value field for Body.
  6. Click Create a new Value.
  7. In the Value dialog box, copy-paste Result: Human in the Name field.
  8. Select String from the What kind of Value is this? menu.
  9. In the Default Value field, copy-paste You are a human, Human. Wait for your Hogwarts letter. and click Save.

  10. Click Select or create a new Value in the Value field for From. 
  11. Enter Twilio in the Search bar, and select Twilio: Number.
  12. Click Select or create a new Value in the Value field for To.
  13. Enter To in the Search bar, and select To: Me.
  14. Click Apply Message Action and click Save Message.

This is what the canvas looks like now:


Creating the Outcome – Yes for Q2
  1. Hover your mouse on Question 2The mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Question 2 to Slytherin.
  3. In the Configuration Panel, type Yes in the Name text field.
  4. Click New Business Rule.
  5. In the The Value to test field, click Select or create a new Value.
  6. Enter Text in the Search bar, and select Text: Response.
  7. In The criteria to test by field, select Contains.
  8. In The Value to test against field, click Select or create a new Value.
  9. Enter Y in the Search bar, and select Y.
  10. Click Apply Business Rule and then click Save Outcome.

This is what the canvas looks like now:


Creating the Outcome – No for Q2
  1. Hover your mouse on Question 2The mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Question 2 to Hello Human.
  3. In the Configuration Panel, type No in the Name text field.
  4. Click New Business Rule.
  5. In the The Value to test field, click Select or create a new Value.
  6. Enter Text in the Search bar and select Text: Response.
  7. In The criteria to test by field, select Is Empty.
  8. In The Value to test against field, click Select or create a new Value.
  9. Enter $False in the Search bar, and select $False.
  10. Click Apply Business Rule and then click Save Outcome.

That was fast!

You have just built a TextBot. Congratulations!

Let’s run the flow now, and see how easily it converts into an app.


Appchievement!

It took us around 60 minutes to build an app that can send out text messages.

This is what the first screen of the app looks like on a browser:

On your mobile, this is what the first screen looks like:

Take a look at the texts that go out:


Check out the ManyWho glossary for a definition of terms and key concepts that appear in the ManyWho website, Drawing Tool, technical documentation, blogs, and marketing communications.