Set Up Web Chats for Your Console

Follow Along with Trail Together

Want to follow along with an expert as you work through this step? Take a look at this video, part of the Trail Together series.

(This clip starts at the 25:08 minute mark, in case you want to rewind and watch the beginning of the step again.)

Accessibility

This unit requires some additional instructions for screen reader users. To access a detailed screen reader version of this unit, click the link below:

Open Trailhead screen reader instructions.

Introduction

To further raise the level of Ursa Major Solar’s customer service, Ada would like her team to be able to chat with customers directly from the company’s website. Make this happen for her by setting up Chat with a Guided Setup Flow. Chat provides another channel for customers to access the customer support team—and get their questions answered and problems solved on the spot. 

Start by creating a chat queue, then select your chat agents, and get the snap-ins code snippet to add chat to your website, all through one setup flow.

1. Click the gear icon and select Service Setup.
2. Under Recommended Setup click View All.
3. Click Chat with Customers.
4. Click Start.
5. For Queue Name enter Ursa Major Solar Chat.
6. In the Name This Group, enter Chat Agent.
7. Click the checkbox next to Ada Balewa and next to your name in the list of users, and click Next.
8. If you see a page that says "Prioritize chats with your other work" type 1 in the Priority box next to your Ursa Major Solar Chat queue and click Next.
9. Leave the defaults for the Work Item Size field and Agent Capacity field.
10. Click Next.
11. Enter https://*.force.com for the Website URL. For the Salesforce Site Domain field, type your initials + today’s date (MMDDYY).
    Note: if you've already set up Chat in another project, you will not see this option, and you can move to the next step.
12. If you see the Salesforce Terms of Use checkbox, select the I have read and accept the Salesforce site Terms of Use box, then click Next.
13. Otherwise, click Next.
14. On the What's your type screen, select Service, and click Next.
15. Turn Offline support on, select the Required box next to the case record and subject field, and click Next.
16. Do not copy the code from this Chat Code Snippet box, just click Next.
17. Click Done.

Copy the Embedded Service Code Snippet

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 Agent 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'll 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. Close the Embedded Service Code Snippets window.

Add the Omni-Channel Utility

The Omni-Channel utility lets your Lightning console users receive work requests routed through Omni-Channel. Now that you have everything in place for your Omni-Channel utility, add it to the Ursa Major Solar Service Console so Ada and her team can access it.

1. If you’re not already there, click the gear icon and select Service Setup.
2. Enter App Manager in the Quick Find box, and select App Manager.
3. Click the dropdown next to Ursa Major Solar’s Service Console, and select Edit.
4. Click Utility Items from the menu on the left side of the screen.
5. Click the Add Utility Item button and select Omni-Channel.
6. Click Save, then click .
7. Click the App Launcher and select Ursa Major Solar Service Console.
8. Click Omni-Channel from the utility bar at the bottom of the console.
9. Click the dropdown next to Offline, and select Available - Chat as your status.

Get an Inside View with Omni Supervisor

1. Click the gear icon and select Setup.
2. Enter Supervisor in the Quick Find box, and select Supervisor Settings.
3. Enable all four options under the Conversation Monitoring section:
   • Conversation monitoring
   • Agent sneak peek
   • Customer sneak peek
   • Whisper messaging
4. Select Save.
5. Click the App Launcher and select Ursa Major Solar Service Console.
6. Click the dropdown next to the object (Accounts, Cases, etc.) at the top of the console, and click Edit.
7. Click Add More Items.
8. Click the plus next to Omni Supervisor, and click the Add 1 Nav Item button.
9. Click Save.
10. Choose Omni Supervisor from the Navigation Items dropdown in the Console.
11. Note all the features available to managers when viewing Omni-Channel support information, divided up into three tabs: Agents, Queues Backlog, and Assigned Work.

Set Yourself Up to Test

Congratulations! You have your console set up for omni-channel support. Test the web chat by experiencing what a live chat session is like from Ada’s perspective and from a customer’s perspective.

Note: In order to test the web chat, you use Visualforce pages and your snap-ins code. The steps you take are specific to the testing stage of this project and may differ in real-life implementations.

1. Click the gear icon and select Service Setup.
2. Enter Visualforce in the Quick Find box, and select Visualforce Pages.
3. Click New.
4. For Label, enter Web Chat.
5. For Name, enter Web_Chat.
6. For description, enter Ursa Major Solar’s test website for using web chat.
7. Replace the existing code with the following code:
   
   <apex:page>
 <h1>Let’s start chatting...</h1>
 <br />
 Click the button to start a chat.
 <br />
 [PASTE YOUR SNAP-INS CODE SNIPPET HERE]
</apex:page>
   
   
8. Replace [PASTE YOUR SNAP-INS CODE SNIPPET HERE] with the snap-ins code snippet you saved earlier. If you want to remember where the snippet starts, you can leave the code comment in the code.
9. Click Save.

If you lost your code snippet somewhere along the way, don’t worry—you can find it in snap-ins setup. Enter Embedded Service in the Quick Find box, and select Embedded Service. Then, view your deployment and click Get Code.

Allowlist Your Visualforce Page URL

Allowlisting your Visualforce page URL allows web browsers to access resources from origins other than their own. That way Ursa Major Solar can easily allow customers to access snap-in chats. Use CORS to set this up for Ursa Major Solar’s page.

1. Enter CORS in the Quick Find box, and select CORS.
2. Click the New button.
3. Enter https://*.vf.force.com
4. Click Save.

Test, Test, Test!

1. Click the App Launcher and select Ursa Major Solar Service Console.
2. Click the gear icon and select Service Setup, which opens another browser tab.
3. Enter Visualforce in the Quick Find box, and select Visualforce Pages.
4. Click  next to the Web Chat page to open it in a new tab or window.
5. Click the snap-in button (chat button) at the bottom of the page to request a chat.
6. In the First Name field enter Jack.
7. In the Last Name field enter Rogers.
8. Click Start Chatting.
9. Go back to your other tab/window displaying the Ursa Major Solar Service Console.
10. Accept the chat request in the Omni-Channel utility by clicking the check mark.
11. Chat back and forth to test.
12. End the chat from either the agent or the customer chat window.

Congratulations! You’ve set up Ursa Major Solar’s Service Console to help Ada Balewa and her team optimize their case management experience. You created and customized Ursa Major Solar’s service console, added utility items, and enabled access for Ada and her team. They’re ready to handle any case that comes their way, through any channel.

Resources

• Salesforce Help: Live Agent Setup
• Salesforce Help: Chat on Your Website With Live Agent
• Salesforce Help: Set Up Omni-Channel Routing for Chats
• Salesforce Help: Omni-Channel Supervisor