Get Started with Web Chat

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe the benefits of live web chat.
  • Describe what an embedded chat window is.
  • Use a guided setup flow to set up web chat.
  • Create a test website using a Visualforce page.

Chat with Customers in Real Time

The CEO of Ursa Major Solar, Sita Nagappan-Alvarez, is looking for ways to expand her company’s customer support options and end the frustrating service circus for good. She knows that if she doesn’t respond to her customers’ mounting concerns, her company can’t grow.

In her research, she’s come across live web chat as a potential channel to offer on the Ursa Major Solar website. So, what is live web chat? Why is it important, and how can it be a useful tool for businesses?

It’s not news that customers expect to be able to contact a company through several different channels: email, social media, phone, web form, and more. They want quick and painless support.

Many customers already use live chat in their day-to-day interactions, which makes it an incredibly useful support tool for businesses like Ursa Major Solar. Plus, it gives customers that proactive, personalized TLC right where they need it: while they’re browsing through Ursa Major Solar’s website. Being there can make the difference between a happy customer who keeps coming back, and one who… well… doesn’t.

Sita also learns that the benefits of live chat reach further than nurturing loyal customers. Agents can handle multiple chats at once, which drives down support costs. Plus, her team can get instant feedback and respond proactively. Are customers struggling to find the warranty information? Or they don’t seem to understand the various charges on their bills? Sita can get this feedback and put a solution in motion long before a case makes its way through the pipeline.

This all sounds great to Sita. She’s tasked her systems admin, Maria Jimenez, with doing some poking around to see how it all works in Salesforce.

Web Chat as a Service Cloud Channel

As Maria looks into the Salesforce web chat options, she comes across a few possibilities and a whole suite of service channels. She sees live web chat, live chat for mobile, text messaging, video calls, social media, and then some. These channels help connect customers to support agents so they can get the help that they need, where and how they want it.

Web chat is one such channel. It’s made up of a few different parts in Salesforce.
  • Chat: the agent part. It gives your support agents the power of conversational messaging right in the console.
  • Omni-Channel: the delivery. It gets chat requests to the right agent.
  • Embedded Service: the customer part. It provides a chat window that’s optimized for mobile browsers, too, so customers have a great chat experience whether they’re on their desktop or mobile phone.

An illustration of the products that make web chat possible

These parts work together to give your customers and support team an awesome and productive chat experience. 

Based on Maria’s findings, she can see how web chat can be added to Ursa Major Solar’s service channels with little effort (or code!). She’s ready to set up a test implementation of web chat to see how it all works.

Set Up Web Chat

Maria is thrilled to find that there’s a guided setup flow that can set up web chat in just a few minutes. So, she heads to Service Setup and follows the Chat setup flow. This is how she does it.

  1. Log in to your organization, and if you’re in Salesforce Classic, switch to Lightning Experience.
  2. Click the Setup gear icon and select Service Setup.
    Where to find Service setup in Salesforce
  3. Under Recommended Setup, click View All.
    Service setup with the View All link highlighted
  4. Enter Chat in the search box and select Chat with Customers.
  5. Read the prompt to learn about what this flow sets up, then click Start.
    Informational start screen in the Chat setup flow
  6. Enter the queue name Chats and agent group name Chat Agents. Then select yourself as a member.
    Create a chat queue screen in the Chat setup flow
  7. Click Next.
  8. If you see the Prioritize Chats screen, enter the routing configuration name Chats and give it a priority of 1. (That means it’s the most important.) If you don’t see the Prioritize Chats screen, skip to step 10.
    Prioritize chats screen in the Chat setup flow
  9. Click Next.
  10. Leave the work item size and agent capacity at 5 and 20, respectively, then click Next.
    Agent workload screen in the Chat setup flow
  11. Enter https://* into the website URL field.
    Note: Check your URL. If you’re using http:// instead of https://, then enter http://*
  12. Create or select a Salesforce site. If you’re creating a site, ensure it is unique (suggested way to ensure it is unique, type your initials + today’s date MM/DD/YY).
  13. Check the box to indicate that you’ve read and accept the terms of use.
    URL and Salesforce Site screen in the Chat setup flow
  14. Click Next.
  15. Select Service for your chat type.
    Chat type selection screen in the Chat setup flow.
  16. Click Next.
  17. Click Next to skip setting up offline support. We’ll get to this in a later unit.
    The Offline Support screen in the Chat setup flow with offline support disabled.
  18. Click Next to skip the Grab your code snippet screen.
  19. Review what you just set up in the final screen. Everything is enabled in the out-of-the-box console app in your org.
    End screen of the Chat setup flow
  20. Click Done.

Create a Test Website

Now, Maria needs a website to paste the Embedded Service code snippet into. She decides to create a test website using a Visualforce page, so she can make sure that Sita and the Ursa Major Solar COO, Roberto Alvarez, approve before they go live on the Ursa Major Solar website.

Let’s join Maria in creating a test website using a Visualforce page.

  1. From Service Setup, enter Embedded Service Deployments in the Quick Find box and select Embedded Service Deployments.
  2. Click the down arrow next to Chat Agents and select View.
  3. Click Get Code in the Embedded Service Code Snippets section.
  4. In the Chat Code Snippet section, click Copy to Clipboard to copy the provided code snippet. Paste it somewhere safe. You need it shortly.
    Tip: Paste your code snippet into a plain text editor or HTML editor to make sure everything stays in the right format when you paste it into your Visualforce page later.
  5. Click Done.
  6. Enter Visualforce in the Quick Find box, then select Visualforce Pages.
  7. Click New.
  8. Enter the Label: Web Chat and the Name: Web_Chat, with the Description: A test website for using web chat.
  9. Replace the code in the page with the following code.
      <h1>Let’s start chatting...</h1>
      <br />
      Click the button to start a chat.
      <br />
      <!--Embedded Service Snippet-->
  10. Click in Line 6 after the words <!--Embedded Service Snippet--> and press enter to add a blank line before </apex:page>.
    New Visualforce Page with blank line.
  11. Paste your Embedded Service Code Snippet that you copied earlier to the blank line (between Line 6 and Line 8).
    Note: If you lost your code snippet somewhere along the way, have no fear—you can find it in Setup > Embedded Service Deployments. Then, view your deployment and click Get Code.
  12. Click Save.

Live web chat is ready to go. But before Maria jumps into the console to test it out, she wants to add a little more pizazz to really impress Sita and Roberto.

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • 1 in 4 land a new job
  • 50% receive a promotion or raise
  • 80% learn new technologies that boost their resume
  • 66% say it increases productivity
Source: Trailblazer Community Impact Survey 2019