Conversation Template

SYSTEM ADMINTENANT ADMINSITE ADMIN

A conversation template defines a custom layout of conversation window on the web client page. The Template contains custom html markup of a contact on the Web Client page with own CSS styles and a translation.

There are two entries which cannot be deleted or changed, only downloaded for editing / duplication purposes:

Default Conversation Template
Default Floating Conversation Template

Both templates consist of a HTML file and 14 JSON translation files.

Accessing files of a "Contact" template

Markup

Elements HTML Tags Status

Elements that can be used in template:

contact-avatar - attribute for displaying avatar of contact.
Example: <div contact-avatar></div>

XML

contact-name - attribute for displaying name of contact.
Example: <div contact-name></div>

XML

contact-status - attribute for displaying status of contact.
Example: <div contact-status></div>

XML

contact-title - attribute for displaying title of contact.
Example: <div contact-title></div>

XML

HTML tags that can be used in the template:

contact-card – will display icon which opens contact card popup
Example: <contact-card></contact-card>

XML

popup-actions – will display ‘popup actions’ buttons:
Example: <popup-actions close="true" escalate="true"></popup-actions>

If close="true" – ‘close’ button will be displayed.
If escalate="true" – ‘escalate’ button will be displayed.

XML

audio-video-action - – will display controls for audio/video functionality.
Example: <audio-video-action audio-title="Audio" video-title="Video" show-hint="true"></audio-video-action>

audio-title – attribute which defines title for ‘Start Audio’ button. Default value is ‘Audio’.
video-title - attribute which defines title for ‘Start Video’ button. Default value is ‘Video.
show-hint – attribute which determines if hints for audio/video calls should be shown. Default value is ‘true’.

XML

chat-modality – will display controls for chat modality. Must be added to page for ‘chat’ functionality

Example: <chat-modality></chat-modality>
Example: <chat-modality group-by-minutes="2"></chat-modality>
Example: <chat-modality group-by-minutes="3" message-header= '[time|"mm:ss"] [name] '></chat-modality>
Example: <chat-modality message-header= '[name][date|"mediumDate"] @ [time|"H:mm"] '></chat-modality>

group-by-minutes – attribute which defines how to group conversation participants messages. Default value is 1.
message-header – attribute which defines the format of the message header, 
may include “name”, “date” and “time” keywords. 
The format of the date and time is a standard angular date-time format. 
The list of the possible values can be found here: https://docs.angularjs.org/api/ng/filter/date
Default value is ‘[name][date|"mediumDate"] @ [time|"H:mm"]’.

XML

audio-modality – will display controls for audio modality. Must be added to page for ‘audio’ functionality
Example: <audio-modality></audio-modality>

XML

video-modality – will display controls for video modality. Must be added to page for ‘video’ functionality
Example: <video-modality></video-modality>

XML

A contact status can have the following values:

available
busy
do not disturb
be right back
away
offline

contact-status – class which will be replaced with the contact status current status

Example: <div class="contact-status">

XML

Floating Conversation

To hide an contact that is unavailable:

Insert ....
```
‘ng-show="conversationAvailable()">‘
```
CODE
...in div with class container

Add div:

<div class="lwf-container" ng-show="!conversationAvailable()">
        <span>{{'CONTACT_ANAVAILBALE'| translate}}</span>
</div>

CODE

Upload translation file with translate for 'CONTACT_UNAVAILBALE'

Example HTML - Hide Conversation for unavailable contact

<div class="lwf-header contact-status" participants-header>
    <div>
        <div class="lwf-popup-status"><i class="fa fa-circle" aria-hidden="true"></i></div>
        <div contact-name class="lwf-agent-name"></div>
        <chat-unread-messages-count></chat-unread-messages-count>
        <contact-card></contact-card>
    </div>
    <popup-actions close="true" escalate="true" maximize="true"></popup-actions>
</div>
<div class="lwf-body">
    <div class="lwf-container" ng-show="conversationAvailable()">
        <customer-form></customer-form>
        <audio-modality></audio-modality>
        <video-modality></video-modality>
        <presentation-modality></presentation-modality>
        <audio-video-action audio-title="{{ 'CONVERSATION_AUDIO_TITLE' | translate }}" video-title="{{ 'CONVERSATION_VIDEO_TITLE' | translate }}"></audio-video-action>
        <chat-modality></chat-modality>
    </div>
    <div class="lwf-container" ng-show="!conversationAvailable()">
        <span>{{'CONTACT_ANAVAILBALE'| translate}}</span>
    </div>
</div>

XML

Example HTML with Custom CSS

<div class="modal-header draggable contact-status">
    <div class="popup-title">
        <div contact-avatar class="header-avatar"></div>
        <div contact-name class="lw-agent-name"></div>
        <div class="status"><i class="fa fa-circle" aria-hidden="true"></i><span contact-status></span></div>
        <contact-card></contact-card>
        <popup-actions close="true" escalate="true"></popup-actions>
    </div>
</div>
<div class="modal-body">
    <div class="container">
        <div class="conversation-media">
            <div class="conversation-actions">
                <audio-video-action audio-title="Audio" video-title="Video" show-hint="true"></audio-video-action>
            </div>
        </div>
        <div class="tabs">
            <chat-modality></chat-modality>
            <audio-modality></audio-modality>
            <video-modality></video-modality>
        </div>
    </div>
</div>

CSS