Increase the width of service portal virtual agent chat

[Pooja109]

Hi All,

I have a requirement to increase the width of virtual agent chat in portal.

Chat is configured via "Service Portal Agent Chat Configuration" this table

Is widget responsible for making the changes / do we have the configuration where we can adjust height and width of the chat in Washington D.C release

[Abbas_5]

Hello @Pooja109,

Please refer to the links below:
https://www.servicenow.com/community/now-platform-forum/increase-width-of-the-virtual-agent-chat/m-p...

https://www.servicenow.com/community/virtual-agent-nlu-articles/changing-the-service-portal-virtual-...

If it is helpful, please mark it as helpful and accept the correct solution. In future, it might be helpful for someone to refer to this solution.

Thanks & Regards,

Abbas Shaik

[PrashantLearnIT]

Hi @Pooja109 

Steps to Increase the Width and Adjust the Height of Virtual Agent Chat:

1. Verify the Widget Being Used for the Chat:

• The Virtual Agent Chat in the portal is typically rendered using a widget called sn-va-web-client.
• Navigate to Service Portal > Widgets in the navigation menu.
• Search for the widget named "sn-va-web-client" or a similarly named widget that manages the chat interface.

If the chat configuration is already mapped to a custom widget, you’ll modify that specific widget.

2. Modify the CSS of the Widget:

The width and height of the chat window can be controlled via custom CSS. To increase the width of the virtual agent chat interface, follow these steps:

1. Open the widget:

   • Go to Service Portal > Widgets, and open the "sn-va-web-client" widget (or the widget used by your portal).
   • Look at the CSS section of the widget.

2. Add custom CSS: You can add CSS to control the dimensions of the chat window. Here’s an example of CSS to increase the width of the chat window:

   css

   Copy code

   .sn-va-web-client { width: 500px !important; /* Set the desired width */ height: 600px !important; /* Set the desired height if needed */ } /* If you want to center the chat widget on the screen, you can add the following: */ .sn-va-web-client { position: fixed; right: 20px; bottom: 20px; }

• You can adjust the width (500px or any value based on your requirement) and the height accordingly.
• Save the changes to the widget.

3. Configuration Options via sp_agent_chat_configuration:

• While most of the design and UI is controlled by the widget, some configurations can also be done through the Service Portal Agent Chat Configuration table (sp_agent_chat_configuration).
• Navigate to Service Portal > Agent Chat Configuration.
• Look for any configuration related to Chat UI or layout in this table.

The sp_agent_chat_configuration table holds configurations for the chat, but adjusting height/width directly may not always be present there. It's important to inspect the widget first.

4. Test the Changes in the Portal:

• After updating the widget, navigate to the Service Portal and open the Virtual Agent Chat.
• Ensure that the new width and height settings are reflected properly.

[Pooja109]

Thank you all .

This worked 

.sp-ac-root  section.sp-ac-conversation

{ height: 800px; width: 800px; }