Power your Twilio applications using HTML5.
<html>
<body>
<p>Hello world</p>
</body>
</html>You can change the voice and language of the spoken text.
<html>
<body>
<p lang="fr" data-voice="woman">Hello world</p>
</body>
</html>If you'd like to insert a pause, use an <hr> element.
<html>
<body>
<p>Hello World</p>
<hr data-length=10 />
<p>How are you?</p>
</body>
</html>Using the little known menu element, you can easily build phone trees, no
server-side logic required. Links must have the digit data attribute for menu
routing to work. This value can be an integer.
<html>
<body>
<menu type="list">
<li><a href="/monkey.html" data-digit=1>For a monkey, press 1</a></li>
<li><a href="/gorilla.html" data-digit=2>For a gorilla, press 2</a></li>
</menu>
</body>
</html>URI schemes allow users to directly connect to phones, conferences, and clients
<a href="tel:+15555551234" data-digit=1>To dial a phone, press 1</a><a href="conference:foo" data-digit=1>To dial a conference, press 1</a><a href="client:foo" data-digit=1>To dial a browser, press 1</a><html>
<body>
<audio src="http://demo.twilio.com/hellomonkey/monkey.mp3" controls></audio>
</body>
</html><html>
<body>
<audio>
<source src="http://demo.twilio.com/hellomonkey/monkey.mp3">
<p>This text will be read if the above url fails to load</p>
</audio>
</body>
</html>Forms support text, hidden, and select inputs. You can only have one text or select input per form. Label text is also read
In the future, we may support multiple inputs via some magic.
<html>
<body>
<form action="/keypads/process" method="POST">
<label for="foo">Please enter your zipcode</label>
<input name="foo" type="text">
</form>
</body>
</html>You currently must to validation server-side. In the future, we may have default error messages if validation attributes are provided
Recording speech works in a similar fashion, just specify the speech attribute
<html>
<body>
<form action="/keypads/process" method="POST">
<input type="text" speech>
</form>
</body>
</html>The above examples are concise, but not entirely correct. To ensure validation and proper support in the future, make sure you declare a DOCTYPE, character-encoding, and langauge.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
... content here ...
</body>
</html>