Tutorial: TextBot app with Twilio

Content under development

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 California Girls’ High School (CGHS) of Wizardry sort students 

The magical sorting mat at CGHS wants to see if students belong to the white or black magic arts. Any sufficiently advanced technology is indistinguishable from magic. There is an app for this!

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 a decision, or asks a second question.
  3. Based on the response to the second question, the app either texts the user a decision, 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:

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’ if you like.)

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.

    This is what the canvas looks like now:

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 White 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: White 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: White in the Name field.
  8. Select String from the What kind of Value is this? menu.
  9. In the Default Value field, type You seem to be suited for white magic! 
  10. Click Save.
  11. Click Select or create a new Value in the Value field for From.
  12. Enter Twilio in the Search bar, and select Twilio: Number.
  13. Click Select or create a new Value in the Value field for To.
  14. Enter To in the Search bar and select To: Me.
  15. Click Apply Message Action.
  16. 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: Black 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 dark magic 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 White.
  3. In the Configuration Panel, type Yes in the Name text field.
  4. Click the + to expand the Advanced section.
  5. Click Edit Business Rules.
  6. Click New Rule.
  7. Click Select or create a new Value.
  8. Enter Text in the Search bar, and select Text: Response.
  9. Click the arrow to expand the rule logic section, and select Contains.
  10. Click Select or create a new Value.
  11. Click Create a new Value.
  12. In the Value dialog box, write Y in the Name field.
  13. Select String from the What kind of Value is this? menu.
  14. In the Default Value field type Y and click Save.
  15. Click Save.
  16. 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).

  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 Edit Business Rules.
  5. Click New Rule.
  6. Click Select or create a new Value.
  7. Enter Text in the Search bar, and select Text: Response.
  8. Click the arrow to expand the rule logic section, and select Empty.
  9. Click Select or create a new Value.
  10. Enter $False in the Search bar, and select $False.
  11. Click Save.
  12. Click Save Outcome.

This is what the canvas looks like now:


Confirming black magic (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 Black 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: Black in the Name field.
  8. Select String from the What kind of Value is this? menu.
  9. In the Default Value field, copy-paste Welcome to the dark side. We have pizza. 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:


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 CGHS letter.
  10. Click Save.
  11. Click Select or create a new Value in the Value field for From. 
  12. Enter Twilio in the Search bar, and select Twilio: Number.
  13. Click Select or create a new Value in the Value field for To.
  14. Enter To in the Search bar, and select To: Me.
  15. Click Apply Message Action.

  16. 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 Black.
  3. In the Configuration Panel, type Yes in the Name text field.
  4. Click Edit Business Rules.
  5. Click New Rule.
  6. Click Select or create a new Value.
  7. Enter Text in the Search bar, and select Text: Response.
  8. Click the arrow to expand the rule logic section, and select Contains.
  9. Click Select or create a new Value.
  10. Enter Y in the Search bar, and select Y.
  11. Click Save 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 Edit Business Rules.
  5. Click New Rule.
  6. Click Select or create a new Value.
  7. Enter Text in the Search bar and select Text: Response.
  8. Click the arrow to expand the rule logic section, and select Empty.
  9. Click Select or create a new Value.
  10. Enter $False in the Search bar, and select $False.
  11. Click Save.
  12. Click Save Outcome.

That was fast!

You have just built a TextBot. Congratulations!

This is what the screen looks like:

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:

The app sends a text to the mobile number you had entered:

This is the reply we get, if we text back ‘Yes’:

If we text back ‘No’ the app asks us a second question:

Let’s say we text back ‘No’:

… And if we text back ‘Yes’:

If you are keeping an eye on your flow run tab, you will see the flow alerts you where it is – for example, like here, when it is waiting for a reply to the text:


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.