WebChat Integration Customization

Custom presence buttons

Side bar or nested WebChat presence buttons

By default, a sidebar is shown on your page with the webchat presence buttons. If you don’t prefer the default side bar, but custom nested webchat presence buttons in your web page, the standard sidebar can be hidden by changing the setting “defaultpresencecontainerenabled” to false. If you want to keep the default sidebar, leave the setting as true.

Note: go to the file sfbwebchatplus/xml/settings.xml in the root of the webchat application to change the settings.

Copy

XML

<gui>
…
<defaultpresencecontainerenabled>true</defaultpresencecontainerenabled>
…
</gui>

Simple sidebar customization

With simple sidebar customization, only the look and feel is configured of the sidebar. This is done by adding some css records to the custom css stylesheet. See example 1 for more details.

Advanced sidebar customization

Sometimes advanced customization is needed to meet your requirements. In this case it is needed to use a custom sidebar template. Enable the custom sidebar template by changing the following setting:

You can find the default sidebar template “presenceItemInTab” in the webchat application under:

Custom_assets/presencetemplates/templates.html

Copy

XML

<gui>
…
<defaultpresencecontainerenabled>true</defaultpresencecontainerenabled>
<defaulttemplateloadfromcustomtemplatefile>true</defaulttemplateloadfromcustomtemplatefile>
…
</gui>

You can find the default sidebar template “presenceItemInTab” in the webchat application under:

Custom_assets/presencetemplates/templates.html

Nested presence buttons

For custom nested presence buttons in your html, you can place an extra div nested in your html where you need it, e.g.:

You can change the presenceItemInPage jsrender presence template based on your needs to meet your design requirements. You can find the template in the webchat application under:

Custom_assets/presencetemplates/templates.html

Example 1: Simple sidebar customization

Set sidebar to enabled

Because we are customizing the default sidebar in this example, and not adding custom presence buttons on the page, we can enable the default sidebar. Set the webchat setting “defaultpresencecontainerenabled” to true.

Copy

XML

<gui>
…
<defaultpresencecontainerenabled>true</defaultpresencecontainerenabled>
…
</gui>

Add custom css for the sidebar buttons

Add the following css to your custom webchat css, located in the file:

custom_assets/css/Anywhere365.sfbwebchatplus.stylecustom.css

Change chat button color and custom_image of the sidebar button

Copy

CSS

#chat_tab {
background: #175E7A url(../images/presence_custom_btnImage.png) no-repeat !important;
background-position: center 30% !important;
}

Add custom css for the presence items

Change presence items css of sidebar

Copy

CSS

/*change color of presence item and its border*/
.anywhere365PresenceItem.sidebarPresence {
background-color: #0F4053 !important;
border-bottom: none !important;
}
/*change hover color of presence item*/
.anywhere365PresenceItem.sidebarPresence:hover {
background: #175E7A !important;
}

Result

Change the images of the chat endpoints

To change the images of the chat endpoints, add the images to the folder:

Sfbwebchatplus/images/status/

Set the following webchat xml setting:

Copy

XML

<presencetemplate>
…
<webchatgroupnameimagesenabled>true</webchatgroupnameimagesenabled>
…
</presencetemplate>

Add the images with the following names

[WebChatGroupName]_[Status].png

e.g.:

Helpdesk_3500.png (online)

Helpdesk_6500.png (busy)

Helpdesk_15500.png (away)

Helpdesk_18000.png (offline)

Example 2: Advanced custom presence template

This example shows how to create your own nested presence buttons in your webpage.

Add presence item container div to your page

Add the following div to your page.

Copy

HTML

<div id="presenceItemContainerInPageWithButtons"></div>

Add script to custom presence template file

Add the following custom script to the custom presence templates (Custom_assets/presencetemplates/templates.html).

Note that the template has the following ID: presenceItemInPageWithButtons

Copy

HTML

