Save Money by Transitioning to a Hosted Lync Voice Environment

One of the most important considerations when choosing any enterprise solution is cost. With so much of the decision making process tied to ROI and upfront expenses, choosing a solution that is affordable and effective is imperative. Considering all of the costs associated with the solution is also vital. Hosted Lync Voice services offer many cost-saving benefits over on-premise solutions. Savings can be found in a number of areas, including:

Network and hardware updates

Running a powerful communications solution on your own equipment can be taxing. If hardware or network capabilities are not up to the task of running the solution, expensive upgrades may be needed. While it may be necessary to make small tweaks to your network to run Hosted Lync Voice, you will not have to invest heavily in a complete overhaul of the system or replacement of key equipment.

Pre-purchase exploration

Many on-premise solutions require a costly proof of concept exercise before a purchase decision can be made. Rather than requiring this expensive step, Hosted Lync Voice services offer trial periods, allowing your organization to explore the solution at its own pace, often without cost.

SPLA (service Provider Licensing Agreement)

This licensing model chosen specifically to provide a cost-effective method of providing services to Enterprise customers while allowing them to still remain on a monthly plan.

For more information on the benefits of transitioning to a cloud hosted Microsoft Lync Voice environment, visit our Hosted Lync Voice page.

Key Traits of an Effective CRM

For a CRM solution to be truly effective at supporting CX initiatives, it must possess many attributes, including:

Open Architecture

The ability to structure a CRM to capture and retain data from a wide range of sources is vital to the effectiveness of the solution. Without this flexibility, the solution is highly limited in its ability to support multi-channel communications and diverse customer experience (CX) efforts.

Ease of Use

CRM systems are driven by the manual and automatic entry of customer information. As an agent fields an interaction with a customer, they must be able to easily update the CRM in real time in order to document the interaction, the ultimate resolution of the customer’s issues and any customer data that may have changed since the last interaction. CRM systems that are unwieldy or difficult to use limit the agent’s ability to enter this data which in turn limits the CRM’s effectiveness in CX initiatives. The most effective CRM will offer a streamlined interface, provide the capability to enter and view multiple media sources, and limit the number of clicks it takes for an agent to access and input data.

Simple Integration

For a CRM solution to operate at peak performance, it must have open, easy to understand API architecture that allows it to be easily integrated into the enterprise’s other systems and platforms. Without the ability to integrate the CRM into disparate solutions, the information contained within the CRM is limited in its usefulness. For example, CRM integration into Interactive Intelligence’s CIC® software will dramatically increase an agent’s ability to field customer interactions and utilize data to resolve the customer’s issue.

Detailed Reporting

The more types of information a CRM can store and report, the better the solution will support CX. The ability to create custom reports based on customer data is vital to the creation and execution of both marketing and CX initiatives.

To learn more about how CRM impacts the success of CX programs, download our free whitepaper: CRM as a CX Enabler.

Bootstrap radio buttons and checkboxes in columns, with contextual text fields

We recently did a project with the following requirements:

  • Touch-friendly interface (translation: big touch targets);
  • Bootstrap;
  • Radio and checkboxes need to highlight when selected;
  • When a radio button or checkbox is selected, sometimes a little additional information is required.

See the demo to get a clear idea of what I’m talking about.

To accomplish this, we did several things:

  1. Used Bootstrap “radio-inline” and “checkbox-inline” classes;
  2. Wrapped each radio/checkbox in a label, styled the label to look like a touch target, and set it so clicking on the label selected the radio/checkbox.
  3. Created a “column” class to make the labels form columns;
  4. Used jQuery to add a “checked” class to each label when its radio/checkbox is selected.
  5. Created an “additional-info-wrap” class to associate a contextual text field with any radio/checkbox we needed.

Sounds complicated, but it’s really not. The actual code is pretty simple.

HTML

