Increase the size of start and end conversation icons in a virtual agent chatbot.

[Mithrans8777377]

It is possible to increase the size of the start conversation,  end conversation icon and support icon

I attempted to use the default branding icon section to replace the existing image with a larger version, but the icon size remained unchanged

[Ankur Bawiskar]

@Mithrans8777377 

see if this link helps

Changing the Service Portal Virtual Agent widget CSS properties (height, width, icon, etcetera) 

If my response helped please mark it correct and close the thread so that it benefits future readers.

[subingeorge]

ServiceNow Virtual Agent web client allows customization via:

• Branding Editor (basic image swaps, color)

• Custom CSS (advanced control — needed in your case)

---

2. Steps to Increase Icon Size via Custom CSS

A. Locate the Widget or Branding Configuration

• Navigate to:
  Virtual Agent > Branding > Web Client Branding

• Open the active branding record.

 B. Add Custom CSS

Use the Custom CSS section at the bottom to override icon dimensions. Here’s an example:

css

CopyEdit

/* Start Conversation Button */ .va-launcher__button img { width: 48px !important; height: 48px !important; } /* End Conversation Icon */ .va-end-chat__icon, .va-end-chat__icon img { width: 32px !important; height: 32px !important; } /* Support/Help Icon */ .va-help-button, .va-help-button img { width: 40px !important; height: 40px !important; }

⚠️ Adjust pixel sizes (px) to your needs. The !important ensures that your styles override defaults.

---

 3. Publish and Test

1. Save the branding changes.

2. Rebuild or refresh the Virtual Agent web client.

3. Test in incognito or clear cache to ensure the CSS loads freshly.

---

🛠 Optional – Override in Service Portal

If you're running Virtual Agent via Service Portal, go to:

• Service Portal > Portals > Your Portal > Theme

• Add the above CSS to the CSS Include or inject it using a UI script/widget if needed.

[MithranS]

 I tried adapting the example CSS for the Virtual Agent Web Client in the Service Portal, but it didn’t work. I also tried using  .sn-connect-launcher-button based on what I found through browser inspection, but that didn’t change the icon size either. I added the CSS in both the branding settings and the portal theme, but there was no visible effect. If anyone has working CSS specifically for the Service Portal setup, it would be a big help.

[subingeorge]

Here’s a working solution to customize the Virtual Agent launcher icon size in Service Portal, assuming you're using the out-of-box Virtual Agent widget (sn-va-web-client) or a customized version embedded in a Service Portal page.

Step-by-Step Solution:

---

1. Inspect the DOM

Open the Service Portal page with the Virtual Agent and use browser dev tools (F12) to inspect the launcher button.

Typically, the launcher button has a class like:

html

CopyEdit

.sn-connect-launcher-button

But it may be nested within shadow DOM. To ensure you apply the styles correctly, use attribute selectors or ::part if shadow DOM is in use.

---

2. Add Custom CSS in Portal Theme

Navigate to:
Service Portal > Portals > Your Portal > Theme > CSS Includes
Or add a UI Script if you prefer JS-based injection.

Here’s working CSS you can start with:

css

CopyEdit

/* Customize Virtual Agent Launcher Button in Service Portal */ .sn-connect-launcher-button { width: 60px !important; height: 60px !important; bottom: 40px !important; /* reposition if needed */ right: 40px !important; } /* Target the image/icon inside the launcher button */ .sn-connect-launcher-button img { width: 60px !important; height: 60px !important; } /* If using SVG or different structure */ .sn-connect-launcher-button svg { width: 60px !important; height: 60px !important; }

---

3. Clear Cache and Test

• Save the changes

• Clear Service Portal cache: use /cache.do

• Hard refresh the browser (Ctrl+Shift+R) or open in incognito

---

Optional Debugging Tips

• If .sn-connect-launcher-button is not taking effect, try wrapping your CSS in a more specific selector like:

css

CopyEdit

body .sn-connect-launcher-button { ... }

• If the widget is wrapped in an iframe or shadow DOM, standard CSS won’t apply directly. You may need to customize the widget itself or inject styling via JavaScript.