+ Start a Discussion
Pradeep Kumar (www.pradyblog.com)Pradeep Kumar (www.pradyblog.com) 

Customize Live agent chat to send HTML, CSS and JS formatted content

I am building an Intelligent Assistance with Live Agent Chat. It automatically suggest possible answers to agent and Agent can just select any one (when agent select any response, it is sent to chat box) to send response to customer. There is a case of decision tree when Intelligent Assistance need to ask question in form of Yes or No from customer. I want to do this by rendering button or link for Yes / No to customer and when customer clicks on that a JavaScript function should be called to call a Web Service endpoint.

In Summary what i need (at agent chat box end) is to be able to send a HTML + CSS + JS formated text from Agent side of chat to Customer and Customer should be able to click on Yes / No link or button.

When i try pushing a HTML, CSS, JS formatted text automatically in chat at agent side, it is rendered to Agent as well as Customer chat window as text and not properly formatted. Any idea how to customize / custom code Live Agent chat to achieve this?

Please help!!
Best Answer chosen by Pradeep Kumar (www.pradyblog.com)
Ashish KumarAshish Kumar
Hi Pradeep,

You can follow below code.
<apex:page showHeader="false">
    <apex:includeScript value="https://code.jquery.com/jquery-3.2.1.js"/>
    
<style>
#liveAgentClientChat.liveAgentStateWaiting {
// The CSS class that is applied when the chat request is waiting to be accepted
// See "Waiting State" screenshot below
}
#liveAgentClientChat {
// The CSS class that is applied when the chat is currently engaged
// See "Engaged State" screenshot below
}
#liveAgentClientChat.liveAgentStateEnded {
// The CSS class that is applied when the chat has ended
// See "Ended State" screenshot below
}
body { overflow: hidden; width: 100%; height: 100%; padding: 0; margin: 0 }
#waitingMessage { height: 100%; width: 100%; vertical-align: middle; text-align: center;
display: none; }
#liveAgentClientChat.liveAgentStateWaiting #waitingMessage { display: table; }
#liveAgentSaveButton, #liveAgentEndButton { z-index: 2; }
.liveAgentChatInput {
height: 25px;
border-width: 1px;
border-style: solid;
border-color: #000;
padding: 2px 0 2px 4px;
background: #fff;
display: block;
width: 99%;
}
.liveAgentSendButton {
display: block;
width: 60px;
height: 31px;
padding: 0 0 3px;
position: absolute;
top: 0;
right: -67px;
}
#liveAgentChatLog {
	width: auto;   
    height:100%;
    overflow-x: hidden;
    overflow-y: auto;
    word-wrap: break-word;
    padding-right: 13px;
    padding-left: 13px;
    margin: 0;
    background-color: #f7f8f8 !important;
    border : 1px solid #e2e8ed;
}
    .client {
    	margin-top: 15px;
    	margin-bottom: 15px;
    }
    .operator {
    	margin-top : 10px;
    }
    .client > .name > strong{
    	display : none;
    }
.client > .messageText { 
        background: #deeff9;
    	float : right;
        padding: 5px;
        border-radius: 5px;
        color: black;
    	border : 1px solid #e2e8ed;
    }

.operator > .messageText  { 
    border: 1px solid #e2e8ed;
    background: white;
    padding: 5px;
    border-radius: 5px;
    }
    #liveAgentChatLogText .messageText {
    width: 95%;
    display: block;
}
</style>
<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
    
<liveAgent:clientChat >
<div style="background:black;width:100%;height:20px;color:white;">
    
<liveAgent:clientChatSaveButton />
<liveAgent:clientChatEndButton />
    </div>
<div style="top: 25px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index:
0;">
<liveAgent:clientChatAlertMessage />
<liveAgent:clientChatStatusMessage />
<table id="waitingMessage" cellpadding="0" cellspacing="0">
<tr>
<td>Please wait while you are connected to an available agent.</td>
</tr>
</table>
<div style="top: 0; right: 0; bottom: 41px; left: 0; padding: 0; position: absolute;
word-wrap: break-word; z-index: 0;">
<liveAgent:clientChatLog />
</div>
<div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right:
67px;">
<liveagent:clientChatInput /><liveAgent:clientChatSendButton />
</div>
</div>
</liveAgent:clientChat>
</div>
    <script>
    
    var targetNodes         = $(".liveAgentChatElement");
var MutationObserver    = window.MutationObserver || window.WebKitMutationObserver;
var myObserver          = new MutationObserver (mutationHandler);
var obsConfig           = { childList: true, characterData: true, attributes: true, subtree: true };

//--- Add a target node to the observer. Can only add one node at a time.
targetNodes.each ( function () {
    myObserver.observe (this, obsConfig);
} );

function mutationHandler (mutationRecords) {
    console.info ("mutationHandler:");

    mutationRecords.forEach ( function (mutation) {
        console.log (mutation.type);
        if (typeof mutation.addedNodes == "object") {
            var jq = $(mutation.addedNodes);
            console.log('jq');
            console.log (jq);
            console.log('jq operator');
            console.log (jq.is("span.operator"));
            console.log('jq span');
            console.log (jq.find("span") );
        }
    } );
}
    
    </script>
</apex:page>

 

In above code, 

"client" &  "message" CSS classes can be used to handle the stylings of the chat and javascript function "mutationHandler" will be used to listen for the changes in the chat window so that new messages can be listened and then you can handle the new messages as you want.

In case you want to handle the html tags which will be coming from agen't side you need to add the code for that in the mutationHandler function.

Let me know in case if you need more help on this & please mark this as a solution if it fulfills the requirement.

Regards,
Ashish Kr.

All Answers

Ashish KumarAshish Kumar

Hi Pradeep,

