function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
jimmy.juarez1.392248166112164E12jimmy.juarez1.392248166112164E12 

Live Agent Custom Branding and Styling

Hello,

I am attempting to style the default "Chat Window", the one that displays automatically if a "Custom Chat Page" (visualforce page) is not defined. 

BEFORE
User-added image
Is there a way to customize the CSS for this default chat window to look like this:

AFTER
User-added image
I was able to copy the HTML code, then modify and reference the CSS from the default chat window to apply our branding style guidelines.  I do not want to create a custom chat window using visualforce, I just want to change the toolbar and button colors, that's it.

Alternatively, are there fully functional chat window visualforce templates available to customize?  How can I reverse engineer the rendered HTML  from the default chat window with all of the visualforce components in place, where I can create my own VF page: 
<div style="top: 0; left: 0; right: 0; bottom: 0; position: absolute;">
        <liveAgent:clientChat>
        <liveAgent:clientChatSaveButton />
        <liveAgent:clientChatEndButton />
        <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>
Please help.

Thanks...
 
SandhyaSandhya (Salesforce Developers) 
Hi,

Please refer below link for customizing Live Agent.

https://resources.docs.salesforce.com/sfdc/pdf/live_agent_dev_guide.pdf
 
Hope this helps you!

Please mark it as solved if this helps you so that it will make for other as a proper solution.

Thanks and Regards
Sandhya
jimmy.juarez1.392248166112164E12jimmy.juarez1.392248166112164E12
Thank you Sandhya for the suggestion. The “Live Agent Developer Guide” is where I scraped the above sample code with VF components. I do not want to code an entire solution myself, it’s not practical. I’m looking for an easy way to modify a few style parameters or for fully functional templates that I can modify. Thank you, Jimmy
Jeff SongJeff Song
Hi Jimmy.  We are having a similar issue.  Did you have any luck resolving your issue?
patrick clanceypatrick clancey
I had to go for the start from scratch route, it would be very handy if a user style sheet could be added to the default chat template so we can override a few colours without having to build from scratch. 
Katir DriavalKatir Driaval
Hi Jimmy,
I know it is an old question, but you said that "I was able to copy the HTML code, then modify and reference the CSS from the default chat window". May I ask how you did that ?
I've been trying to do that as well, because I just want to modify some of the texts messages such as upload files msg, waiting msg ...
patrick clanceypatrick clancey
Hummm... I think it was in Build > Develop > Visualforce Pages > LiveChatPage. If not, then I'm not sure where I got it from sadly. Patrick
Katir DriavalKatir Driaval
Hi Patrick,
Did you manage to reference the css from the default chat window ?
If you did, could you post your code, or at least your <head> tag so I can see how it is done and adpat it to my org, thanks.
James LumbJames Lumb

Hi Patrick / Katir 

Did you have any luck with this? 

James
Automated DeploymentAutomated Deployment
Hi Patrick,

Can you please help me with finding the default LiveChatPage. Because I am not able to spot in branch/Org.

Thanks