Brand Your Community Snap-ins Chat

Salesforce has introduced a new way of connecting and communicating with customers by using the Live Agent through a lightning component: Snap-ins.

We have already written about how to configure the live agent in communities , please find it here which is required to perform the steps mentioned in this article.

Now we are going to discuss how to display company logo, company banner, Agent avatar, waiting state image in that chat window.

Adding the logo’s and images to the documents folder:

  • Navigate to Documents Tab | Create a New Folder with Read/Write Permission and Give Access to all users by selecting “This folder is accessible by all users”

  • Once the folder is created, Click on that Folder and Click “New Document”.
  • Enter Document Name | Select “Externally available image” | Ensure the folder is the one which you have created | Choose File | Click Save

Upload document to Salesforce.

  • Open the Folder which you have created and click View for your document.

  • Copy the URL as mentioned below.
  • Go to Community Builder (Setup | Customize | Communities | All Communities | Click “Builder” next to your community).
  • Go to Page Structure, Choose “Snap-ins” component, Paste the URL in Pre-chat Background Image URL (See reference image below).
  • Similarly, upload all the documents, get their URL and paste it in Agent Avatar, Company logo page. This is how it will appear.

Note: Required Dimensions for the images:

Pre-Chat Banner: 320 * 100

Minimized Logo: 25 * 25

Waiting State: 200 * 60

Agent Avatar: 40 * 40

We would love to hear your feedback and understand how we can improve upon it.