<script id="presenceItemInPageWithButtons" type="text/x-jsrender"> <!-- Template to show presence items with direct channel buttons (chat / audio / video) --> <!-- Please keep at least the the following class names for webchat functionality: anywhere365PresenceItem, chatName, status --> <!-- Loop through all subscriptions--> {{for PresenceSubscriptions ~WebChatRootUrl=#data.WebChatPlusRootUrl}} <section id="presence"> <div class="agent"> <div class="anywhere365PresenceItem" {{if Status == 3500}}style="cursor: pointer;" {{/if}}> <div class="presenceImages"> <img id="presenceChatAnywhere365" class="person" src="{{>~WebChatRootUrl }}sfbwebchatplus/images/status/big/Default_{{:Status}}.png"alt="Start webchatplus" /> </div> <figcaption> <!-- WebChatGroupName shows the display name of the webchat skill (can be configured in the chat hub appsettings) --> <div class="name">{{: WebChatGroupName }}</div> <div class="statusText"> <!-- Switch between the statusses to show custom status text --> {{if Status == 3500}}Available{{/if}} {{if Status == 6500}}Busy, please wait...{{/if}} {{if Status == 15500}}Away, please come back later{{/if}} {{if Status == 18000}}WebChat is offline.{{/if}} </div> <ul class="contactOptions nostyle"> <!-- Only show buttons when webchat is online --> {{if Status == 3500}} <li class="chat"><a></a></li> <li class="call"><a></a></li> <li class="video"><a></a></li> {{/if}} </ul> </figcaption> <!-- Hidden fields for functionality, always keep them in the presence template --> <div class="chatName" style="display: none">{{: WebChatGroupName }}</div> <div class="status" style="display: none">{{: Status }}</div> </div> </div> </section> {{/for}} <div style="clear:both;"/> </script>

Add custom event handlers to the custom presence js file

In the file custom_assets/js/anywhere365_sfbwebchatplus_presence_custom.js add the click event handlers that belong to the new template. Note that the audio and video

Copy

Javascript

function CustomPresenceGuiScripts() {
$("#presenceItemContainerInPageWithButtons").on("click", ".person", function (event) {
var presenceitem = $(this).parent().parent().parent();
WCPPresence.OpenChatWithPresenceItem(presenceitem);
});
$("#presenceItemContainerInPageWithButtons").on("click", ".chat", function (event) {
var presenceitem = $(this).parent().parent().parent();
WCPPresence.OpenChatWithPresenceItem(presenceitem);
});
$("#presenceItemContainerInPageWithButtons").on("click", ".call", function (event) {
var presenceitem = $(this).parent().parent().parent();
WCPPresence.OpenChatWithPresenceItem(presenceitem, WebchatModes.WEBCHATMODE_AUDIO);
});
$("#presenceItemContainerInPageWithButtons").on("click", ".video", function (event) {
var presenceitem = $(this).parent().parent().parent();
WCPPresence.OpenChatWithPresenceItem(presenceitem, WebchatModes.WEBCHATMODE_VIDEO);
});
}

Subscribe custom template(s) to the webchat

Add the names of the custom templates that are added in the webchat settings xml. The prefix “presenceItemContainer” must be skipped. Add as many as you want (comma separated). In this example we only add InPageWithButtons

Copy

XML

<presencetemplate>
…
<customtemplatenames>InPageWithButtons</customtemplatenames>
…
</presencetemplate>

Add custom css for the custom presence buttons

Add the following css to your custom webchat css, located in the file:

custom_assets/css/Anywhere365.sfbwebchatplus.stylecustom.css

Copy

CSS

.contactOptions li {
float: left;
margin: 10px 25px 0 0;
display: block;
}
.contactOptions li a {
border-radius: 50px;
width: 35px;
height: 35px;
display: block;
background-repeat: no-repeat;
background-position: 0 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.contactOptions li.chat a {
background: #209cab url('../images/contact_chat.png');
border: 2px solid #209cab;
}
.contactOptions li.call a {
background: #89c140 url('../images/contact_call.png');
border: 2px solid #89c140;
}
.contactOptions li.video a {
background: #ea1788 url('../images/contact_video.png');
border: 2px solid #ea1788;
}
.contactOptions a:hover {
background-position: 0 -45px !important;
background-color: transparent !important;
}
#presence {
background-color: #fff7e7;
width: 242px;
height: 242px;
margin-left: 50px !important;
margin-bottom: 50px !important;
}

Result

Change presence images

Step 1

Create and copy 4 custom presence images to the custom_assets/images/status folder of your webchat (e.g. dummies with no tie)

- DefaultNoTie_3500.png (available)

- DefaultNoTie_6500.png (busy)

- DefaultNoTie_15500.png (away)

- DefaultNoTie_18000.png (offline)

Step 2

Replace the image source of the template

Copy

XML

<img id="presenceChatAnywhere365" class="person" src="{{>~WebChatRootUrl}}custom_assets/images/status/DefaultNoTie_{{:Status}}.png"alt="Start webchatplus" />

Add customer name in presence item

To request customer name before opening the webchat window, follow the following steps.

Step 1

Add the text field in the template, above the ul list with the buttons.

Copy

HTML

<input type="text" placeholder="Please enter your name" class="customerNameInput" />

Step 2

Add css to the custom style sheet

Copy

CSS

.anywhere365PresenceItem .customerNameInput {
-webkit-appearance: none; -moz-appearance: none;
display: block;
margin: 10px 0;
width: 100%; height: 40px;
line-height: 40px; font-size: 17px;
border: 1px solid #bbb;
}

Step 3

Change the scripts of the click event handlers. In the file custom_assets/js/anywhere365_sfbwebchatplus_presence_custom.js add the click event handlers that belong to the new template.

Copy

Javascript

$("#presenceItemContainerInPageWithButtons").on("click", ".chat", function (event) {
var presenceItem = $(this).closest(".anywhere365PresenceItem");
var customerNameInput = presenceItem.find(".customerNameInput");
var customerName = $(customerNameInput).val();
//check if customername is filled
if (customerName == "") {
alert("Please enter your name first");
return;
}
else {
//set the customerName in the presence object
presenceItem.customerName = customerName;
}
 
//open the chat with the presence object
WCPPresence.OpenChatWithPresenceItem(presenceItem);
});

Result

WebChat styling customization

Custom css styling

The webchat has a default styling. To change the styling of the webchat, use the custom css stylesheet.

Location of the custom css stylesheet

custom_assets/css/Anywhere365.sfbwebchatplus.stylecustom.css

The file custom_assets/css/Anywhere365.sfbwebchatplus.theme-green.css contains example css attributes that refer to elements of the webchat. Copy attributes from this stylesheet to your custom stylesheet to change elements of the webchat.

Example css from the green theme

The following css changes the styling of the agent messages in the chat.

Copy

CSS

/*changes the chat messages for agent*/
#Anywhere365-sfbwebchatplus-discussion li.agent .message {
background: #CCECCC !important;
border: 1px solid #ACDFAC !important;
}
#Anywhere365-sfbwebchatplus-discussion li.agent .message p {
color: #2b2d30 !important;
}
#Anywhere365-sfbwebchatplus-discussion li.agent .message:after {
background: url('../images/theme-green/discussion_corner_agent_custom.png') no-repeat !important;
}