The code generated by the admin portal is styled to look like a standard HTML button. OnSIP also provides additional styles that can meet the needs of most website designs. This guide describes those styles and also gives some examples of how to override them to produce a custom design.

Base Style

ic-button

This is the default CSS selector for the InstaCall button tag and is also included as base to alternative styles.

Example:

<button class="ic-button" style="padding:10px;"
         data-instaCallName="ic_kb1"
         data-visitorName="OnSIP"
         data-address="ringing.then.welcome@junctionnetworks.com"
         data-video="false"
         data-dtmf="true"
         data-callerId="caller-name-tag"
         data-callerIdTag="kb1"
         data-theme="skeu-light"
         data-altPhone="18008013381"
         >
      Call Me Now!
    </button>

  

 

Base State Specific Styles

InstaCall has both an enabled and disabled state. If a visitor is using an unsupported browser, the code will inject a disabled attribute in the button. These selectors are used to style the different states:

ic-button:not([disabled]) {
  /* enabled styles here */
}

ic-button[disabled] {
  /* disabled styles here */
}
 

 

Alternate Styles

ic-img

Add this CSS selector to your InstaCall button tag if you would like to display an image on your button. The image goes inside your button tag.

Example:

<button class="ic-button ic-img"

         data-instaCallName="ic_kb2"
         data-visitorName="OnSIP"
         data-address="ringing.then.welcome@junctionnetworks.com"
         data-video="false"
         data-dtmf="true"
         data-callerId="caller-name-tag"
         data-callerIdTag="kb2"
         data-theme="skeu-light"
         data-analyticsWebPropertyId=""
         data-analyticsDomainName=""
         data-altPhone="18008013381"

         >

      <img src="/files/images/onsip_give_us_a_web_call.png" style="border:none;">

    </button>

ic-text

Add this CSS selection to your InstaCall button tag if you would like it to display as text.

Example:

<button class="ic-button ic-text"
         data-instaCallName="ic_kb3"
         data-visitorName="OnSIP"
         data-address="ringing.then.welcome@junctionnetworks.com"
         data-video="false"
         data-dtmf="true"
         data-callerId="caller-name-tag"
         data-callerIdTag="kb3"
         data-theme="skeu-light"
         data-altPhone="18008013381"
         >

      Call Me Now In Text!

    </button>

 

 

Overriding

ic-button, ic-img, and ic-text can all be customized to suit any page design. There are many ways to override these classes. The one we recommend is to create a custom class and define a CSS rule with multiple selectors based it. Be sure to remove the data-theme="skeu-light" section of the script prior to overriding.

Example:

<button class="ic-button ic-button-custom" ...

.ic-button.ic-button-custom {
   background-image: none;
   background-color: red;
}


 

Example:

 

<button class="ic-button ic-text ic-text-custom" ...

.ic-button.ic-text.ic-text-custom {
    color: blue;                             
}

More Details:

.ic-button.ic-button-custom {
  border-bottom-color: #969;
  border-right-color: #969;
  background-color: #969;
  color: #000
}

.ic-button.ic-button-custom:hover, .ic-li:hover > .ic-button {
  border-bottom-color: #f0f;
  border-right-color: #f0f;
  background-color: #f0f;
  color: #000;
}
 

 

Styling based on WebRTC support

InstaCall injects the selector “webrtc” to the html element if we detect that the visitor is using a browser that supports it. Otherwise, “no-webrtc” is injected. Both of these selectors can be used to style your page.