OnSIP Element Documentation (sayso)

Installation

  1. Put the following snippet of code in the <head> of your page:

    <script defer="defer" src="https://js.onsip.com/onsip-element-loader.js"></script>
    
  2. Upon running, <onsip-element> is now defined as a custom element and can be used anywhere in the DOM. <onsip-element> can be styled with client-side CSS just like any other element, it does not come with any predefined styles. <onsip-element> is not a void element.

For more information about the custom element spec see: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

Attributes

aor : string

The AOR (address of record) that this <onsip-element> will call when clicked on.

disabled: boolean [READ ONLY]

Whether or not the <onsip-element> is usable, also true if the call popup is currently open. We recommend using an attribute selector to style the <onsip-element> based on this attribute; see the example below.

accent-color : string [OPTIONAL]

A string in hexadecimal format, including the leading #, representing the color to be used for UI elements in the call popup.

autostart : boolean [OPTIONAL]

Whether or not the call will instantly start when <onsip-element> is clicked on, if not set, the user will have an additional button to press when the call popup expands.

avatar-url : string [OPTIONAL]

The url of the image of the avatar of the call recipient that is displayed to the caller.

target-display : string [OPTIONAL]

The display name for the recipient that the caller will see. If not set, will display the AOR.

Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script defer src="https://js.onsip.com/onsip-element-loader.js"></script>
    <style>
      onsip-element {
        border: 1px solid red;
      }
      onsip-element[disabled] {
        opacity: 0.5;
        pointer-events: none;
      }
    </style>
  </head>

  <body>
    <onsip-element aor="joe@example.onsip.com" target-display="Joe Human" autostart accent-color="#ff00ff">
      <button>Click me!</button>
    </onsip-element>
  </body>
</html>