Skip to content

Commit d6af31e

Browse files
druv5319druv5319
committed
style(voice-ivr): Run prettier
1 parent ad1016a commit d6af31e

File tree

5 files changed

+141
-100
lines changed

5 files changed

+141
-100
lines changed

‎voice-ivr/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
This application allows users to navigate an IVR (phone tree) using keys or speech-to-text via a Twilio number. When a user calls the number, they are presented with three options: Talk to Sales, Hours of Operation, or Address. Selecting the first option forwards the call to a given phone number. The second provides an immediate voice response with relevant information. Choosing the third option triggers an SMS with the requested details. The application is fully customizable, allowing you to edit the available options and responses.
44

55
## Pre-requisites
6+
67
- A Twilio account - [sign up here](https://www.twilio.com/try-twilio)
78
- A Twilio phone number
89

‎voice-ivr/assets/index.html

+125-84
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,131 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="x-ua-compatible" content="ie=edge">
7-
<title>Get started with your Twilio Functions!</title>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="x-ua-compatible" content="ie=edge" />
7+
<title>Get started with your Twilio Functions!</title>
88

9-
<link rel="icon" href="https://twilio-labs.github.io/function-templates/static/v1/favicon.ico">
10-
<link rel="stylesheet" href="https://twilio-labs.github.io/function-templates/static/v1/ce-paste-theme.css">
9+
<link
10+
rel="icon"
11+
href="https://twilio-labs.github.io/function-templates/static/v1/favicon.ico"
12+
/>
13+
<link
14+
rel="stylesheet"
15+
href="https://twilio-labs.github.io/function-templates/static/v1/ce-paste-theme.css"
16+
/>
1117

12-
<script src="https://twilio-labs.github.io/function-templates/static/v1/ce-helpers.js" defer></script>
13-
<script>
14-
window.addEventListener('DOMContentLoaded', (_event) => {
15-
inputPrependBaseURL();
16-
});
17-
</script>
18-
</head>
19-
<body>
20-
<div class="page-top">
21-
<header>
22-
<div id="twilio-logo">
23-
<a href="https://www.twilio.com/" target="_blank" rel="noopener">
24-
<svg class="logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 60 60">
25-
<title>Twilio Logo</title><path class="cls-1" d="M30,15A15,15,0,1,0,45,30,15,15,0,0,0,30,15Zm0,26A11,11,0,1,1,41,30,11,11,0,0,1,30,41Zm6.8-14.7a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,26.3Zm0,7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,33.7Zm-7.4,0a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,33.7Zm0-7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,26.3Z"/></svg>
26-
</a>
27-
</div>
28-
<nav>
29-
<span>Your Twilio application</span>
30-
<aside>
31-
<svg class="icon" role="img" aria-hidden="true" width="100%" height="100%" viewBox="0 0 20 20" aria-labelledby="NewIcon-1577"><path fill="currentColor" fill-rule="evenodd" d="M6.991 7.507c.003-.679 1.021-.675 1.019.004-.012 2.956 1.388 4.41 4.492 4.48.673.016.66 1.021-.013 1.019-2.898-.011-4.327 1.446-4.48 4.506-.033.658-1.01.639-1.018-.02-.03-3.027-1.382-4.49-4.481-4.486-.675 0-.682-1.009-.008-1.019 3.02-.042 4.478-1.452 4.49-4.484zm.505 2.757l-.115.242c-.459.9-1.166 1.558-2.115 1.976l.176.08c.973.465 1.664 1.211 2.083 2.22l.02.05.088-.192c.464-.973 1.173-1.685 2.123-2.124l.039-.018-.118-.05c-.963-.435-1.667-1.117-2.113-2.034l-.068-.15zm10.357-8.12c.174.17.194.434.058.625l-.058.068-1.954 1.905 1.954 1.908a.482.482 0 010 .694.512.512 0 01-.641.056l-.07-.056-1.954-1.908-1.954 1.908a.511.511 0 01-.71 0 .482.482 0 01-.058-.626l.058-.068 1.954-1.908-1.954-1.905a.482.482 0 010-.693.512.512 0 01.64-.057l.07.057 1.954 1.905 1.954-1.905a.511.511 0 01.71 0z"></path></svg>
32-
Live
33-
</aside>
34-
</nav>
35-
</header>
18+
<script
19+
src="https://twilio-labs.github.io/function-templates/static/v1/ce-helpers.js"
20+
defer
21+
></script>
22+
<script>
23+
window.addEventListener('DOMContentLoaded', (_event) => {
24+
inputPrependBaseURL();
25+
});
26+
</script>
27+
</head>
28+
<body>
29+
<div class="page-top">
30+
<header>
31+
<div id="twilio-logo">
32+
<a href="https://www.twilio.com/" target="_blank" rel="noopener">
33+
<svg
34+
class="logo"
35+
data-name="Layer 1"
36+
xmlns="http://www.w3.org/2000/svg"
37+
viewbox="0 0 60 60"
38+
>
39+
<title>Twilio Logo</title>
40+
<path
41+
class="cls-1"
42+
d="M30,15A15,15,0,1,0,45,30,15,15,0,0,0,30,15Zm0,26A11,11,0,1,1,41,30,11,11,0,0,1,30,41Zm6.8-14.7a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,26.3Zm0,7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,36.8,33.7Zm-7.4,0a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,33.7Zm0-7.4a3.1,3.1,0,1,1-3.1-3.1A3.12,3.12,0,0,1,29.4,26.3Z"
43+
/>
44+
</svg>
45+
</a>
3646
</div>
37-
<main>
38-
<div class="content">
39-
<h1>
40-
<img src="https://twilio-labs.github.io/function-templates/static/v1/success.svg" />
41-
<div>
42-
<p>Welcome!</p>
43-
<p>Your live application with Twilio is ready to use!</p>
44-
</div>
45-
</h1>
46-
<section>
47-
<h2>Get started with your application</h2>
48-
<p>
49-
Follow these steps to try out your new app:
50-
</p>
51-
<p>
52-
This app presents callers with an IVR (phone tree) whose options can be selected using
53-
either phone keypad digits or the caller's voice.
54-
</p>
55-
<ol class="steps">
56-
<li>Call your Twilio phone number</li>
57-
<li>You should be greeted by a voice listing all options</li>
58-
<li>Press any of the mentioned digits or try saying the words</li>
59-
</ol>
60-
</section>
47+
<nav>
48+
<span>Your Twilio application</span>
49+
<aside>
50+
<svg
51+
class="icon"
52+
role="img"
53+
aria-hidden="true"
54+
width="100%"
55+
height="100%"
56+
viewBox="0 0 20 20"
57+
aria-labelledby="NewIcon-1577"
58+
>
59+
<path
60+
fill="currentColor"
61+
fill-rule="evenodd"
62+
d="M6.991 7.507c.003-.679 1.021-.675 1.019.004-.012 2.956 1.388 4.41 4.492 4.48.673.016.66 1.021-.013 1.019-2.898-.011-4.327 1.446-4.48 4.506-.033.658-1.01.639-1.018-.02-.03-3.027-1.382-4.49-4.481-4.486-.675 0-.682-1.009-.008-1.019 3.02-.042 4.478-1.452 4.49-4.484zm.505 2.757l-.115.242c-.459.9-1.166 1.558-2.115 1.976l.176.08c.973.465 1.664 1.211 2.083 2.22l.02.05.088-.192c.464-.973 1.173-1.685 2.123-2.124l.039-.018-.118-.05c-.963-.435-1.667-1.117-2.113-2.034l-.068-.15zm10.357-8.12c.174.17.194.434.058.625l-.058.068-1.954 1.905 1.954 1.908a.482.482 0 010 .694.512.512 0 01-.641.056l-.07-.056-1.954-1.908-1.954 1.908a.511.511 0 01-.71 0 .482.482 0 01-.058-.626l.058-.068 1.954-1.908-1.954-1.905a.482.482 0 010-.693.512.512 0 01.64-.057l.07.057 1.954 1.905 1.954-1.905a.511.511 0 01.71 0z"
63+
></path>
64+
</svg>
65+
Live
66+
</aside>
67+
</nav>
68+
</header>
69+
</div>
70+
<main>
71+
<div class="content">
72+
<h1>
73+
<img
74+
src="https://twilio-labs.github.io/function-templates/static/v1/success.svg"
75+
/>
76+
<div>
77+
<p>Welcome!</p>
78+
<p>Your live application with Twilio is ready to use!</p>
79+
</div>
80+
</h1>
81+
<section>
82+
<h2>Get started with your application</h2>
83+
<p>Follow these steps to try out your new app:</p>
84+
<p>
85+
This app presents callers with an IVR (phone tree) whose options can
86+
be selected using either phone keypad digits or the caller's voice.
87+
</p>
88+
<ol class="steps">
89+
<li>Call your Twilio phone number</li>
90+
<li>You should be greeted by a voice listing all options</li>
91+
<li>Press any of the mentioned digits or try saying the words</li>
92+
</ol>
93+
</section>
6194

62-
<section>
63-
<!-- APP_INFO_V2 -->
64-
</section>
65-
<section>
66-
<h2>Troubleshooting</h2>
67-
<ul>
68-
<li>
69-
Check the
70-
<a href="https://www.twilio.com/console/phone-numbers/incoming"
71-
target="_blank"
72-
rel="noopener">
73-
phone number configuration
74-
</a>
75-
and make sure the Twilio phone number you want for your app has a voice webhook
76-
configured to point at the following URL
77-
<form>
78-
<label for="twilio-webhook">Webhook URL</label>
79-
<input type="text" id="twilio-webhook" class="function-root" readonly=true value="/voice-ivr">
80-
</form>
81-
</li>
82-
</ul>
83-
</section>
84-
</div>
85-
</main>
86-
<footer>
87-
<span class="statement">We can't wait to see what you build.</span>
88-
</footer>
89-
</body>
95+
<section>
96+
<!-- APP_INFO_V2 -->
97+
</section>
98+
<section>
99+
<h2>Troubleshooting</h2>
100+
<ul>
101+
<li>
102+
Check the
103+
<a
104+
href="https://www.twilio.com/console/phone-numbers/incoming"
105+
target="_blank"
106+
rel="noopener"
107+
>
108+
phone number configuration
109+
</a>
110+
and make sure the Twilio phone number you want for your app has a
111+
voice webhook configured to point at the following URL
112+
<form>
113+
<label for="twilio-webhook">Webhook URL</label>
114+
<input
115+
type="text"
116+
id="twilio-webhook"
117+
class="function-root"
118+
readonly="true"
119+
value="/voice-ivr"
120+
/>
121+
</form>
122+
</li>
123+
</ul>
124+
</section>
125+
</div>
126+
</main>
127+
<footer>
128+
<span class="statement">We can't wait to see what you build.</span>
129+
</footer>
130+
</body>
90131
</html>

‎voice-ivr/changelog.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
## [Unreleased]
44

55
## [1.0.0]
6+
67
### Added
7-
- Initial release.
88

9+
- Initial release.

‎voice-ivr/functions/handle-user-input.protected.js

+10-12
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
*
44
* Description:
55
* This file contains the input handler to the Voice IVR Function template.
6-
* The incoming phone call will be transferred from the voice-ivr Function
6+
* The incoming phone call will be transferred from the voice-ivr Function
77
* to this function using the Gather TwiML verb which will also pass in the
88
* users input. This Function will read the users input and respond
99
* back depending on the users selection.
10-
*
10+
*
1111
*
1212
* Contents:
1313
* 1. SMS Handler
@@ -25,10 +25,10 @@
2525
function sendMessage(context, event) {
2626
const client = context.getTwilioClient();
2727
return client.messages.create({
28-
from: event.To,
29-
to: event.From,
30-
body: 'Here is our address: 375 Beale St #300, San Francisco, CA 94105, USA',
31-
});
28+
from: event.To,
29+
to: event.From,
30+
body: 'Here is our address: 375 Beale St #300, San Francisco, CA 94105, USA',
31+
});
3232
}
3333

3434
/**
@@ -41,15 +41,15 @@ function sendMessage(context, event) {
4141
* SpeechResult variables from the incoming request parameters. If the
4242
* user input was given by speech-to-text, it will convert it to its digit
4343
* counterpart.
44-
*
44+
*
4545
* If option 1 (sales) was chosen, the function will forward the call
46-
* and dial the MY_PHONE_NUMBER specified in /.env. If option 2
46+
* and dial the MY_PHONE_NUMBER specified in /.env. If option 2
4747
* (opening hours) was chosen, the Voice Response will respond to the
4848
* caller with the opening hours. If option 3 (address) was chosen,
4949
* the SMS handler will be executed and text the address to the caller.
5050
* If any other input was chosen, the call will go in a loop and redirect
5151
* the call to the voice-ivr Function.
52-
*
52+
*
5353
*/
5454

5555
exports.handler = async function (context, event, callback) {
@@ -95,10 +95,8 @@ exports.handler = async function (context, event, callback) {
9595

9696
try {
9797
if (UserInput === '3') await sendMessage(context, event);
98-
}
99-
catch(err) {
98+
} catch (err) {
10099
return callback(err);
101100
}
102101
return callback(null, twiml);
103-
104102
};

‎voice-ivr/functions/voice-ivr.protected.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
*
44
* Description:
55
* This file contains the entry point to the Voice IVR function template
6-
* which will prompt the user with an IVR phone tree with three options.
7-
*
6+
* which will prompt the user with an IVR phone tree with three options.
7+
*
88
*
99
* Contents:
1010
* 1. Main Handler
@@ -15,7 +15,7 @@
1515
*
1616
* This is the entry point to your Twilio Function, which will create
1717
* and return a TwiML Voice Response that will prompt the user with
18-
* three options: Talk to Sales, Hours of Operation, or Address.
18+
* three options: Talk to Sales, Hours of Operation, or Address.
1919
* If the user enters something it will trigger the handle-user-input Function and otherwise go in a loop.
2020
*
2121
*/

0 commit comments

Comments
 (0)