<form class="form-horizontal">
        <div class="form-group">
              <label class="col-md-2 control-label" for="Checkboxes">Checkboxes</label>  

              <div class="col-md-10 columns"> 
                    <label class="checkbox-inline" for="Checkboxes_Apple">
                      <input type="checkbox" name="Checkboxes" id="Checkboxes_Apple" value="Apple">
                      Apple
                    </label> 
                    <label class="checkbox-inline" for="Checkboxes_Orange">
                      <input type="checkbox" name="Checkboxes" id="Checkboxes_Orange" value="Orange">
                      Orange
                    </label> 
                    <label class="checkbox-inline" for="Checkboxes_Bananas">
                      <input type="checkbox" name="Checkboxes" id="Checkboxes_Bananas" value="Bananas">
                      Banana
                    </label>
                    <label class="checkbox-inline" for="Checkboxes_Kumquats">
                      <input type="checkbox" name="Checkboxes" id="Checkboxes_Kumquats" value="Kumquats">
                      Kumquat
                    </label> 
                    <span class="additional-info-wrap">
                        <label class="checkbox-inline" for="Checkboxes_Grape">
                          <input type="checkbox" name="Checkboxes" id="Checkboxes_Grape" value="Grape">
                          Grape
                        </label>
                        <div class="additional-info hide">
                              <input type="text" id="CheckboxesNameOfGrape" name="CheckboxesNameOfGrape" placeholder="Name of Grape" class="form-control" disabled="">
                        </div>
                    </span>
                    <span class="additional-info-wrap">
                        <label class="checkbox-inline" for="Checkboxes_Other">
                          <input type="checkbox" name="Checkboxes" id="Checkboxes_Other" value="Other">
                          Other
                        </label>
                        <div class="additional-info hide">
                              <input type="text" id="CheckboxesOther" name="CheckboxesOther" placeholder="Describe" class="form-control" disabled="">
                        </div>
                    </span>
                </div>
            </div>
        <div class="form-group">
              <label class="col-md-2 control-label" for="Radios">Radio buttons</label>  

              <div class="col-md-10 columns"> 
                    <label class="radio-inline" for="Radios_Apple">
                      <input type="radio" name="Radios" id="Radios_Apple" value="Apple">
                      Apple
                    </label> 
                    <label class="radio-inline" for="Radios_Orange">
                      <input type="radio" name="Radios" id="Radios_Orange" value="Orange">
                      Orange
                    </label> 
                    <label class="radio-inline" for="Radios_Bananas">
                      <input type="radio" name="Radios" id="Radios_Bananas" value="Bananas">
                      Banana
                    </label>
                    <label class="radio-inline" for="Radios_Kumquats">
                      <input type="radio" name="Radios" id="Radios_Kumquats" value="Kumquats">
                      Kumquat
                    </label> 
                    <span class="additional-info-wrap">
                        <label class="radio-inline" for="Radios_Grape">
                          <input type="radio" name="Radios" id="Radios_Grape" value="Grape">
                          Grape
                        </label>
                        <div class="additional-info hide">
                              <input type="text" id="RadiosNameOfGrape" name="RadiosNameOfGrape" placeholder="Name of Grape" class="form-control" disabled="">
                        </div>
                    </span>
                    <span class="additional-info-wrap">
                        <label class="radio-inline" for="Radios_Other">
                          <input type="radio" name="Radios" id="Radios_Other" value="Other">
                          Other
                        </label>
                        <div class="additional-info hide">
                              <input type="text" id="RadiosOther" name="RadiosOther" placeholder="Describe" class="form-control" disabled="">
                        </div>
                    </span>
                </div>
            </div>
    </form>

Nothing too fancy here. Each radio/checkbox is wrapped in a label with a “for” attribute applied; this selects the radio/checkbox when its label is clicked.

Each group of labels is wrapped in a div with the class “column”.

