@cocreate/twilio
Version:
A simple twilio component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
113 lines (109 loc) • 5.32 kB
HTML
<html lang="en">
<head>
<title>Create Call | wilio</title>
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body>
<form data-template_id="createCall" data-render_id="render2">
<!--<input twilio="dial.To" value="+19418820466">-->
<input twilio="dial.To" value="+13472189814" />
<input twilio="dial.From" value="+16027372368" />
<input
twilio="holdCall.CallSid"
value="{{render2.parameters.CallSid}}" />
<input
twilio="hangupStopCall.CallSid"
value="{{render2.parameters.CallSid}}" />
<input twilio="holdCall.nameEnqueue" value="support" />
<input
twilio="holdCall.url"
value="https://server.cocreate.app:8088/twilio/actions_twiml" />
<br />
<button actions="createCall">start Call</button>
<button actions="holdCall, getConferences">Hold</button>
<button actions="unholdCall">UnHold</button>
<button actions="answerCall">answerCall</button>
<button actions="hangupCall">StopCall</button>
<button actions="getConferences">getConferences</button>
</form>
<!--<button actions="hangupStopCall">StopCallAll</button>-->
<div data-template_id="getConferences">
<h4>List conferences:-</h4>
<div
class="template margin:10px;"
value="{{data.id}}"
data-render_array="data">
<form class="padding:5px">
<div
style="
display: flex;
align-items: center;
width: 100%;
flex-wrap: wrap;
">
<input
twilio="joinConference.friendlyName"
value="{{data.friendlyName}}" />
<input
type="hidden"
twilio="endConference.CallSid"
value="{{data.idconference}}" />
<input
type="hidden"
twilio="holdConference.CallSid"
value="{{data.idconference}}" />
<input
type="hidden"
twilio="unholdConference.CallSid"
value="{{data.idconference}}" />
<input
type="hidden"
twilio="getParticipantsConference.CallSid"
value="{{data.idconference}}" />
<button actions="holdConference">hold Conf</button>
<button actions="unholdConference">UnHold Conf</button>
<button
actions="joinConference"
data-friendlykey="{{data.friendlyName}}">
Join
</button>
<button actions="endConference">Closed</button>
<div
data-template_id="getParticipantsConferences_{{data.idconference}}">
<button
actions="getParticipantsConference"
data-friendlykey="{{data.friendlyName}}"
data-idconference="{{data.idconference}}">
GetParticipants
</button>
<ul
class="template margin:10px;"
value="{{participant.id}}"
data-render_array="participant">
<input
type="text"
twilio="delParticipantsConference.idconference"
value="{{participant.conferenceSid}}" />
<input
type="text"
twilio="delParticipantsConference.idparticipant"
value="{{participant.callSid}}" />
<li
value="{{participant.call.sid}} - TO : {{participant.call.to}} - from : {{participant.call.from}}"></li>
<button actions="delParticipantsConference">
DElete
</button>
idconference
</ul>
</div>
</div>
</form>
<hr />
</div>
</div>
<!--CoCreateJS-->
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
<!-- <script src="../dist/CoCreate-twilio.js"></script> -->
</body>
</html>