Add Your Branding to Embedded Chat
Learning Objectives
After completing this unit, you’ll be able to:
- Add branding to your customer chat window.
- Test your web chat implementation.
Plan for Branding
Maria is excited to demo web chat for Sita and Roberto, but first she wants to make sure that the customer chat window looks seamless to Ursa Major Solar’s brand. So, she thinks of a few questions to ask Sita. The answers help her ensure that everything looks just as it should.
| Question | Answer |
|---|---|
| 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.
|
Beautify with Branding
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:
- Logo 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
AgentAvatarfor the name. Next, Maria sets the colors in the chat window to match Ursa Major Solar’s branding. - From Setup, enter
Embedded Servicein the Quick Find box, then select Embedded Service Deployments. - 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
#006937for the Brand Primary and Header colors. - Leave the Contrast Primary, Header Text, and Header Alternate colors as-is.
- Keep Salesforce Sans selected for the Font.
- Enter
- Click Finish. 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.
Give It a Whirl
Everything looks great, and Maria is ready to test her web chat implementation.
Here’s what Maria will do to test web chat.
- 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
Visualforcein the Quick Find box, and select Visualforce Pages. 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.
Your chat window might look a bit funny in your Visualforce page because our page doesn’t include any styling or formatting. In your actual website or Experience site, it looks something like this:
- From the App Launcher, find and select Service Console. Use the out-of-the-box service console, not a console app that you’ve created. That’s where we enabled everything during the Chat setup flow.
- 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.
Your chat window might look a bit funny in your Visualforce page because our page doesn’t include any styling or formatting. In your actual website or Experience site, it looks something like this:
- 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.
Tip: Having trouble starting a chat? Check the URL in your Visualforce page. If the URL ends with .visualforce.com instead of .force.com, you need to allowlist https://*.visualforce.com in your CORS settings. - 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.