The radios/checkboxes that have an extra text field are wrapped in a span with the class “additional-info-wrap”; the extra text field itself is in a div with the class “additional-info”, and with the Bootstrap “hide” class attached so it’s not displayed.

CSS

label.radio-inline, label.checkbox-inline {
  background-color: #dcdfd4;
  cursor: pointer;
  font-weight: 400;
  margin-bottom: 10px !important;
  margin-right: 2%;
  margin-left:0;
  padding: 10px 10px 10px 30px;
}
label.radio-inline.checked, label.checkbox-inline.checked {
  background-color: #266c8e;
  color: #fff !important;
  text-shadow: 1px 1px 2px #000 !important;
}
.checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline {
  margin-left: 0;
}
.columns label.radio-inline, .columns label.checkbox-inline {
  min-width: 190px;
  vertical-align: top;
  width: 30%;
}
.additional-info-wrap {
  display: inline-block;
  margin: 0 2% 0 0;
  min-width: 190px;
  position: relative;
  vertical-align: top;
  width: 30%;
}
.additional-info-wrap label.checkbox-inline, .additional-info-wrap label.radio-inline {
  width: 100% !important;
}
.additional-info-wrap .additional-info {
  background-color: #266c8e;
  clear: both;
  color: #fff !important;
  margin-top: -10px;
  padding: 0 10px 10px;
  text-shadow: 1px 1px 2px #000 !important;
  width: 100%;
}

Again, fairly straightforward.

The first style turns the labels into touch targets, by giving them some padding and a gray background color.

The second style turns the labels blue, with white text, when the “checked” class is added.

The third style cancels some base Bootstrap margins that mess up our column layout.

The fourth style creates the columns, by setting a width and margin for each label. They stack up in three columns until the page gets too narrow, and then they stack in two columns.

The last three styles all handle the contextual text field.

“additional-info-wrap” is set to mimic the other labels,

The radio/checkbox inside “additional-info-wrap” is set to “width:100%” so it fills out the entire width.

Finally, “additional-info” wraps the contextual text field and gives it some padding, margin and the same background color as the labels.

JAVASCRIPT

$(document).ready(function() {

    //When checkboxes/radios checked/unchecked, toggle background color
    $('.form-group').on('click','input[type=radio]',function() {
        $(this).closest('.form-group').find('.radio-inline, .radio').removeClass('checked');
        $(this).closest('.radio-inline, .radio').addClass('checked');
    });
    $('.form-group').on('click','input[type=checkbox]',function() {
        $(this).closest('.checkbox-inline, .checkbox').toggleClass('checked');
    });

    //Show additional info text box when relevant checkbox checked
    $('.additional-info-wrap input[type=checkbox]').click(function() {
        if($(this).is(':checked')) {
            $(this).closest('.additional-info-wrap').find('.additional-info').removeClass('hide').find('input,select').removeAttr('disabled');
        }
        else {
            $(this).closest('.additional-info-wrap').find('.additional-info').addClass('hide').find('input,select').val('').attr('disabled','disabled');
        }
    });

    //Show additional info text box when relevant radio checked
    $('input[type=radio]').click(function() {
        $(this).closest('.form-group').find('.additional-info-wrap .additional-info').addClass('hide').find('input,select').val('').attr('disabled','disabled');
        if($(this).closest('.additional-info-wrap').length > 0) {
            $(this).closest('.additional-info-wrap').find('.additional-info').removeClass('hide').find('input,select').removeAttr('disabled');
        }        
    });
});

The first event listener adds/removes the “checked” class from a label when it is clicked. For checkboxes, it’s a simple toggle. For radios, it has to remove the “checked” class from all the other radios in the group before adding it to the selected radio.

The last two event listeners show/hide a contextual text field, if present, by removing/adding the Bootstrap “hide” class from the related “additional-info” div. You’ll see that the code is slightly different for radios vs. checkboxes, again because in a radio group you have to account for all the radios, while checkboxes can be treated individually.