Start tracking your progress
Trailhead Home
Trailhead Home

Get Started with Web Chat

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

Attention, Trailblazer!

Salesforce has two different desktop user interfaces: Lightning Experience and Salesforce Classic. This module is designed for Lightning Experience.

You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe the benefits of live web chat.
  • Describe what a snap-in 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.
  • Live Agent: 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.
  • Snap-ins Chat: 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 Live Agent 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 Live Agent in the search box and select Live Agent Setup.
  5. Read the prompt to learn about what this flow sets up, then click Start.
    Informational start screen in the Live Agent 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 Live Agent 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 Live Agent 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 Live Agent setup flow
  11. Enter https://*.force.com into the website URL field.
    Note

    Note

    Check your URL. If you’re using http:// instead of https://, then enter http://*.force.com.

  12. Create or select a Salesforce site. If you’re creating a site, check the box to indicate that you’ve read and accept the terms of use.
    URL and Salesforce Site screen in the Live Agent setup flow
  13. Click Next.
  14. Select Service for your chat type.
    Chat type selection screen in the Live Agent setup flow.
  15. Click Next.
  16. Click Next to skip setting up offline support. We’ll get to this in a later unit.
    The Offline Support screen in the Live Agent setup flow with offline support disabled.
  17. Click Copy to Clipboard to copy the provided code snippet, then paste it somewhere safe. You need it shortly.
    Tip

    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.

    Snap-ins code snippet in the Live Agent setup flow
  18. Click Next.
  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 Live Agent setup flow
  20. Click Finish.

Create a Test Website

Now, Maria needs a website to paste the Snap-ins 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. Switch from Service Setup to Setup using the gear icon.
  2. Enter Visualforce in the Quick Find box, then select Visualforce Pages.
  3. Click New.
  4. Enter the label Web Chat and the Name Web_Chat, with the description A test website for using web chat.
  5. Replace the code in the page with the following code.
    <apex:page>
      <h1>Let’s start chatting...</h1>
      <br />
      Click the button to start a chat.
      <br />
      <!--Snap-ins Code Snippet-->
    </apex:page>
    
  6. Paste your Snap-ins code snippet below the provided code comment. If you want to remember where the snippet starts, you can leave the code comment in the code.
    The provided code snippet with the Snap-ins code snippet in the Visualforce page editor
    Note

    Note

    If you lost your code snippet somewhere along the way, have no fear—you can find it in Snap-ins setup. Enter Snap-ins in the Quick Find box and select Snap-ins. Then, view your deployment and click Get Code.

  7. 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.

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