Contact Template
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.
Markup
Fields | Modalities | Status |
---|---|---|
The following fields can be used in this template:
| A contact can have (if they are enabled) the following modalities (field: contact.modalities):
| A contact can have the following states (field: contact.status.type):
|
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>
...
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>
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;
}