Circuit Web Components
Enhance your website with Circuit features such as making video calls without any code. Just include the desired web component module and the Circuit JS SDK and use the element.
Based on the latest Web Components standard. No dependency on any Web Components framework.
<html>
<head>
<script type="module" src="//unpkg.com/@unify/circuit-web-components/circuit-call-button.js" defer></script>
<script src="//unpkg.com/circuit-sdk" async></script>
<style>
circuit-call-button[inprogress] { background: firebrick; }
</style>
</head>
<body>
<circuit-call-button
clientId="f06c51a30f0d4eb6acc05829c3e86266"
target="helpdesk@company.com">Call Helpdesk</circuit-call-button>
</body>
</html>Components
circuit-call-button
Renders a button to start a Circuit call, either as guest (via pool of authenticated users), or a regular user via OAuth authentication. For video calls the circuit-call-stage component can be used to display the local and remote video streams. call object is exposed in the event callchange.
circuit-call-stage
Renders local and remote video streams of a call. convId is passed as property to the web component to determine which conversation is rendered.
circuit-chat
Renders a circuit conversation feed and allows the user to participate in the chat. call is passed as property to the web component. overlay attribute can be used to define the position on the local video, or to hide it.
circuit-conversations-list
Renders a list of the most recent circuit conversations. convId is passed as property to the web component to determine which conversation is rendered.
Usage and Documentation
See docs/README.md
Live examples
- Overview
- Audio call (circuit-call-button)
- Video call (circuit-call-button and circuit-call-stage)
- Video conference (circuit-call-button and circuit-call-stage)
- Guest video conference (circuit-call-button and circuit-call-stage)
- Guest pool direct video call (circuit-call-button and circuit-call-stage)
- Vue.js app (circuit-call-button)
- Circuit Chat (circuit-conversations-list and circuit-chat)
Run examples locally
git clone https://github.com/circuit/circuit-web-components.git
cd circuit-web-components
npm i -g local-web-server
ws -p 8443 --https -o