[SalesForce] Save Live Agent PreChat Field to Beginning of Chat Log

I find that there's a way to save prechat data to a custom field on the Live Chat Transcript object. For example, if I want to save a prechat Question to the Live Chat Transcript object, I would do the following in the prechat form.

<input type='text' name='liveagent.prechat:Question' placeholder="What's your question?" id='subject'/>
<input type="hidden" name="liveagent.prechat.save:Question" value="Question__c" />

However, I would like to save this field to the first line in the Body of the chat transcript so that the first thing the agent sees in the chat window from the customer is the question they posed on the prechat form. Is this possible? If so, how?

Best Answer

If you are using Custom Chat Window then you can do this following way.

Pass the Question from Pre-Chat window to Chat window with the help of a Cookie. Refer to this Salesforce documentation for more details.

Once the Chat window loads, retrieve the Question from Cookie populate the Chat Input Field and Send the Chat by clicking the Send button with the help of JavaScript. So this will be the First message receive by Agent.

You have to write the JavaScript code in the ChatEstablished event. As per Salesforce this event Indicates that an agent has accepted a chat request and is engaged in a chat with a visitor.

The JavaScript code that do the magic.

liveagent.addEventListener(liveagent.chasitor.Events.CHAT_ESTABLISHED,myCallBack);
function myCallBack() { 
  document.getElementById("liveAgentChatInput").value = ReadCookie("prechat_question");
  document.getElementsByClassName("liveAgentSendButton")[0].click();;
}

Complete Chat Window Code

<apex:page showHeader="false">
    <style>
        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: auto;
            top: 0px;
            position: absolute;
            overflow-y: auto;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
    <script type='text/javascript'>
        liveagent.addEventListener(liveagent.chasitor.Events.CHAT_ESTABLISHED,myCallBack);
        function myCallBack() { 
          document.getElementById("liveAgentChatInput").value = ReadCookie("prechat_question");
          document.getElementsByClassName("liveAgentSendButton")[0].click();;
        }
        function ReadCookie(cookieName) {
            var theCookie = " " + document.cookie;
            var ind = theCookie.indexOf(" " + cookieName + "=");
            if (ind == -1) ind = theCookie.indexOf(";" + cookieName + "=");
            if (ind == -1 || cookieName == "") return "";
            var ind1 = theCookie.indexOf(";", ind + 1);
            if (ind1 == -1) ind1 = theCookie.length;
            return unescape(theCookie.substring(ind + cookieName.length + 2, ind1));
        }    
    </script>    
    <div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
        <liveAgent:clientchat >
            <liveAgent:clientChatSaveButton label="Save Chat" />
            <liveAgent:clientChatEndButton label="End Chat" />
            <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 label="Send"/>
                </div>
            </div>
        </liveAgent:clientchat>
    </div>
</apex:page>

This Chat Window is taken from Live Agent Developer's Guide

Related Topic