Circuit Web Component Examples

Audio call
Demonstrates use of circuit-call-button for a direct audio call. Properties such as target may be set in HTML or using JavaScript.
<circuit-call-button domain="circuitsandbox.net" clientId="{client_id}" target="help@xyz.com" callingText="Calling Helpdesk..." hangupText="End call">Call Helpdesk </circuit-call-button>
Live demo Source
circuit-call-button
Video call
Demonstrates use of circuit-call-button for a direct video call with circuit-call-stage to show the local and remote video.
<circuit-call-button video domain="circuitsandbox.net" clientId="{client_id}" target="hr@xyz.com">Call HR </circuit-call-button> <circuit-call-stage></circuit-call-stage>document.querySelector('circuit-call-button') .addEventListener('callchange', e => document.querySelector('circuit-call-stage').call = e.detail )
Live demo Source
circuit-call-buttoncircuit-call-stage
Video conference
Demonstrates use of circuit-call-button to start of join a conference, and circuit-call-stage to show the video.
<circuit-call-button video domain="circuitsandbox.net" clientId="{client_id}" target="{conv_id}" callingText="Starting..." joinText="Join conference">Start conference</circuit-call-button> <circuit-call-stage></circuit-call-stage>const btnEl = document.querySelector('circuit-call-button') const stageEl = document.querySelector('circuit-call-stage') btnEl.addEventListener('callchange', e => stageEl.call = e.detail)
Live demo Source
circuit-call-buttoncircuit-call-stage
Guest video conference
Demonstrates use of circuit-call-button to join a conference as guest, and circuit-call-stage to show the video. Guest user does not need to logon as it uses a conference token provided by the meeting organizer.
<circuit-call-button video clientId="{client_id}" token="..." callingText="Waiting..." hangupText="Leave conference">Join conference as guest </circuit-call-button> <circuit-call-stage></circuit-call-stage>const btnEl = document.querySelector('circuit-call-button') const stageEl = document.querySelector('circuit-call-stage') btnEl.addEventListener('callchange', e => stageEl.call = e.detail) btnEl.addEventListener('waitingchange', e => btnEl.callingText = e.detail ? 'Waiting...' : 'Joining ...' )
Live demo Source
circuit-call-buttoncircuit-call-stage
Guest video call (with pool user)
Demonstrates use of circuit-call-button and circuit-call-stage for a direct video call. User does not need a Circuit account. This app requires a server side "pool app" to dynamically fetch a temporary user account.
<circuit-call-button video domain="circuitsandbox.net" clientId="{client_id}" target="hr@xyz.com">Call HR </circuit-call-button> <circuit-call-stage></circuit-call-stage>document.querySelector('circuit-call-button') .addEventListener('callchange', e => document.querySelector('circuit-call-stage').call = e.detail )
Live demo Source
circuit-call-buttoncircuit-call-stagepool app
Vue.js app
Demonstrates use of circuit-call-button in a vue.js app.
<div id="app"> <input v-model.trim="target" placeholder="Enter email"> <circuit-call-button :disabled="!target" :clientId="{client_id}" :target="target" @callchange="call = $event.detail">Call Helpdesk </circuit-call-button> </div>new Vue({ el: '#app', data: { poolUrl: 'https://guest-pool-tokens.circuit-apps.com/token', target: null, call: null } })
Live demo Source
circuit-call-buttonpool app
Chat app
Demonstrates use of circuit-conversations-list to show a list of the user's conversations. Selecting a conversation shows its messages in a circuit-chat component. New messages can also be sent using circuit-chat.
<button onclick="load()">Load conversations</button> <circuit-conversations-list clientId="{client_id}" numberOfConversations="10"> </circuit-conversations-list> <circuit-chat initNumOfItems="40" sendOnEnter showTitle> </circuit-chat>const list = document.querySelector('circuit-conversations-list') const chat = document.querySelector('circuit-chat') const load = () => list.fetchConversations() list.addEventListener('selected', e => { chat.client = evt.detail.client chat.convId = evt.detail.conversation.convId }) chat.addEventListener('itemAdded', e => circuitChat.scrollTo('bottom'))
Live demo Source
circuit-conversations-listcircuit-chat