Skip to content

Instantly share code, notes, and snippets.

@robjshaw

robjshaw/make-call.html

Created April 8, 2022 04:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save robjshaw/f91787622f2d9fa8724c4cc99d323fca to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save robjshaw/f91787622f2d9fa8724c4cc99d323fca to your computer and use it in GitHub Desktop.
Download ZIP
Raw
make-call.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="url_reader.js"></script>
</head>
<body>
<div class="container" style="padding:20px;">
<!--
<div class="alert alert-primary" role="alert">All calls will be masked and recorded. After the call the recording will be attached to this ticket for furture reference</div>
-->
<form name="log_call" method="POST" action="/finish_call">
<input type="text" id="phone-number" />
<input type="hidden" name="issueid" id="issueid" />
<div class="form-group">
<label for="call_summary">Call Notes</label>
<textarea class="form-control" id="call_summary" name="call_summary" rows="3"></textarea>
</div>
<div id="client-name"></div>
<div id="call-controls">
<button type="button" id="button-call"class="btn btn-primary">Call</button>
<button type="button" id="button-hangup"class="btn btn-warning">Hang Up</button>
<button type="submit" id="button-hangup"class="btn btn-danger">Log Call and Exit</button>
<div id="volume-indicators">
<label>Mic Volume</label>
<div id="input-volume"></div><br/><br/>
<label>Speaker Volume</label>
<div id="output-volume"></div>
</div>
</div>
<div id="log"></div>
</div>
</form>
<div id="controls" style="display:none;">
<div id="info">
<p class="instructions">Twilio Client</p>
<div id="client-name"></div>
<div id="output-selection">
<label>Ringtone Devices</label>
<select id="ringtone-devices" multiple></select>
<label>Speaker Devices</label>
<select id="speaker-devices" multiple></select><br/>
<a id="get-devices">Seeing unknown devices?</a>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script>
$('#issueid').val(getAllUrlParams().issueid);
$('#phone-number').val(getAllUrlParams().phonenumber);
</script>
<script type="text/javascript" src="https://media.twiliocdn.com/sdk/js/client/v1.8/twilio.min.js"></script>
<script type="text/javascript" src="quickstart.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment