https://github.com/circuit/circuit-web-components
Circuit Web Components allow for simple integration of Circuit into your existing website
https://github.com/circuit/circuit-web-components
Last synced: 11 months ago
JSON representation
Circuit Web Components allow for simple integration of Circuit into your existing website
- Host: GitHub
- URL: https://github.com/circuit/circuit-web-components
- Owner: circuit
- Created: 2019-01-01T18:40:04.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2020-12-14T17:02:15.000Z (over 5 years ago)
- Last Synced: 2025-06-01T03:05:48.289Z (about 1 year ago)
- Language: JavaScript
- Size: 85 KB
- Stars: 2
- Watchers: 8
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Circuit Web Components
[](https://www.npmjs.com/package/@unify/circuit-web-components)
[](https://opensource.org/licenses/Apache-2.0)
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
circuit-call-button[inprogress] { background: firebrick; }
Call Helpdesk
```
## Components
### [circuit-call-button](docs/circuit-call-button.md)
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](circuit-call-stage.md) component can be used to display the local and remote video streams. `call` object is exposed in the event `callchange`.
### [circuit-call-stage](docs/circuit-call-stage.md)
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](docs/circuit-chat.md)
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](docs/circuit-conversations-list.md)
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](docs/README.md)
## Live examples
* [Overview](https://raw.githack.com/circuit/circuit-web-components/master/examples/index.html)
* [Audio call](https://raw.githack.com/circuit/circuit-web-components/master/examples/audioCall.html) (circuit-call-button)
* [Video call](https://raw.githack.com/circuit/circuit-web-components/master/examples/videoCall.html) (circuit-call-button and circuit-call-stage)
* [Video conference](https://raw.githack.com/circuit/circuit-web-components/master/examples/videoConference.html) (circuit-call-button and circuit-call-stage)
* [Guest video conference](https://raw.githack.com/circuit/circuit-web-components/master/examples/guest.html) (circuit-call-button and circuit-call-stage)
* [Guest pool direct video call](https://raw.githack.com/circuit/circuit-web-components/master/examples/guestPoolDirect.html) (circuit-call-button and circuit-call-stage)
* [Vue.js app](https://raw.githack.com/circuit/circuit-web-components/master/examples/vue.html) (circuit-call-button)
* [Circuit Chat](https://raw.githack.com/circuit/circuit-web-components/master/examples/chat.html) (circuit-conversations-list and circuit-chat)
## Run examples locally
```bash
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
```