Adding a Live Agent Chat Side Tab to All Pages in a Community

Chatter Communities gives administrators and web developers a method to implement more advanced customization of the UI, without resorting to fully custom pages or sites through Force.com Sites or Site.com. The means to achieve this customization is through an HTML header or footer, uploaded as a Document in Salesforce. The ability to customize the entire site with HTML gives web developers an easy way to add a Web 2.0 feature to an entire community: live chat side tab via Live Agent.

Similar to the Contact Us side tab shown on salesforce.com (screenshot above), the intent behind the live chat side tab is to enable the following functionality, no matter where a user is in a community:

• Chat with a customer service agent live, if one available
• If an agent is unavailable, quickly open a page to log a new case

The steps to achieving this are actually surprisingly simple, and can be tested through a brief tutorial with a new Developer Edition org. The high-level steps are:

1. Enable Live Agent
2. Create a Live Agent Deployment, copying the HTML code and pasting it into the community's custom HTML footer
3. In the HTML footer, add a div with an inline style attribute to become the side tab
4. Create a Live Agent Chat Button, copying the HTML code and pasting it into the side tab div
5. Configure a new community to use the custom HTML footer, after uploading it