SYSTEM ADMINTENANT ADMINSITE ADMIN

The Contact Template contains custom html markup of a contact on the Web Client page with own CSS styles and a translation.

There is one default entry which cannot be deleted or changed, only downloaded for editing / duplication purposes:

  •  "Default Contact" Template

The template consist of a HTML file and 14 JSON translation files.

Accessing files of a "Contact" template

Markup

FieldsModalitiesStatus

The following fields can be used in this template:

  • sip
  • displayName
  • skype
  • firstName
  • lastName
  • mobilePhone
  • company
  • jobTitle
  • officeLocation
  • workPhone
  • workCountry
  • workState
  • workZipCode
  • workCityCode
  • workStreet
  • email
  • type (agent or service)
  • avatarUrl (default avatar)
  • canBeContactedOnBusy
  • statuses (each state has appropriate avatarUrl and type fields)
  • status.avatarUrl (current status avatarUrl)
  • status.type (current status type)
  • modalities

A contact can have (if they are enabled) the following modalities (field: contact.modalities):

  • Messaging
  • Audio
  • Video

A contact can have the following states (field: contact.status.type):

  • available
  • busy
  • do not disturb
  • be right back
  • away
  • offline

Templates functionality is based on AngularJS. All contact fields in template should be in double braces, e.g. {{contact.sip}}.

Buttons for starting chat, audio and video should have css classes chat-conversation, audio-conversation and video-conversation respectively.

Enabling Callback functionality

In order to make use of the Callback functionality the following tag needs to be included →  <callback/>

<div class="lw-contact {{contact.availabilityStyle}}" id="{{contact.sip}}" data-uri="{{contact.sip}}" data-lync-presence="{{contact.status.type}}" data-name="{{contact.displayName}}" data-lync-presence-title="{{contact.status.type}}">
    <div class="lw-avatar" style="background-image: url('{{contact.status.avatarUrl | defaultAvatar}}');" title="{{contact.displayName}} {{contact.availability | uppercase | translate}}">
        <callback/>
        <div class="lw-status" id="presence-state-content">{{contact.status.type | uppercase | translate}}</div>
    </div>
...
CODE
(info) For further information please check the chapter Callback Template

Example HTML

<div class="rtc-item" data-lync-presence="{{contact.status.type}}">
    <div class="avatar">
        <img ng-src="{{contact.status.avatarUrl}}" alt="{{contact.displayName}}">
    </div>
    <div class="content">
        <h3>{{contact.displayName}}</h3>
        <h4><strong>status:</strong><span id="presence-state-content">{{contact.status.type}}</span></h4>
        <h5>{{contact.jobTitle}}</h5>
        <div class="item-menu">
            <nav class="menu-content">
                <a class="chat-conversation {{contact.modalities.indexOf('Messaging') === -1 ? 'disabled' : ''}}" title="Start chat">
                    <i class="fa fa-comments-o"></i>
                </a>
                <a class="audio-conversation {{contact.modalities.indexOf('Audio') === -1 ? 
'disabled' : ''}}" title="Start audio call">
                    <i class="fa fa-microphone"></i>
                </a>
                <a class="video-conversation {{contact.modalities.indexOf('Video') === -1 ? 
'disabled' : ''}}" title="Start video call">
                    <i class="fa fa-video-camera"></i>
                </a>
                <a href="tel:{{contact.workPhone}}" ng-show="contact.workPhone" id="phone" class="phone" title="Make a call"><i class="fa fa-phone"></i></a>
                <a href="mailto:{{contact.email}}" ng-show="contact.email" id="mailer" class="mailer" title="Send Email"><i class="fa fa-envelope-o"></i></a>
                <a href="skype:2:{{contact.sip}}" id="skype" class="skype" title="Contact me through Skype"><i class="fa fa-skype"></i></a>
                <a href="sip:{{contact.sip}}" id="skype" class="skype" title="Contact me through Skype for Business">
                    <div class="s4b-icon"></div>
                </a>
            </nav>
        </div>
    </div>
</div>
XML

Example CSS

.rtc-item {
	border: 1px solid #eee;
	width: 650px;
	margin: 0 auto;
	font-family: Tahoma, Arial;
	padding: 15px;
	background: #FFF;
}
.rtc-item .avatar {
	overflow: hidden;
	width: 120px;
	height: 120px;
	background: #f3f3f3;
	border-radius: 120px;
	border: 5px solid #4c535b;
	display: inline-block;
	margin-right: 20px;
	vertical-align: top;
}
.rtc-item .avatar img {
	width: 100%;
	border: 0;
	border-radius: 120px;
}
.rtc-item .content {
	display: inline-block;
	width: calc(100% - 180px);
}
.rtc-item .content  h3 {
	width: 70%;
	display: inline-block;
	margin-bottom: 0;
	font-size: 20px;
	color: #4c535b;
}
.rtc-item .content h4 {
	width: 26%;
    display: inline-block;
    text-align: right;
    font-size: 0.8em;
    margin-bottom: 0;
	text-transform: uppercase;
	color: #b2b4b5;
}
.rtc-item .content h4 .presence-state-content{
	margin-left: 5px;
}
.rtc-item .content h5{
	display: block;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #b2b4b5;
    line-height: 15px;
	margin: 0 0 20px;
}
.rtc-item  .item-menu a{
	margin-right: 20px;
	color: #7f8286;
	font-size: 30px;
}
.rtc-item  .item-menu i{
	line-height: 50px;
}
.rtc-item[data-lync-presence=available] .avatar {
    border: 6px solid #5ca232 !important;
}
.rtc-item[data-lync-presence=away] .avatar {
    border: 6px solid #e7c006 !important;
}
.rtc-item[data-lync-presence=brb] .avatar {
    border: 6px solid #e7c006 !important;
}
.rtc-item[data-lync-presence=busy] .avatar {
    border: 6px solid #d70f0f !important;
}

.rtc-item[data-lync-presence=dnd] .avatar {
    border: 6px solid #d70f0f !important;
}
.rtc-item[data-lync-presence=offline] .avatar {
    border: 6px solid #4c535b !important;
}
CSS