Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
66 lines (59 sloc) 2.53 KB
<!DOCTYPE html>
<!-- Load the polyfill so that this works in browsers that don't yet have Custom Elements -->
<script src="//" defer></script>
<script src="//" async></script>
<script type="module" src="../circuit-call-button.js" defer></script>
/* 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;
<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>
callingText="Calling Helpdesk..."
hangupText="End call">Call Helpdesk</circuit-call-button>
<p>callstate: <b><span id="callstate"></span></b></p>
<a target="_blank" href="">source</a> |
<a target="_blank" href="">documentation</a> |
<a target="_blank" href="">github</a> |
<a target="_blank" href="">npm</a>
document.addEventListener('DOMContentLoaded', () => {
const el = document.querySelector('circuit-call-button');
const callEl = document.getElementById('callstate');
callEl.textContent = ? : 'Idle';
el.addEventListener('callchange', e =>
callEl.textContent = e.detail ? e.detail.state : 'Idle'