0

I'm not a web dev so styling the custom chat window has been a pain. I've made a lot of progress but found it very difficult to get the operator and client bubbles to appear. Here's my stab at it so far. What do I need to do to get something like the below picture?

custom chat

<apex:page showHeader="false" controller="LiveChatRemoter">
<link rel="stylesheet" href="https://d2myx53yhj7u4b.cloudfront.net/sites/default/files/cdn/css/http/css_BClfAajFTZrz8iHm6NpTgVziqeVxoNg5vrjSu228e9k.css"/>
<link rel="stylesheet" href="https://d2myx53yhj7u4b.cloudfront.net/sites/default/files/cdn/css/http/css_rs-rZE2a4RBXwrsBQZF9eBxv64OlwGNxeuFaGsyQoIo.css"/>
<link rel="stylesheet" href="https://d2myx53yhj7u4b.cloudfront.net/sites/default/files/cdn/css/http/css_EhcqQluFhABuvDSL0ibB5W0cjRSWkcosg2Jnjlbyk5Q.css"/>
<link rel="stylesheet" href="https://d2myx53yhj7u4b.cloudfront.net/sites/default/files/cdn/css/http/css_qujiGCCfKZICKxfRZV7A15vGqBNyjMAhIEHiP-z3MAI.css"/>
<link rel="stylesheet" href="https://d2myx53yhj7u4b.cloudfront.net/sites/default/files/cdn/css/http/css_zzsI6DK2Iz_ssmMQ_h_WRrDkgEMqGcoap_xlSrT-xzc.css"/>
<link rel="stylesheet" href="https://d2myx53yhj7u4b.cloudfront.net/sites/default/files/cdn/css/http/css_wWCoLmmVl7Z4mrkVARZonI1F_8JVvDnQUxkOsrh5o2s_salesforce-chat.css.css" media="screen"/>
<style>

    html {
        padding: 20px;
    }

    body {
        background-color: #f5f5f5;
        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 {
        float: left;
    }

    .liveAgentEndButton {
        float: right;
    }

    .liveAgentSaveButton, .liveAgentEndButton, .liveAgentSendButton {
        font-family: "proxima_nova_sbold", "proxima_nova_sbold_cyrillic", Helvetica, Arial, sans-serif;
        display: inline-block;
        border: none;
        cursor: pointer;
        margin: 0;
        border-radius: 3px;
        text-shadow: none;
        text-decoration: none;
        text-align: center;
        box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.65);
    }

    .liveAgentSaveButton, .liveAgentEndButton {
        z-index: 2;
        width: 75px;
        height: 20px;
        bottom: 5px;
    }

    .liveAgentChatInput {
        height: 30px;
        border-width: 1px;
        border-style: solid;
        border-color: #000;
        font-family: "proxima_nova_sbold", "proxima_nova_sbold_cyrillic", Helvetica, Arial, sans-serif;
        line-height: 1.5rem;
        padding: 2px 0 2px 4px;
        background: #fff;
        display: block;
        /*display: inline-block;*/
        width: 99%;
    }

    .liveAgentSendButton {
        /*display: block;*/
        width: 60px;
        height: 30px;
        position: absolute;
        top: 0;
        right: -67px;
        background: #6dad3f;
        background-image: -webkit-gradient(linear, left top, left bottom, left, right);
        background-image: -webkit-linear-gradient(top, #6dad3f, #498d1a);
        background-image: -moz-linear-gradient(top, #6dad3f, #498d1a);
        background-image: -ms-linear-gradient(top, #6dad3f, #498d1a);
        background-image: -o-linear-gradient(top, #6dad3f, #498d1a);
        background-image: linear-gradient(to bottom, #6dad3f, #498d1a);
        -webkit-appearance: push-button;
        color: #fff;
        line-height: 1.5rem;
    }

    #liveAgentChatLog {
        padding-right: 15px;
        padding-left: 15px;
        width: auto;
        height: auto;
        top: 0;
        position: absolute;
        overflow-y: auto;
        left: 0;
        right: 0;
        bottom: 0;
        border: none;
    }

    .client {
        text-align: right;
    }

    span.client + span {
        text-align: right;
    }

    #liveAgentChatLogText .name {
        font-weight: 600;
        font-size: 1em;
        line-height: 1.2;
        display: block;
        white-space: pre;
    }

    #liveAgentChatLogText p {
        /*line-height: 1.3 !important;*/
        /*font-weight: 200 !important; !*makes font thin *!*/
        /*font-size: 1em !important;*/
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        word-wrap: break-word;
        word-break: normal;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }

    #liveAgentChatLogText .bubble {
        position: relative;
        display: -moz-inline-stack;
        display: inline-block;
        margin: 0.2em 0em 0.4em 0em;
        padding: 8px 10px 8px 10px;
        border: 1px solid #E2E8ED;
        -moz-border-radius: 3px;
        border-radius: 3px;
        max-width: 90%;
    }

    /*#liveAgentChatLogText .operator, #liveAgentChatLogText .client, #liveAgentChatLogText .system {*/
        /*margin-bottom: 10px;*/
        /*clear: both;*/
        /*position: relative;*/
        /*width: 100%;*/
        /*-webkit-box-sizing: border-box;*/
        /*-moz-box-sizing: border-box;*/
        /*box-sizing: border-box;*/
    /*}*/

    #liveAgentChatLogText .timestamp {
        font-size: 0.75em;
        color: #929A9D;
        text-transform: uppercase;
    }

</style>

<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
    <liveAgent:clientChat>
        <div style="top: 30px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index: 0;">
            <liveAgent:clientChatSaveButton/>
            <liveAgent:clientChatEndButton/>
        </div>
        <div style="top: 65px; left: 5px; right: 5px; bottom: 5px; position: absolute; z-index: 1;">
            <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="The agent is typing" showTimeStamp="true"/>
            </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>

1

As it turns out, the client code wasn't producing any elements with the "bubble" class, so of course the above styling wasn't working. With some patience and inspection, I was able to get the look I wanted with the following additional styles.

#liveAgentChatLogText .messageText {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 8px 10px 8px 10px;
    border: 1px solid #E2E8ED;
    -moz-border-radius: 3px;
    border-radius: 3px;
    max-width: 90%;
}

.operator .messageText {
    float: left;
    background-color: rgba(178, 204, 231, 0.21);

}

.client .messageText {
    float: right;
    background-color: #FFFFFF;
    /*background-color: rgba(204,234,182,0.21);*/
}

span.system {
    padding: 2px 10px;
    clear: both;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    font-style: italic;
    color: #6b7173;
    line-height: 1.5 !important;
    display: block;
    text-align: center;
}

#liveAgentChatLogText .name {
    font-weight: 500 !important;
    font-size: 1em;
    line-height: 1.2;
    display: block;
    white-space: pre;
}

#liveAgentChatLogText p {
    /*line-height: 1.3 !important;*/
    /*font-weight: 200 !important; !*makes font thin *!*/
    /*font-size: 1em !important;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: normal;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

#liveAgentChatLogText .bubble {
    position: relative;
    display: -moz-inline-stack;
    display: inline-block;
    margin: 0.2em 0em 0.4em 0em;
    padding: 8px 10px 8px 10px;
    border: 1px solid #E2E8ED;
    -moz-border-radius: 3px;
    border-radius: 3px;
    max-width: 90%;
}

#liveAgentChatLogText .operator, #liveAgentChatLogText .client, #liveAgentChatLogText .system {
    clear: both;
    position: relative;
    /*width: 100%;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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.