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


ElementsHTML TagsStatus

Elements that can be used in template:

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

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

HTML tags that can be used in the template:

contact-card – will display icon which opens contact card popup
Example: <contact-card></contact-card>
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.
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’.
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:
Default value is ‘[name][date|"mediumDate"] @ [time|"H:mm"]’.
audio-modality – will display controls for audio modality. Must be added to page for ‘audio’ functionality
Example: <audio-modality></audio-modality>
video-modality – will display controls for video modality. Must be added to page for ‘video’ functionality
Example: <video-modality></video-modality>

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">

Floating Conversation

To hide an contact that is unavailable:

  1. Insert ....

    CODE div with class container

  2. Add div:

    <div class="lwf-container" ng-show="!conversationAvailable()">
            <span>{{'CONTACT_ANAVAILBALE'| translate}}</span>
  3. Upload translation file with translate for 'CONTACT_UNAVAILBALE'

Example HTML - Hide Conversation for unavailable contact

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

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>
        <popup-actions close="true" escalate="true"></popup-actions>
<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 class="tabs">