Start tracking your progress
Trailhead Home
Trailhead Home

Add Your Branding to Snap-Ins 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.The Ursa Major Solar logo
Should we add an agent avatar that displays in the chat window for the customer? Yes, we can use the following image.The agent avatar for Ursa Major Solar

Beautify with Branding

Armed with branding materials, Maria goes to Snap-ins 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 snap-in.

First, let’s add our images to Salesforce so they have links that we can use in Snap-ins 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.

  1. Save these logo and agent avatar images to your desktop.
    1. Logo image: The Ursa Major Solar logo
    2. Agent avatar image: The agent avatar for Ursa Major Solar
  2. From Setup, enter Static Resources in the Quick Find box, then select Static Resources.
  3. Click New.
  4. Enter the name Logo.
  5. Click Choose File and select the logo image (the image of the Ursa Major Solar logo) you saved.
  6. Select Public for the Cache Control.
  7. Click Save.
  8. On the Static Resource Detail age, click View file to open the image in a new tab.The View file link on the static resource detail page
  9. 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.
  10. 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 snap-in to match Ursa Major Solar’s branding.
  11. From Setup, enter Snap-ins in the Quick Find box, then select Snap-ins.
  12. Click the arrow beside your Snap-ins deployment and select View.
  13. Click Edit next to Branding.
  14. Select colors and a font. Use the live preview to see where the colors appear. Snap-ins branding options
    1. Enter #006937 for the Brand Primary and Nav Bar colors.
    2. Enter #565656 for the Brand Secondary color.
    3. Keep Salesforce Sans selected for the Font.
    4. Leave the Contrast Primary color as-is.
  15. Click Finish.
    Easy! Now we need to add a few more touches to the chat window.
  16. Next to Live Agent settings, click Edit.
  17. If the Pre-chat slider is moved to active, change it to Inactive.
  18. Next to Additional branding, click Edit.
  19. Paste the URL for the logo image in the Logo field.
  20. Paste the URL for the agent avatar image in the Agent Avatar field.
  21. 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 snap-in.
  • 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 snap-in 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.

  1. From Setup, enter Visualforce in 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.
  2. Click Popout Icon next to the Web Chat Visualforce page to open it in a new tab or window. Your snap-in displays an offline chat button in the bottom-right corner.
    Note

    Note

    Your snap-in might look a bit funny in your Visualforce page because our page doesn’t include any styling or formatting. In an actual website or Community, it looks something like this: Offline snap-in in a Community

  3. Go back to your Setup tab and click the waffle icon to open the App Launcher.
  4. Select Service Console.
    Note

    Note

    Use the out-of-the-box service console, not a console app that you’ve created. That’s where we enabled everything during the Live Agent setup flow.

  5. Open the Omni-Channel utility and change your status to Available - Chat. You can now take on chats as an agent!Statuses in the Omni-Channel utility in the console
  6. Return to the tab with your Visualforce page and refresh it. Your snap-in displays an online chat button.
    Note

    Note

    Your snap-in might look a bit funny in your Visualforce page because our page doesn’t include any styling or formatting. In an actual website or Community, it looks something like this: Online snap-in in a Community

  7. Click the snap-in to request a chat.
    After you request the chat, minimize the customer chat window to see the logo image on the snap-in.
    Tip

    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 whitelist https://*.visualforce.com in your CORS settings.

  8. In the console, accept the chat request in the Omni-Channel utility. The chat transcript opens in the console.
  9. Chat back and forth with yourself for a while.
    In the customer chat window, note the Ursa Major Solar colors and agent avatar image.
  10. 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.

Resources

Lightning bolt icon used to indicate that the content is for Lightning Experience

Remember, this module is meant for Lightning Experience. When you launch your hands-on org, switch to Lightning Experience to complete this challenge.

retargeting