Tutorial: Text-to-Speech (TTS) app with Twilio

The Text-to-Speech (TTS) app with Twilio, configures an automated call that converts text you enter into voice. The asynchronous app calls you at a predetermined time – use this to set up a wake-up call while traveling, or to get automated reminder calls.

We will build the app using Twilio — a cloud communications service for voice and messaging applications, and a Timer Service — a ManyWho plugin that lets your app pause for a pre-specified amount of time, and then continue.

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. Timer Service for ManyWho configured. (Learn more here.)
  7. 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 and Timer services
  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 Timer Service.
  5. Select Services again and click Import Existing.
  6. Click the Import button next to the Twilio Service.
  7. Click Close.

The Shared Elements > Services screen will show the Twilio service and Timer Service, once they are imported to the flow.

The ManyWho Identity Service is available to all flows by default.


Sending the user a text message and getting the response
  1. Drag a Message element from the sidebar, to the canvas.
  2. In the Configuration Panel, copy-paste the text Time for call 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: Time for call panel 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 Message: Time to Wait in the Name field.
  8. Select String from the What kind of Value is this? menu.
  9. In the Default Value field, copy-paste the text When do you want this bot to call you (e.g. 1 minute, 30 seconds, 2 hours)? 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.
  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 Time for call. 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:


Configuring the time
  1. Drag a Message element from the sidebar, to the ManyWho Canvas.
  2. In the Configuration Panel, copy-paste the text Waiting for the exact time in the Name text field and click New Message Action.
  3. Select Timer Service from the The Service to send the Message drop-down menu.
  4. Click the Select button next to Wait: Relative.
  5. Click Select or create a new Value in the Value field for Schedule.
  6. Type Text in the Search bar and select Text: Response.
  7. Click Apply Message Action and click Save Message.

This is what the canvas looks like now:


Creating the outcome for Time for Call
  1. Hover your mouse on Time for CallThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Time for Call to Waiting for the exact time.
  3. In the Configuration Panel, type Done in the Name text field.
  4. Click + to expand the Advanced section.
  5. Click New Business Rule. (This business rule makes the outcome wait for the text response, i.e., the time to call, pausing the flow. The flow resumes when the user texts back.)
  6. In the dialog box, click Select or create a new Value in The Value to test field.
  7. Type Text in the Search bar and select Text: Response.
  8. Select Is Empty in The Criteria to test by field.
  9. Click Select or create a new Value in the The Value to test against field.  
  10. Type $ in the Search bar and select $False.
  11. Click Apply Business Rule.
  12. Click Save Outcome.

This is what the canvas looks like now:


Getting the app to call your phone
  1. Drag a Message element from the sidebar, to the canvas.
  2. In the Configuration Panel, type Call me 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 Start Outbound Call (Simple).
  5. Click Select or create a new Value in the Value field for From.
  6. Enter Twilio in the Search bar and select Twilio Number.
  7. Click Select or create a new Value in the Value field for Record.
  8. Type $ in the Search bar and select $False.
  9. Click Select or create a new Value in the Value field for Timeout. This is the amount of time Twilio should wait for an unresponsive phone before timing out.
  10. Click Create a new Value.
  11. Copy-paste Timeout: 60 in the Name field.
  12. The What kind of Value is this? should say Number.
  13. In the Default Value field type 60 and click Save.
  14. Click Select or create a new Value in the Value field for To.
  15. Enter To in the Search bar and select To: Me.
  16. Click Apply Message Action.
  17. Click Save Message.

This is what the canvas looks like now:


Creating the outcome for Waiting for the exact time
  1. Hover your mouse on Waiting for the exact timeThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Waiting for the exact time to Call me.
  3. In the Configuration Panel, type Done in the Name text field, and click Save Outcome.

This is what the canvas looks like now:


Creating the automated call message
  1. Drag a Step element from the sidebar, to the canvas.
  2. In the Configuration Panel, type Hello in the Name text field.
  3. In the Content Editor, copy-paste the text This is AlarmBot calling you with a reminder. Have a good day!
  4. Click Save Step.

This is what the canvas looks like now:


Creating the outcome for Call me
  1. Hover your mouse on Call meThe mouse pointer changes from a crossbar to a hand.
  2. Drag an arrow from Call me to Hello.
  3. In the Configuration Panel, type Done in the Name text field, and 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 emails.

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

The app has send a text message out, to which we have replied – 30 seconds.

Exactly 30 seconds later, the app calls us.

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


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.

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.