Increase the width of service portal virtual agent chat

Pooja109
Tera Contributor

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

3 REPLIES 3

Abbas_5
Tera Sage
Tera Sage

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
Giga Sage

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
    .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.

 

 

********************************************************************************************************
Please appreciate the efforts of community contributors by marking the appropriate response as the correct answer and helpful. This may help other community users to follow the correct solution in the future.

********************************************************************************************************
Cheers,
Prashant Kumar
ServiceNow Technical Architect


Community Profile LinkedIn YouTube Medium TopMate
********************************************************************************************************

Pooja109
Tera Contributor

Thank you all .

 

This worked 

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

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