Replace OOTB Virtual Agent widget for a custom one.

[AlexSastre]

Hi,

I was checking my portal and I want to know where I can replace the Virtual Agent widget that appears in the Employee Center for a custom one that I have created.

I didn't see any relation or any mention the ootb widget when I was checking the Portal Configuration and the Header and Footer records of the Theme.

Anyone knows where it can be replaced?

Thanks in advance

[angelkirilov]

Hi, I provide some additional details:

The name of the widget to clone is "sn-na-agent-dialog". 

The objective is to include the widget "sn-va-sp-widget" in "sn-na-agent-dialog", and display one on another in the portal depending on the user role.

Unfortunately it seems that it is not possible to find where this widget is included in ServiceNow, and where to change it.

Does anyone know if this is feasible?

Thanks

[Terry_Yeti]

I ran your question about replacing the OOTB Virtual Agent widget with a custom one through snowcoder ai.

This is definitely doable, and there are a few approaches depending on how much customization you need:

**Option 1: Clone and Modify the OOTB Widget**

The cleanest approach is to clone the existing `chatbot-analytics-center` or `va-web-client` widget (depending on your version) and customize it:

1. Navigate to **Service Portal > Widgets**
2. Find the Virtual Agent widget (search for "chatbot" or "va-web")
3. Right-click and select **Insert and Stay** to clone it
4. Rename your cloned widget and make your customizations
5. Update your portal page to use your custom widget instead

**Option 2: Create a Fully Custom Widget**

If you need deeper integration, you can build a custom widget that interfaces with the VA APIs. You'll want to leverage the existing Script Includes like `VACommonPickerAdapter` for handling channel-specific card rendering, which transforms picker/card responses into the proper format:

```javascript
// In your widget server script, you can use existing VA utilities
var adapter = new VACommonPickerAdapter(channel);
var result = adapter.transform();
```

**Key Considerations:**

- Make sure your custom widget handles all the card types (Notification, Info Cards, Video Cards) that the OOTB widget supports
- Test thoroughly with different conversation flows - the VA has specific rendering requirements for pickers and cards
- If you're using analytics, ensure your custom widget still fires the appropriate events so `VADashboardUtils` can capture conversation data

**Option 3: CSS/Angular Overrides**

For purely visual changes, you might not need a full replacement. You can use the portal's CSS includes or Angular providers to override styling and behavior.

What specific functionality are you looking to change or add? That would help narrow down the best approach for your use case.

_______________________________________
I used snowcoder ai to generate this. If you need to tweak the requirements, you can run it through their Yeti AI for free.

[AlexSastre · Accepted solution]

We have created a new custom widget and we have updated its ID with the Now Assist for Virtual Agent widget (sn-na-agent-dialog). Before that you have to update the OOTB widget ID because ServiceNow doesn't allow to have two widgets with the same ID.

Then we have prepared our custom widget using ng-show to establish when normal Virtual Agent should appear or when NAVA should appear:

<div>
<div ng-show="{{data.has_role}}">
 <!-- NAVA OOTB widget body -- >
</div>
</div>
<div ng-show="{{!data.has_role}}">
 <!-- VA OOTB widget body -- >
 </div>

And with that is working. We are investigating how to do it without changing the OOTB widget but for now it's a solution.