Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
circuit-call-button.md
circuit-call-stage.md

README.md

Circuit Web Components Documentation

Circuit Web Components allow for Circuit Web Components have no dependency on any JavaScript framework, they are pure JavaScript Web Components according to the latest standard.

The components use the Circuit JS SDK. To get your own Circuit sandbox and register an application, see step 1 at https://circuit.github.io/

API Documentation

Usage

Since the circuit-sdk requires the latest evergreen browsers, there should be no issue with browser support of Web Components. But if for some reason your browser does not support Web Components, the official polyfill can be included in the HTML page.

Web Components are included as ES6 modules which is supported by most browsers. The simplest way is to include the components using type="module" in your html.

To prevent loading the circuit-sdk for each component, include it on the main html page. Loading the circuit-sdk using async improves page load, but the user will not be able to inteact with the elements until the SDK is loaded.

Example:

<html>
  <head>
    <!-- Load polyfill for browsers not supporting Custom Elements -->
    <script src="//unpkg.com/@webcomponents/webcomponentsjs/webcomponents-bundle.js" defer></script>
    <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>
      /* Hide button until defined to prevent flash rendering */
      circuit-call-button:not(:defined) {
        opacity: 0;
      }
      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>