There are challenges in implementing the live agent as you want but it is very much possible if you try to implement the chat window using visualforce page.
The client side chat window will be implemented using the existing visualforce template and can customise that as per your need taking help of javascript and CSS. 
When agent sends the text containing the html format salesforce automatically encodes the code due to security purpose and hence it converts it to plain text. However you can use custom CSS and javascript at client's chat window by adding a event listner for the new incoming or outgoing chat messages.
Let me know if you need some help with the code.

Regards,
Ashish Kr.

Pradeep Kumar (www.pradyblog.com)Pradeep Kumar (www.pradyblog.com)
Hi Ashish, Thanks for reply... Yes, please share some sample code if you have done something similar. Regards, Pradeep Kumar
Ashish KumarAshish Kumar
Hi Pradeep,

You can follow below code.
<apex:page showHeader="false">
    <apex:includeScript value="https://code.jquery.com/jquery-3.2.1.js"/>
    
<style>
#liveAgentClientChat.liveAgentStateWaiting {
// The CSS class that is applied when the chat request is waiting to be accepted
// See "Waiting State" screenshot below
}
#liveAgentClientChat {
// The CSS class that is applied when the chat is currently engaged
// See "Engaged State" screenshot below
}
#liveAgentClientChat.liveAgentStateEnded {
// The CSS class that is applied when the chat has ended
// See "Ended State" screenshot below
}
body { overflow: hidden; width: 100%; height: 100%; padding: 0; margin: 0 }
#waitingMessage { height: 100%; width: 100%; vertical-align: middle; text-align: center;
display: none; }
#liveAgentClientChat.liveAgentStateWaiting #waitingMessage { display: table; }
#liveAgentSaveButton, #liveAgentEndButton { z-index: 2; }
.liveAgentChatInput {
height: 25px;
border-width: 1px;
border-style: solid;
border-color: #000;
padding: 2px 0 2px 4px;
background: #fff;
display: block;
width: 99%;
}
.liveAgentSendButton {
display: block;
width: 60px;
height: 31px;
padding: 0 0 3px;
position: absolute;
top: 0;
right: -67px;
}
#liveAgentChatLog {
	width: auto;   
    height:100%;
    overflow-x: hidden;
    overflow-y: auto;
    word-wrap: break-word;
    padding-right: 13px;
    padding-left: 13px;
    margin: 0;
    background-color: #f7f8f8 !important;
    border : 1px solid #e2e8ed;
}
    .client {
    	margin-top: 15px;
    	margin-bottom: 15px;
    }
    .operator {
    	margin-top : 10px;
    }
    .client > .name > strong{
    	display : none;
    }
.client > .messageText { 
        background: #deeff9;
    	float : right;
        padding: 5px;
        border-radius: 5px;
        color: black;
    	border : 1px solid #e2e8ed;
    }

.operator > .messageText  { 
    border: 1px solid #e2e8ed;
    background: white;
    padding: 5px;
    border-radius: 5px;
    }
    #liveAgentChatLogText .messageText {
    width: 95%;
    display: block;
}
</style>
<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
    
<liveAgent:clientChat >
<div style="background:black;width:100%;height:20px;color:white;">
    
<liveAgent:clientChatSaveButton />
<liveAgent:clientChatEndButton />
    </div>
<div style="top: 25px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index:
0;">
<liveAgent:clientChatAlertMessage />
<liveAgent:clientChatStatusMessage />
<table id="waitingMessage" cellpadding="0" cellspacing="0">
<tr>
<td>Please wait while you are connected to an available agent.</td>
</tr>
</table>
<div style="top: 0; right: 0; bottom: 41px; left: 0; padding: 0; position: absolute;
word-wrap: break-word; z-index: 0;">
<liveAgent:clientChatLog />
</div>
<div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right:
67px;">
<liveagent:clientChatInput /><liveAgent:clientChatSendButton />
</div>
</div>
</liveAgent:clientChat>
</div>
    <script>
    
    var targetNodes         = $(".liveAgentChatElement");
var MutationObserver    = window.MutationObserver || window.WebKitMutationObserver;
var myObserver          = new MutationObserver (mutationHandler);
var obsConfig           = { childList: true, characterData: true, attributes: true, subtree: true };

//--- Add a target node to the observer. Can only add one node at a time.
targetNodes.each ( function () {
    myObserver.observe (this, obsConfig);
} );

function mutationHandler (mutationRecords) {
    console.info ("mutationHandler:");

    mutationRecords.forEach ( function (mutation) {
        console.log (mutation.type);
        if (typeof mutation.addedNodes == "object") {
            var jq = $(mutation.addedNodes);
            console.log('jq');
            console.log (jq);
            console.log('jq operator');
            console.log (jq.is("span.operator"));
            console.log('jq span');
            console.log (jq.find("span") );
        }
    } );
}
    
    </script>
</apex:page>

 

In above code, 

"client" &  "message" CSS classes can be used to handle the stylings of the chat and javascript function "mutationHandler" will be used to listen for the changes in the chat window so that new messages can be listened and then you can handle the new messages as you want.

In case you want to handle the html tags which will be coming from agen't side you need to add the code for that in the mutationHandler function.

Let me know in case if you need more help on this & please mark this as a solution if it fulfills the requirement.

Regards,
Ashish Kr.

This was selected as the best answer
Pradeep Kumar (www.pradyblog.com)Pradeep Kumar (www.pradyblog.com)
Thanks Ashish, this makes sense. I will let you know if this works for me...
 
Pradeep Kumar (www.pradyblog.com)Pradeep Kumar (www.pradyblog.com)
Thanks for the code Ashish!!!
Pradeeps23Pradeeps23
Hi Pradeep, Can you please share any code if this worked for you.