Deploy the Messaging Connection to a Website

Learning Objectives

After completing this unit, you’ll be able to:

Create an Enhanced Web Chat channel and pre-chat form.
Publish an embedded service deployment.
Create and publish an Experience Cloud site with embedded messaging.
Configure the CORS allowlist.

Put the Agent Where Customers Are

Warren has set up the messaging connection for the Northern Trail Outfitters (NTO) service agent, but no one can interact with the agent yet. Warren's next task is to give people a front door: a chat window right on NTO's Help Center website. When a customer clicks it, the inbound flow from the previous unit takes over and connects them to the agent.

To get there, Warren assembles four pieces.

An Enhanced Web Chat channel
A pre-chat form
An embedded service deployment
An Experience Cloud site to host it

Create an Enhanced Web Chat Channel

Enhanced Web Chat is a type of channel that lets you create a personalized messaging experience for a website, built on Enhanced Chat v2 (ECv1). Warren creates the channel and connects it to the inbound Omni-Channel routing. In a later step, Warren will create an Experience Cloud site and embed the channel in it.

From Setup, in the Quick Find box, enter Messaging, and then select Messaging Settings.
Click New Channel.
In the Add a Messaging Channel window, click Start.
For the channel type, select Enhanced Chat.
In the Name Your Channel window, define the channel’s settings.
1. For the channel name, enter Help Center Chat.
2. For the deployment type, select Web.
3. For the domain, copy and paste the Experience Cloud Sites Domain on the Domains Setup page.
In the Channel Routing window, specify the channel’s routing.
1. For the routing type, select Omni-Flow.
2. For the flow definition, select the Route Messaging Session to Agent outbound Omni-Channel flow.
3. For the fallback queue, select Messaging.
4. Agree to the terms. Then, click Save and keep the window open while your channel is being built.
In the Customer Inactivity section, select Automatically mark conversations inactive after a period of customer inactivity.
Save your changes.
From Setup, select Messaging Settings again. Then, click the name of your messaging channel.
In the Messaging Settings section, select Identify preferred language of messaging users.
In the Parameter Mappings section, create these mappings. They connect the pre-chat form fields you create later to the flow variables in your inbound omni-channel flow.
1. Parameter: First Name maps to Flow Variable Name: firstName
2. Parameter: Last Name maps to Flow Variable Name: lastName
3. Parameter: Email maps to Flow Variable Name: email

Publish and Test the Embedded Service Deployment

When Warren created the messaging channel, Salesforce created an embedded service deployment that helps manage the user experience of the messaging channel.

Warren’s next step is to add a pre-chat form to the embedded service deployment. A pre-chat form collects a few details before the conversation starts, such as the customer's name and email, so the agent starts with some context. Warren can configure the form fields and map each one to the right Salesforce field with parameter mappings, so a returning customer's information links to their existing record.

From Setup, in the Quick Find box, enter Embedded, and then select Embedded Service Deployments.
Click the Help_Center_Chat deployment.
Edit and activate the deployment’s pre-chat form.
1. Click Edit Pre-Chat on the Pre-Chat tile.
2. On the Pre-Chat Form page, select Activate the pre-chat feature.
3. In the Visible Pre-Chat fields section of the page, add a First Name, Last Name, and Email field. Mark Email and Last Name as required. Then, click Save.
On the Help Center Chat deployment page, click Publish.
To test your messaging deployment, click Test Messaging on the Test Messaging tile. You see a page with a chat button.
To start a conversation, click the chat button. Enter the contact information for an existing contact and then click Start Conversation. If you completed the steps so far successfully, your agent joins the conversation and responds to the messages you send.

Now that Warren has successfully tested the embedded service deployment, he can create an Experience Cloud site to test drive the agent’s full functionality.

Create an Experience Cloud Site

To test the agent’s full functionality, such as its ability to escalate and manage cases, Warren publishes it on an Experience Cloud site. To get a site up-and-running quickly, he’ll use the Help center template.

From Setup, in the Quick Find box, enter All Sites, and then select All Sites.
Click New. Then, select the Help Center template.
Click Get Started.
For the help center name, enter NTO Help Center.
For the help center URL, enter help.

Customize and Publish the Experience Cloud Site

Next, Warren drops the Embedded Messaging component right onto the NTO Help Center site. He also makes sure to add the site to the CORS allowlist so Salesforce knows it can trust calls coming from the help site. If you skip this step, the chat window won't load at all, and there’s no obvious error message to explain why.

In Experience Builder, click the Components tab.
If you already have the Embedded Messaging component on the page, go to the next step. If not, on the Components panel, select the Embedded Messaging component and drag it onto the template footer.
When you’re ready, click Publish.
Confirm that your Experience Builder site domain is in your CORS allowlist. If you notice an issue with the *.live-preview domain, add it to the CORS allowlist as well.
1. From Setup, in the Quick Find box, enter Digital Experiences, and then select Settings. Copy or take note of the default domain name in the Domain Name section.
2. From Setup, in the Quick Find box, enter CORS, and then select CORS.
3. If you already have the default domain name in the Allowed Origin List, go to the next step. If not, select New and then enter the default domain name URL. Add https:// to the beginning of the URL and then click Save.

Test the Agent on the Website

Now it’s time for Warren to verify that all the parts of NTO’s messaging deployment are set up correctly. He’ll make note of areas where he can improve and iterate on the deployment, such as further customizing the escalation experience or Service Console app.

On the All Sites Setup page, open the Experience Cloud site by clicking the URL.
To start a conversation, click the chat button.
Enter the contact information of an existing contact and then click Start Conversation.
Test the escalation process when there are no service reps available.
1. In the chat window on the Experience Cloud site, ask the agent to transfer you to a human.
2. Confirm that the agent tells you there are no service reps available and oﬀers to create a case.
3. After the agent tells you it created the case, confirm that the new case exists in Salesforce.
Test the escalation process when there's at least one service rep available.
1. End the chat and start a new one.
2. In a diﬀerent browser tab, open the Service Console app.
3. From the sidebar, select Omni-Channel and then change your status to Online.
4. In the chat window on the Experience Cloud site, ask the agent to transfer you to a human.
5. In the Omni-Channel sidebar, accept the chat request. Then, click the request to open the messaging session record. Send a message and then confirm that it is sent in the Experience Cloud site chat window.

With the chat window loading and the inbound flow routing the conversation, NTO's service agent is officially working on the web! Next, Warren tackles a different channel: the phone.

Tempo estimado

Tópicos

Procurando ajuda?

Agentforce Recursos