Set Up Web Chat in Salesforce Omni-Channel : Bijay Kumar

Set Up Web Chat in Salesforce Omni-Channel
by: Bijay Kumar
blow post content copied from  SalesForce FAQs
click here to view original post


### Summary of Salesforce Omni-Channel Web Chat Setup Recently, a solution was implemented for an E-commerce client to improve their customer support by adding a web chat feature to their Salesforce Omni-Channel setup. Previously, customers had to send emails for post-sales queries, which led to delays in responses. The new chat feature allows customers to initiate conversations directly on the website, automatically creating cases and routing them to support agents. #### Key Steps to Set Up Web Chat in Salesforce Omni-Channel: 1. **Prerequisites**: Ensure Omni-Channel is already set up in your Salesforce organization. 2. **Create Chat Service**: Navigate to Service Setup and create a chat queue. 3. **Define Agent Workload**: Set the work item size and agent capacity to manage chat loads effectively. 4. **Link Chat with Cases**: Connect the chat service to the Service Cloud to manage cases. 5. **Create Visualforce Page**: Use the provided code to create an embedded chat on your website. 6. **Enhance UI**: Customize the chat interface by changing colors, fonts, and adding agent avatars. 7. **Add Pre-Chat Form**: Implement a form to collect user details before starting the chat, allowing agents to have context. 8. **Enable Offline Support**: Allow users to submit queries as cases when no agents are available. #### Additional Features: - **UI Customization**: Change the chat window's appearance to match branding. - **Agent Availability**: Ensure agents are online to accept chats; otherwise, users can fill out an offline support form. - **Case Management**: Agents can transfer cases and close chats once resolved. This setup enhances customer interaction, reduces response times, and improves overall service efficiency. ### Conclusion By implementing a web chat feature in Salesforce Omni-Channel, businesses can streamline their customer support processes, making it easier for customers to get assistance while providing agents with the necessary information to resolve issues promptly. ### Relevant Hashtags for SEO #Salesforce #OmniChannel #WebChat #CustomerSupport #Ecommerce #SalesforceTutorial #ChatSupport #UIEnhancement #PreChatForm #OfflineSupport #SalesforceSetup #CustomerExperience

Recently, we set up Omni-Channel for one of our E-commerce clients. They were using Omni-Channel primarily for queries raised after post-sales. To address small queries, such as “my order is delayed,” customers have to send an email that creates a case later.

In this setup, responses were delayed. The client wants to add a chat feature on their website that will automatically create cases and route them to agents in Omni-Channel.

As a solution for this, we set up the chat feature and routed it in the Salesforce Omni-Channel.

In this Salesforce tutorial, we will learn how to set up web chat in Salesforce Omni-Channel.

In addition to that, I will also explain how to enhance the chat UI and enable features like the PreChat form and offline support.

Set Up Web Chat in Salesforce Omni-Channel

The prerequisite to set up web chat in Omni-Channel is that you should have already set up Omni-Channel in your org, with presence status.

To set up live web chat in Salesforce Omni-Channel, we first need to set up the chat service in the Salesforce org. Then we will route that chat service to the Omni-Channel.

Navigate to the Service Setup and follow the steps below.

1. On the Service setup page, go to the section Recommended Setup and click on View All. In the next window, select the “Chat with Customers” option.

2. In this step, we will create a queue for the chat group. Here, enter the Label for the queue.

Then, according to the availability of the chat licenses, select the user for the chat queue and click Next.

3. In this step, define the agent’s chat workload by Work Item Size and Agent Capacity. Here, I have selected Work Item Size as 5 and Agent Capacity as 20. It means that the agent can handle four work items (20/5=4).

4. In this step, we need to enter the link to add the chat to the website. Enter the below URL and click Next.

https://*.force.com

5. In this step, we have to link the chat with the objects. In this setup, we will use chats to manage cases in the Service Cloud. To do this, select the ‘Service’ option to link chat with cases and contacts, and then click ‘Next’.

6. In this step, you will get a code that will help you create an embedded chat. From here, copy the code and click Next.
7. With this, we have completed the chat setup. At last, click on the Done button.

8. Now, we will create a Visualforce page using the code that we have copied. To create a Visualforce page, navigate to Setup> Quick Find > Visualforce Page> New.

Enter the Label for the Visualforce page, and enter the copied code inside the <apex:page> tag, and save the page.

When you click preview, it will look as shown in the image below. As of now, it will show that the Agent is offline in the preview.

9. Now, we need to enable the Omni-Channel status as available. Navigate to App Launcher > Service Channel> set the Omni-Channel status as online.

10. Go back to the Visualforce page preview and refresh it. Now, in the web chat, click the “Start Chatting” button.

11. As the user clicks on the button Start Chatting, the case will appear in the Omni-Channel.

The moment the support agent accepts the case, the conversation between the agent and the user will start. Till then, it will display, waiting for an agent.

As the chat starts, the user can enter text in the chat and send it.

The first message from the user will be created as the title of the chat. In the Conversation tab, the agent can chat with the user.

Here, the agent can also transfer the case to another available user. When the user’s query is resolved, the agent can close the chat using the End Chat button.

This way, we can set up web chat in Salesforce Omni-Channel to assign work to the agents.

Check out: Set Up Secondary Routing Priority in Salesforce Omni-Channel

Enhance the Web Chat UI With Branding

By default, you will see the chat UI in violet colour. We can change the UI colour and also add an avatar image for the agent. In the chat window, the header can also be modified.

To do the above changes in the chat window, follow the steps below.

1. Navigate to the Setup page of Salesforce Lightning. In the quick find, search, then select Embedded Service Deployments.

2. In the “ Embedded Service Deployments” setup, you will see the queue or group name that we created during the chat setup. Click on it to open in the View mode.
3. To make the changes in the UI color, go to the Branding section and click Edit.

