Usage

Vite builds the widget into a single js file at location dist/widget.js.

To use the widget, you need to include the js file in your project.

As an example inclusion, consider the following html fragment:

<!-- place and style this button arbitrarily, but it's id should match the buttonId in the c2c-widget tag below -->
<button
  id="callButton"
  style="
        position: fixed;
        height: 70px;
        width: 70px;
        bottom: 50px;
        right: 50px;
      "
>
  Call
</button>

<c2c-widget
  buttonId="callButton"
  callDetails='{"destination":"/private/demo-1","supportsVideo":true,"supportsAudio":true}'
></c2c-widget>

<script src="/widget.js"></script>
<!-- end code required to initialize c2c widget -->

The c2c-widget will wait for something with id set in the buttonId attribute if it doesn't immediately exist. This is to ensure that javascript shenanigans in other parts of the site don't break the widget.

You can use the widget from CDN (https://cdn.jsdelivr.net/npm/@niravcodes/call-widget@1.0.0/dist/c2c-widget.umd.min.js) or from a local file.

If you use the CDN, you can include the widget like this:

<script src="https://cdn.jsdelivr.net/npm/@niravcodes/call-widget@1.0.0/dist/c2c-widget.umd.min.js" defer></script>

Loading state

So if your designated button (callButton in above instance) has a .demo-button-disabled class, the widget will remove that class. This is to give you a way to style the button differently (or even hide it or whatever) when the widget is loading.