How can I move the Virtual Agent (more specifically the agent chat) Widget in a service portal?

andrewwardr
Tera Contributor

‎05-10-2025 08:57 PM

I know how to move the virtual agent widget. You just go into the CSS of the widget record and mess with the positioning of the button container. However, I recently activated Agent chat with a Service Portal Agent Chat configuration record. Now there is another virtual agent widget on the screen as shown in the included picture. The one on the right is Agent Chat the one on left is virtual Agent. The reason I turned on agent chat because it is easy to style it straight from the theme page and you do not have to go to each page in a portal and individually add the widget like you would with regular virtual agent. However, I do not see it as a widget anywhere therefore I have no idea how I can change its position. Please help. VA example.png

0 Helpfuls
  • 388 Views
1 REPLY 1

connorlyons
Kilo Sage

‎05-11-2025 05:20 PM

Hi @andrewwardr,

 

When you enable Agent Chat, the chat interface is no longer managed by a portal widget like sn-va-web-client. Instead, it is injected via the Service Portal Agent Chat configuration, which is tied to the sn_agent_chat plugin and the Theme selected in your portal.

 

  1. Go to the Service Portal Theme used in your portal:
    • Navigate to Service Portal > Portals
    • Open your portal record (e.g., sp)
    • Note the Theme field (e.g., Default)
  2. Edit the Theme’s CSS:
    • Navigate to Service Portal > Themes
    • Open the theme used by your portal
    • In the CSS Variables or CSS Includes, add your custom CSS to override the default positioning.
  3. Use developer tools to inspect the element:
    • Open your portal in a browser
    • Use browser dev tools (Inspect) to find the HTML element representing the Agent Chat button (it will usually have classes like .sn-va-sidebar-button or similar)
    • Write a custom CSS rule to reposition it. For example:
    • .sn-va-sidebar-button {
      right: 30px !important;
      bottom: 80px !important;
      }
  4. Add the CSS in your theme: Under “CSS Includes” of the theme, either create a new CSS file or add the rule to an existing one Or, if using UI Scripts or Page Includes, add the style via <style> tags

If you’re still seeing two chat buttons, that means you likely have both the old virtual agent widget and the new agent chat enabled. You can remove the old widget from pages manually or disable it in the portal pages where it’s embedded.

 

Best,

Connor Lyons

Consultant at Infocenter

CSA | CAD | 15x CIS

LinkedIn

Please mark answer correct and/or helpful for others reading this with the same issue/question.

  1.  

 

0 Helpfuls