0

i have this problem with liveagent chatwindow configuration ; my Timestamp for every message is located down on the page like in this pictureenter image description here

I want to have this result ; every message must have his own timestamp. enter image description here

How can i solve this problem ?

       <!--<div id="photo-container" class="photocontainer">
               <img id="agentphoto" src=""/>
       </div>-->
       <div style="top: 7px; left: 7px; right: 7px; bottom: 7px; background: none; z-index: 0; position: absolute; ">
           <div>

               <div id="brand"/>
               <!--<div id="userPhoto">
                   <img id="agentphoto" src=""/>   
               </div>-->

           </div>
           <div id="transcript" >
               <liveAgent:clientChatAlertMessage />
               <liveAgent:clientChatStatusMessage />
               <table id="waitingMessage" cellpadding="0" cellspacing="0">
               <tr>
                   <td>{!$Label.Connect_Agent}</td>
               </tr>
               </table>


               <liveAgent:clientChatLog showTimeStamp="true" />


           </div>

           <div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right: 67px;bottom: 30px">
               <liveagent:clientChatInput />
               <!--<liveAgent:clientChatSendButton label="{!$Label.Send_Chat}" />-->
               <div id="image">
                   <img src="/resource/1488906234000/InvioChat" onclick="SfdcApp.LiveAgent.Chasitor.sendMessage();"/>   
               </div>
           </div>
       </div>
       <liveAgent:clientChatEndButton label="{!$Label.End_Chat}" />
   </div>
 </div>

Styles Used

#liveAgentChatLogText .timestamp {
   display: inline-block;
   font-size: 0.85em;
   font-weight: 200;
   color: #929A9D;
   text-transform: uppercase;
   padding: 8px 0px 8px 0px;
   position: absolute;
   bottom: -30px;
}

#liveAgentChatLogText .operator .timestamp {
   left: 0px;
}

#liveAgentChatLogText .client .timestamp {
   right: 0px;
}
  • Are you using custom Chat window? In the default chat window every message has their own timestamp below the message. – Saroj Bera Mar 31 '17 at 10:55
  • Yes, it is a custom chat window; the problem in that in HTML i have the span element of 'timestamp' out of Client'/'Operator' span element. – Giuseppe Mar 31 '17 at 12:46
  • Even normal custom chat window doesn't have this issue. Can you please share your chat window code? – Saroj Bera Mar 31 '17 at 12:49
  • <div id="transcript" > <liveAgent:clientChatAlertMessage /> <liveAgent:clientChatStatusMessage /> <table id="waitingMessage" cellpadding="0" cellspacing="0"> <tr> <td>{!$Label.Connect_Agent}</td> </tr> </table> <liveAgent:clientChatLog showTimeStamp="true" /> </div> – Giuseppe Mar 31 '17 at 12:52
  • The best way to enhance the question is to edit and add the details instead putting it as a comment. Please post your entire page code because it is very difficult to guess the error without seeing the page structure and the CSS. – Saroj Bera Mar 31 '17 at 13:07
0

I couldn't work on your page as you have not posted the entire page code. I tried to create a Custom chat page with the required behavior. Here is the code. You can update this page with your colors and images. Hope this will help.

<apex:page showHeader="false" controller="Chatwindowcontroller" cache="true">
<style>
    html {
        padding: 20px; 
    }
    body { 
        background-color: #778899;
        overflow: hidden; 
        width: 100%; 
        height: 100%; 
        padding: 20px; 
        margin: 0 
    }
    #waitingMessage { 
        color:white;
        height: 100%; 
        width: 100%; 
        vertical-align: middle; 
        text-align: center; 
        display: none; 
     }
    #liveAgentClientChat.liveAgentStateWaiting #waitingMessage { display: table; }
    #liveAgentSaveButton, #liveAgentEndButton { z-index: 2; }
    .liveAgentChatInput {
        top:8px;
        height: 25px;
        border-width: 1px;
        border-style: solid;
        border-color: #BB0000;
        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 {
        border-color: #BB0000;
        background-image:linear-gradient(#DDEEFF, #AABBCC);
        box-shadow: 10px 10px 5px #888888;
        border-radius: 10px;
        padding:10px;
        width: auto;
        height: auto;
        top: 3px;
        position: absolute;
        overflow-y: auto;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .client{
        text-align:right;
    }
    span.client + span {
        text-align:right;
    }    
</style>

<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute; padding:10px;">
<liveAgent:clientchat >
    <liveAgent:clientChatSaveButton label="Save ChatC" />
    <liveAgent:clientChatEndButton label="End ChatC" />
    <div id="photo-container" class="photocontainer">
        Hello<img id="agentphoto" src=""/>
    </div>    
    <div id="prechatdata">
    </div>
    <div style="top: 30px; 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 agentTypingLabel="Agent is typing...." visitorNameLabel="Doctor" showTimeStamp="true" />
    </div>
    <div style="position: absolute; height: auto; right: 0; bottom: 0; left: 0; margin-right: 67px;">
        <liveagent:clientChatInput /><liveAgent:clientChatSendButton label="SendC"/>
    <liveAgent:clientChatFileTransfer />
    </div>
    </div>
</liveAgent:clientchat>
</div>
</apex:page>

Chat Screen

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.