Red Argyle Logo

Patterns
The Salesforce Blog with Tailored Goodness

Embedding Chatter in Custom Visualforce Pages

I was recently given the challenge of adding the Salesforce Chatter component to a custom Visualforce page. In normal scenarios, this is easy–Visualforce exposes the simple chatter:feed component, which makes it trivial to load the feed on any page. The catch is that your Visualforce page must include the standard Salesforce style sheets because the Chatter component relies on the Salesforce CSS and JavaScript files. In this case, the page I was editing was fully customized. It had the standard style sheets disabled and was using the Bootstrap framework, along with a lot of other custom CSS and JavaScript. Of course, I initially tried to enable the Salesforce standard style sheets and hoped they would play nice alongside our own stylesheets. They didn’t. The resulting page was mayhem, and it wasn’t worth going down the rabbit hole of trying to get all of the different styles to work together.

 

I ultimately devised another solution. It certainly isn’t perfect, but, in this case, it fulfilled my requirements and was a lot better than rewriting the whole Chatter component from scratch. I started by creating a new Visualforce page with the standard style sheets enabled and containing only the Chatter component. Then, in the original page, I included the new Chatter-specific page in an IFrame element. This effectively loads the Chatter component as an isolated element with its own style sheets.

 

The usage of an IFrame does cause some oddities however. First, scrolling is a little weird. When the Chatter component’s content is bigger than the IFrame container, scroll bars are added to the container and the user must scroll within the IFrame to see all of the content. While this can be strange when you first experience it, I think it’s an acceptable user interface in this instance. The second oddity is that when a link is clicked inside the IFrame, the content for that link is rendered inside the IFrame instead of in the whole page. This creates a “page within a page” effect. Luckily, this can be fixed with some JavaScript magic by listening for when the user clicks on a link and then intercepting the click and changing the URL for the whole page. For my example below, I accomplished this using jQuery, which is a great solution thanks to its simplicity. You could also do this using vanilla JavaScript.

 

In an ideal world, Salesforce would provide a standalone Chatter component that doesn’t require their standard style sheets to be included for the whole page. (If anyone at Salesforce is listening, please do this!) But, in the meantime, this is a reasonable workaround. I hope that by sharing my solution it will save someone else the time it spent for me to figure it out. Check out the sample code below, and if you have any questions, or if you have a better solution, be sure to leave a comment.

 

Comments

  • hi i tried using your code but need a controller for those pages.. would you please share the controller classes for the above two pages..

    • Hi Nikita,

      Those two example page can actually work without a controller. If you remove the attributes controller=”ChatterPage” and controller=”CustomPage” from the tag at the top of each page then they should work without controllers. The other option would be to create empty controllers since the example pages I provided do not actually need to interact with the controller. In the future if you needed to expand the functionality of the page then you would simply add code to that empty controller. An empty controller for the ChatterPage would look like this:

      public class ChatterPage {}