Widgets

Contact Center AI allows you to integrate external systems and pages into the Agent Console. Agents can use widgets from within custom Agent Console Layouts.

Note

For widgets to load properly within the agent console, you may need to set up permissions to to access the application or page you want to integrate.

Add a Widget

Steps to add an external widget:

1. Go to Contact Center AI > CONFIGURATIONS > Widgets.

2. Click External Widget.
   

3. The External Widgets window opens. Click + New External Widget.

4. The Add Widget window opens, and you can configure the following:

   1. The Widget Name by which to identify it later.
   2. Select the checkbox to load the custom widget independently without a conversation.
   3. The Widget Icon. Click the section to upload a file, or use drag-and-drop.
      

5. If you want to remove an icon, click the Delete button on the right side. You can re-upload an icon afterward as needed.

6. Use this field to define the URL of the system or webpage that you want to embed as a widget. You can enter a static URL or configure a dynamic URL that resolves values at runtime.

   You can insert variables from the {} Variable drop-down. The system supports the following variables:

   • Agent Id
   • Agent First Name
   • Agent Last Name
   • Customer Email Id
   • Customer First Name
   • Customer Last Name
   • Customer Phone Number
   • Conversation Id

   You can also insert custom variables using the Insert custom variable option. This option lets you reference metadata defined in Agent Utilities. Insert custom variables in this format:

   {{context.metaInfo.<yourCustomVarName>}}

   The system replaces the variable with the actual metadata value when the widget loads. For example, if you configure:

   https://www.example.com/?id={{context.metaInfo.customerId}}

   and the metadata contains context.metaInfo.customerId = 12345, the widget resolves the URL as:

   https://www.example.com/?id=12345

7. The Failure URL displays in case the intended page does not load. You can set the same variables as for the main URL above.
   

8. Click Save.
   

9. Once saving the widget, a success message displays, and the widget is listed within the External Widgets window.

Edit a Widget

To edit an existing widget, find it in the list of External Widgets, then click on it. The configuration window opens, and you can edit the name, icon, URLs, or all.

Delete a Widget

To delete an existing widget, find it in the list of External Widgets, then click on it. Click the Delete button on the left of the bottom toolbar, then confirm your choice.

Note

When deleting a widget, all configurations are lost, and the widget is removed from the Agent Console. You cannot restore deleted widgets. Please proceed with caution.

Add a Widget to an Agent Console Layout

Once you save an external widget, you can add it to the Agent Console using the Manage Layout feature.

To add a widget to an Agent Console Layout, follow these steps:

1. From within the Agent Console, click Manage Layout on the top toolbar.
2. From the list of available layouts, select the one to which you want to add the widget and click the ✐ icon next to it.

3. On the Edit Layout screen, find the widget in the left-hand-side panel. Drag and drop it to the right-hand-side panel.
   

4. Click Save. Once the widget is added, the integrated system or page will display within the widget as part of the selected Agent Console Layout. See what it looks like in the demo below.
   

Delete a Widget from an Agent Console Layout

To delete a widget from an Agent Console Layout, follow these steps:

1. From within the Agent Console screen, click Manage Layout on the top toolbar.

2. From the list of available layouts, select the one to which you want to add the widget and click the ✐ icon next to it.
   

3. On the Edit Layout screen, click More Options at the top of the widget, then select Delete.

   Note

   Deleting a widget from the Console Layout only removes it from the agents’ view. The external widget configuration remains in place, and you can choose to integrate it again later.

Load Widgets Without Conversations

If the checkbox to load the widget independently is selected when adding a widget, the widgets appear on the agent desktop even when a conversation is not initiated. Learn more.

Note

Users can pre-load widgets without conversational context by enabling the option from the widget settings. Widgets that depend on conversational context will continue to function without any changes.

Send Feedback