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.

Activate the Setup button menu and select Service Setup.
Under the Recommended Setup heading, activate the View All button.
Activate the link called Chat with Customers.
Activate the Start button.
For Queue Name enter Ursa Major Solar Chat.
In the Name This Group field, enter Chat Agent.
In the table of users, check the checkboxes next to Ada Balewa and your name. You may need to activate the checkboxes twice in order to mark them as checked. Activate the Next button.
If you see a page that says "Prioritize chats with your other work" type 1 in the Priority field next to your Ursa Major Solar Chat queue and activate the Next button.
Leave the defaults for the Work Item Size field and Agent Capacity field.
Activate the Next button.
Enter https://*.force.com for the Website URL. For the Salesforce Site Domain field, type your initials + today's date (MM/DD/YY).
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.
If you see the Salesforce Terms of Use checkbox, select the I have read and accept the Salesforce site Terms of Use box, then activate the Next button.
Otherwise, click Next.
On the What's your type screen, select the radio button for Service, and activate the Next button.
Enable the checkbox for offline support.
Next, we have a table of fields. Select the Subject Required checkbox, then activate the Next button.
Do not copy the code from this Chat Code Snippet box, just activate the Next button.
Activate the Done button.

Copy the Embedded Service Code Snippet

From Service Setup, enter Embedded Service Deployments in the Setup search box near the top of the page and select the result for Embedded Service Deployments.
In the table, locate the row for Chat Agent. There is a Show Actions button menu at the end of that row. Press ENTER on it and select View from the menu.
Note: Screen reader users may find that the menu dismisses whenever you attempt to make a selection. if this is the case, follow these steps:
NVDA users should:
- Bring up the menu, perform the “move mouse to navigator object” command, then arrow through the menu and select View.
Jaws users should:
- Ensure the window is maximized and bring up the menu
- Switch to the JAWS cursor. Place focus on the letter D in the word Delete on the page.
- Next, route JAWS cursor to PC cursor.
- Finally, switch back to the PC cursor and arrow through the menu to select View.
Activate the Get Code button under the Embedded Service Code Snippets heading.
In the Chat Code Snippet section, activate the button called 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.
Activate the Done button.

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.

If you're not already there, activate the Setup button menu and select Service Setup.
Enter App Manager in the search box near the top of the page, and select the result for App Manager.
In the table of apps, find the row for Ursa Major Solar's Service Console. Activate the Show Actions button at the end of the row and select Edit from the menu.
Press ENTER on the Utility Items link.
Activate the Add Utility Item button and select Omni-Channel.
Activate the Save button. Then, activate the Back link at the top of the page to go back. This link may appear as Void0 for NVDA users.
Activate the App Launcher button and select Ursa Major Solar Service Console.
At the bottom of the page, activate the button for Omni-Channel.
Activate the Change Omni Channel Status button and select Available - Chat as your status.

Get an Inside View with Omni Supervisor

Activate the Setup button and select Setup.
Enter Supervisor in the search box near the top of the page, and select the result for Supervisor Settings.
Enable all four checkbox options under the Conversation Monitoring heading:
- Conversation monitoring
- Agent sneak peek
- Customer sneak peek
- Whisper messaging
Activate the Save button.
Activate the App Launcher button. Search for and select Ursa Major Solar Service Console.
Activate the Show Navigation Menu button and press TAB. You'll find an Edit button. Press ENTER.
Activate the Add More Items button.
Find the search field. NVDA users can just TAB from here to find a series of options. JAWS users should turn virtual cursor off and begin tabbing through the list of options. Find the checkbox for Omni Supervisor and select it. Then, TAB to the Add 1 Nav Item button and press ENTER.
Activate the Save button.
Activate the Show Navigation Menu button and choose Omni Supervisor.
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.

Screen reader users must switch to the Firefox browser in order to see the Visualforce code editor and follow along with this section. This is a bug with Chromium-based browsers. If you don't wish to switch to Firefox and test it all out, feel free to skip this section. You can actually stop here and verify this step in Trailhead to complete the badge! The below information is provided in case you'd like to test out what you did and see it in action.

Activate the Setup button and select Setup.
Enter Visualforce in the Setup search box at the top , and select the result for Visualforce Pages.
Activate the New button.
For Label, enter Web Chat.
For Name, enter Web_Chat.
For description, enter Ursa Major Solar's test website for using web chat.
Exit the form. Use the F quick nav key to jump between form fields. You will enter a field with no label. Select all and delete everything from that field. This is the code editor.
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>
In the code, replace the text [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.
Activate the Save button.

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 Setup search box, and select the result for Embedded Service. Then, view your deployment and activate the Get Code button.

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.

From Setup, enter CORS in the Setup search box at the top, and select the result for CORS | Security.
Activate the New button.
In the edit field for URL Origin, enter https://*.vf.force.com
Activate the Save button.

Test, Test, Test!

Activate the App Launcher button and select Ursa Major Solar Service Console.
Next, activate the Setup button menu and select Setup, which opens another browser tab.
Enter Visualforce in the Setup search box, and select Visualforce Pages.
In the table listing the Visualforce pages, find the row for Web Chat page. Up arrow and press ENTER on Preview Web Chat in new Window to open it in a new tab or window.
If you pasted in your code snippet correctly, you can continue to test. Look for the snap-in button (chat button) at the bottom of the page to request a chat.
In the First Name field enter Jack.
In the Last Name field enter Rogers.
Press ENTER on Start Chatting.
Go back to your other tab/window displaying the Ursa Major Solar Service Console.
Accept the chat request in the Omni-Channel utility.
Chat back and forth to test.
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

Click to return to the unit on Trailhead to verify this step.

Set Up Web Chats for Your Console | Trailhead Screen Reader Instructions