3. In the edit window, we can change the color of the header and chat messages through the Primary and Secondary brand colors. We can also view the changes in the chat tab on the right side of the screen.

We can also change the chat fonts from the available options in the Fonts dropdown. After making the changes, click Save.

To enhance the UI further, like adding an avatar image for support, we need to customize the additional settings.

Before that, we need to upload the image to the static resource, which can be used later for the Agent and the Logo.

4. To create a Static resource, navigate to Setup > Static Resource > New. Enter the Name, upload the image, set it to public, and click Save.

5. After creating the static resource, click on View file in the static resource details. In the view mode, you will see the uploaded image. Here, copy the URL of the resource.

6. Now, go to the setup of the Case Support chat group and click on ‘Edit‘ in Chat Settings.

In the Chat Settings, navigate to the Additional Branding section and click Edit.

7. In the Images section, go to the Avatar input field and paste the copied URL of the static resource. I have repeated the same steps to add the Logo in the chat tab.

Here, we can also change the chat tab dimensions and base font size to small, medium, or large.

At last, click on the Finish button.

The changes we have made will not be reflected directly in the chat window. To deploy the changes, we need to update the code of the Visualforce page that we have created.

Check out: Skills-Based Routing Using Apex in Salesforce Omni-Channel

8. To get the updated code, with the changes in the UI, go to the Embedded Service Deployments> open the created chat group. In the section Embedded Service Code Snippets, click on the Get Code button.

9. Here, you will see the updated code after the changes. Copy the available code.

10. Navigate to the Visualforce page and replace the entire code inside the <apex:page> tag, then save the changes.

After updating the code, open the Visualforce page in preview mode. Start the chat, and you will see the updated changes in UI color, fonts, chat tab logo, and the agent’s avatar image.

This way, we can enhance the UI of the web chat feature in Salesforce. Ensure that, after making changes in UI, update the website page with the newly generated code from the Chat code snippet.

Check out: Salesforce Omni Channel Skill Based Routing Via Flow

Add Pre Chat Form in Live Web Chat

In the Chat window, the user can only see the button to start the conversation. On button click, a case is created, which is accepted by the available agent on the Omni-Channel.

In this setup, the support agent does not initially receive the case details, such as the username and issue.

To get the user details, we can add a pre-chat form in the live web chat by following the steps below.

1. Navigate to Setup > Embedded Service Deployments, then select the web chat group.

2. Click on the Edit button in the Chat Settings. In the next window, enable the Pre-Chat page.

To add or remove fields in the Pre-chat form, click on the Edit button.

3. In the pre-chat form, we can remove the non-required fields. To add fields, click on the ‘+‘ icon and then select the object field.

At last, click on the Save button.

4. To update the change on the web page, we need to update the code on the Visualforce page.

To obtain the updated code, navigate to Embedded Service Deployments> select the Web Chat group. In the section Embedded Service Code Snippets, click Get Code.

5. Copy the updated code from the code snippet.

6. Navigate to the Visualforce page, and enter the copied code inside the <apex:page> tag and save the changes.

After this, open the Visualforce page in Preview mode.

In the preview, as we click on the Start Chat button, a form will appear with the input fields of the Contact and Case objects. Here, enter the details and click on the button “Start Chatting“.

7. On the other end of the Omni-Channel, the agent will be able to see case details, such as the contact’s name, case subject, type, and priority.

With this, the case will be picked by the right agent who has the skills according to the case issue.

This way, we can enable the pre-chat form in the Salesforce Omni-Channel chat feature.

Check out: Status Based Capacity Model in Salesforce Omni Channel

Enable Offline Support in Omni-Channel Web Chat

Another feature we offer in live web chat is “Offline Support”, which allows users to create a query as a case when no agent is available.

This won’t route the case to the agent in the Omni-Channel; instead, it will create a Case record. To enable offline support in Omni-Channel web chat, follow the steps below.

1. Navigate to Setup > Embedded Service Deployments, then select the web chat group.

2. Go to the Chat Settings section and click Edit.
3. In the Chat Settings, go to the section Offline Support and first click Enable on “Customer Community”. After this, enable the Offline Support.

4. The offline support will also have a form, such as a pre-chat form. To add or remove fields in the offline support form, click Edit.

In the next window, remove or add the fields that you need in the offline support form to create a case.

At last, click on the Finish button.

5. Every time we make changes in the chat setup, we need to update the code on the website page.

To get the updated code again, navigate to Embedded Service Deployments> select the Web Chat group. In the section Embedded Service Code Snippets, click Get Code.

6. Copy the code from the Chat code snippet.
7. Navigate to the Visualforce page, and enter the copied code inside the <apex:page> tag and save it.

After updating the code, open the Visualforce page in Preview mode.

Here, I have set the Omni-Channel presence status to Offline. In offline status, the web chat will display the offline support form.

As we enter the details and submit the form, it will create a record in the case object.

This way, we can handle cases and queries in through Offline support.

Check out: Setup Skill Based Routing in Salesforce Omni Channel

Conclusion

In this Salesforce tutorial, we have learned how to set up live web chat in Salesforce Omni-Channel to help support teams get queries through chat. After setting up chat, we also learned to enhance the UI of the chat window by changing colour, fonts, and adding an avatar image for the agent.

Additionally, we have implemented a pre-chat form that provides the agent with extra information about the case when it is created. For situations when agents are offline, we have created an offline support form that allows users to directly create a case.

The post Set Up Web Chat in Salesforce Omni-Channel appeared first on SalesForce FAQs.

June 20, 2025 at 07:25PM
Click here for more details...

=============================
The original post is available in SalesForce FAQs by Bijay Kumar
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================