Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
66 lines (59 sloc) 2.53 KB
<!DOCTYPE html>
<html>
<head>
<!-- Load the polyfill so that this works in browsers that don't yet have Custom Elements -->
<script src="//unpkg.com/@webcomponents/webcomponentsjs/webcomponents-bundle.js" defer></script>
<script src="//unpkg.com/circuit-sdk@latest/circuit.min.js" async></script>
<script type="module" src="../circuit-call-button.js" defer></script>
<style>
/* Global page styles which are inherited by element */
body {
font-family: sans-serif;
font-size: 13px;
}
/* Hide button until defined to prevent flash rendering */
circuit-call-button:not(:defined) {
opacity: 0;
}
/* Style button. Defaults to circuit colors. */
circuit-call-button {
color: snow;
background: steelblue;
font-size: 14px;
}
/* Use 'inprogress' attribute to style button when call can be cancelled.
This is in delieverd and active states */
circuit-call-button[inprogress] {
color: snow;
background: firebrick;
}
</style>
</head>
<body>
<h2>Audio call</h2>
<p>Uses web component <code>circuit-call-button</code> to start an audio call with a Circuit user specified by the <code>target</code> attribute. OAuth popup asking for Circuit authentication and permissions is shown for the first call.</p>
<circuit-call-button
domain="circuitsandbox.net"
clientId="f06c51a30f0d4eb6acc05829c3e86266"
target="circuitsdk01@gmail.com"
callingText="Calling Helpdesk..."
hangupText="End call">Call Helpdesk</circuit-call-button>
<p>callstate: <b><span id="callstate"></span></b></p>
<p>
<a target="_blank" href="https://github.com/circuit/circuit-web-components/blob/master/examples/audioCall.html">source</a> |
<a target="_blank" href="https://github.com/circuit/circuit-web-components/tree/master/docs">documentation</a> |
<a target="_blank" href="https://github.com/circuit/circuit-web-components">github</a> |
<a target="_blank" href="https://www.npmjs.com/package/@unify/circuit-web-components">npm</a>
</p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const el = document.querySelector('circuit-call-button');
const callEl = document.getElementById('callstate');
callEl.textContent = el.call ? el.call.state : 'Idle';
el.addEventListener('callchange', e =>
callEl.textContent = e.detail ? e.detail.state : 'Idle'
);
});
</script>
</body>
</html>