Add Your Branding to Embedded Chat
- Add branding to your customer chat window.
- Test your web chat implementation.
|What font and colors does Ursa Major Solar use in its marketing materials?||According to our branding guidelines, Ursa Major Solar uses Salesforce Sans. The brand’s colors are #006937, #565656, and #F5B335.|
|Does Ursa Major Solar have a logo?||Yes, we can use the following image.|
|Should we add an agent avatar that displays in the chat window for the customer?||Yes, we can use the following image.|
Armed with branding materials, Maria goes to Embedded Service setup to add the Ursa Major Solar colors, font, and images. These design elements make the chat window fit seamlessly into their website!
Follow along with Maria as she adds some custom branding to her chat window.
First, let’s add our images to Salesforce so they have links that we can use in Embedded Service Setup. You don’t have to do this if your images are already hosted somewhere with a public link. Because we’re using a test website, we can upload our images as static resources in Salesforce to create links.
Save these logo and agent avatar images to your desktop.
- Logo image:
- Agent avatar image:
- From Setup, enter Static Resources in the Quick Find box, then select Static Resources.
- Click New.
- Enter the name Logo.
- Click Choose File and select the logo image (the image of the Ursa Major Solar logo) you saved.
- Select Public for the Cache Control.
- Click Save.
- On the Static Resource Detail age, click View file to open the image in a new tab.
- Copy the URL and paste it somewhere safe, or leave the tab open so you can grab the URL later. You need this URL soon.
Repeat steps 3-9 for the agent avatar image (the image with a person’s face). Enter
AgentAvatar for the name.
Next, Maria sets the colors in the chat window to match Ursa Major Solar’s branding.
- From Setup, enter Embedded Service in the Quick Find box, then select Embedded Service.
- Click the arrow beside your Embedded Service deployment and select View.
- Click Edit next to Branding.
Select colors and a font. Use the live preview to see where the colors appear.
- Enter #006937 for the Brand Primary and Nav Bar colors.
- Enter #565656 for the Brand Secondary color.
- Keep Salesforce Sans selected for the Font.
- Leave the Contrast Primary color as-is.
Easy! Now we need to add a few more touches to the chat window.
- Next to Chat settings, click Edit.
- If the Pre-chat slider is moved to active, change it to Inactive.
- Next to Additional branding, click Edit.
- Paste the URL for the logo image in the Logo field.
- Paste the URL for the agent avatar image in the Agent Avatar field.
- Click Save.
With only a few clicks, the customer chat window now fits seamlessly into Ursa Major Solar’s brand.
Everything looks great, and Maria is ready to test her web chat implementation.
- Open the Visualforce page she made in the first unit and see the offline chat window.
- Open the out-of-the-box Service console and go online using the Available - Chat status in the Omni-Channel utility.
- Refresh the Visualforce page and click the chat window to start a chat.
- Send chats as the customer and as the agent to make sure everything works properly.
- End the chat from either the customer or agent chat window.
Follow along to test out your web chat implementation.
From Setup, enter Visualforce in the Quick Find box, and select
If you don’t see Visualforce Pages as an option, make sure you’re in Setup and not Service Setup.
Click next to the Web Chat Visualforce page to open it in a new tab or
window. Your chat window displays an offline chat button in the bottom-right corner.
- Go back to your Setup tab and click the waffle icon to open the App Launcher.
Select Service Console.
- Open the Omni-Channel utility and change your status to Available - Chat. You can now take on chats as an agent!
Return to the tab with your Visualforce page and refresh it. Your chat window displays
an online chat button.
Click the chat window to request a chat.
After you request the chat, minimize the customer chat window to see the logo image on the chat window.
- In the console, accept the chat request in the Omni-Channel utility. The chat transcript opens in the console.
Chat back and forth with yourself for a while.
In the customer chat window, note the Ursa Major Solar colors and agent avatar image.
- End the chat from either the agent or customer chat window. Close the chat transcript record and related records in the console.
How cool is that? Maria just set up and tested web chat, and it only took a few minutes.
Now Maria has a working web chat to bring to Sita and Roberto. She can’t wait to show them how simple the experience is from both the agent and customer sides of the conversation.