Portal widget generator

Overview

Our easy web calling solution Click2Vox offers basic customisation on the styling of the buttons. If you are a rebel and don’t like being stuck with default styling and want to apply your designs, we feel you. Using CSS, you can easily customise how your web calling buttons or call widget container appears, to fit better with your website’s existing design and UX.

If you just want to customise the button itself and if you are simply a lazy rebel, just place a button of your own styling, and make it trigger makeCall();

Remember, you still need to copy&paste the code generated from our portal widget generator  to your web page and hide it.

Styling

Style the widget box

The widget box encapsulates all the UI and can be edited:

<div style="max-width: 400px" class="widget-box style-b"></div>

If you want to remove all styling and have a minimalist box, follow this style:

.widget-box{
     background: none !important;
     box-shadow: none !important;
 
     /* Or you can style the box using these parameters: */
     /*  box-shadow: inset 0px 0px 5px 0px rgba(255, 255, 255, 0.5), 0px 0px 8px 0px rgba(0, 0, 0, 0.2);*/
     /*  background: #2a2929; */
 
     /* You can also set its location on the webpage using position: fixed; */
       position: fixed;
       top: 10px;
       right: 10px;
   }

Style the button

The actual Click2Vox button to initiate the call is fairly simple to edit. It is a simple button with id=”launch_call” and class=”button-style”.

<button id="launch_call" class="btn-style">Call Sales</button>

The editor already allows you to change the text easily. Here’s how to edit the button itself:

#launch_call{
     /* Padding settings */
       padding: 15px 15px;
 
     /* Border radius settings */
       border-radius: 4px;
 
     /* Font Settings */
       font-size: 2em;
       font-family: "Helvetica";
 
     /* Flat Design */
       background: #9b59b6;
       border: none;
       border-bottom: 5px solid #8e44ad;
 
     /* Or you can also use a gradient */
       /* background: -webkit-linear-gradient(#92168e, #660f63); */
   }

 

Style the widget

The widget is easy to edit and is composed of the following HTML elements:

Header Style

Edit the header title background & text color using:

.vw-header{
   background-color: #8e44ad !important;
 }

Edit the header title font and color using:

.vw-title{
     color: #fff !important;
     font-size: 1.1em !important;
     font-family: "Arial" !important;
 }

Edit the header close & expand buttons (color and hover style):

.vw-actions a{
   color: #fff !important;
 }
 
 .vw-actions a:hover{
   background-color: #fff !important;
   color: #8e44ad !important;
 }

Body Style

.vw-body{
  background-color: #fff !important;
}

Call/Hangup Button Style

.vw-end-call{
  background-color: #e74c3c !important;
}

.vw-end-call:hover{
  background-color: #c0392b !important;
}

Dial Pad & Mute button

.vw-btn-group a{
  background-color: #9b59b6 !important;
}

Dial Pad Style

.vw-dialpad ul li{
    background-color: #fff !important;
    color: #9b59b6;
    font-size: 1.5em;
    font-family: "Arial";
  }

.vw-dialpad ul li:hover{
  background-color: #9b59b6 !important;
  color: #fff;
  font-size: 1.5em;
  font-family: "Arial";
}

All together – Reference Stylesheet

Here is what a full branding may look like for the Click2Vox widget. You may save it as a separate stylesheet and insert it below the bootstrap.css, root.css, and widget.css files. Otherwise, you can open a style tag and add your own styling to it.

 

.widget-box{
    background: none !important;
    box-shadow: none !important;

    /* Or you can style the box using these parameters: */

    /* box-shadow: inset 0px 0px 5px 0px rgba(255, 255, 255, 0.5), 0px 0px 8px 0px rgba(0, 0, 0, 0.2);*/
    /* background: #2a2929; */


    /* You can also set its location on the webpage using position: fixed; */
    position: fixed;
    top: 10px;
    right: 10px;
  }

  #launch_call{
    /* Padding settings */
      padding: 15px 15px;

    /* Border radius settings */
      border-radius: 4px;

    /* Font Settings */
      font-size: 1.2em;
      font-family: "Arial";

    /* Flat Design */
      background: #9b59b6;
      border: none;
      border-bottom: 5px solid #8e44ad;

    /* Or you can also use a gradient */
      /* background: -webkit-linear-gradient(#92168e, #660f63); */
  }

  .vw-header{
    background-color: #8e44ad !important;
  }

  .vw-title{
    color: #fff !important;
    font-size: 1.5em !important;
  }

  .vw-actions a:hover{
    background-color: #fff !important;
    color: #8e44ad !important;
  }

  .vw-body{
    background-color: #fff !important;
  }

  .vw-end-call{
    background-color: #e74c3c !important;
  }

  .vw-end-call:hover{
    background-color: #c0392b !important;
  }

  .vw-btn-group a{
    background-color: #9b59b6 !important;
  }

  .vw-dialpad ul li{
    background-color: #fff !important;
    color: #9b59b6;
    font-size: 1.5em;
    font-family: "Arial";
  }

  .vw-dialpad ul li:hover{
    background-color: #9b59b6 !important;
    color: #fff;
    font-size: 1.5em;
    font-family: "Arial";
  }

Change Texts

Text content within the widget can be changed using JavaScript. Here’s an example to translate all the elements to Spanish.