Virtual Assistants Overview
Natural Language Processing (NLP)
Concepts and Terminology
Quick Start Guide
Accessing the Platform
Navigating the XO Platform
Building a Virtual Assistant
Help & Learning Resources
Release Notes
Current Major Version
Recent Updates
Previous Versions
Request a Feature
Conversation Designer
Dialog Tasks
Mock Scenes
Dialog Tasks
Navigate Dialog Tasks
Build Dialog Tasks
Node Types
Intent Node
Dialog Node
Entity Node
Entity Rules
Form Node
Confirmation Node
Message Nodes
Logic Node
Bot Action Node
Service Node
Webhook Node
Script Node
Process Node
Agent Transfer
Node Connections
Node Connections Setup
Sub-Intent Scoping
User Prompts or Messages
Voice Call Properties
Entity Types
Knowledge AI
Knowledge Graph
Build a Knowledge Graph
Manage FAQs
Knowledge Extraction
Import or Export Knowledge Graph
Prepare Data for Import
Importing Knowledge Graph
Exporting Knowledge Graph
Auto-Generate Knowledge Graph
Knowledge Graph Analysis
Answer from Documents
Alert Tasks
Small Talk
Digital Skills
Digital Forms
Digital Views
Session and Context Variables
Context Object
Intent Discovery
NLP Optimization
ML Engine
Model Validation
FM Engine
KG Engine
Traits Engine
Ranking and Resolver
Training Validations
NLP Configurations
NLP Guidelines
LLM and Generative AI
Event Handlers
Contextual Memory
Contextual Intents
Interruption Management
Multi-intent Detection
Amending Entities
Default Conversations
Conversation Driven Dialog Builder
Sentinment Management
Tone Analysis
Default Standard Responses
Ignore Words & Field Memory
Test & Debug
Talk to Bot
Utterance Testing
Batch Testing
Conversation Testing
Conversation Testing Overview
Create a Test Suite
Test Editor
Test Case Assertion
Test Case Execution Summary
Health and Monitoring
NLP Health
Flow Health
Actions Overview
Azure OpenAI
Microsoft Graph
Open AI
Agent Transfer Overview
Custom (BotKit)
External NLU Adapters
Dialogflow Engine
Test and Debug
Dashboard Filters
Overview Dashboard
Conversations Dashboard
Users Dashboard
Performance Dashboard
Custom Dashboards
Custom Meta Tags
Create Custom Dashboard
Create Custom Dashboard Filters
NLP Insights
Conversations History
Conversation Flows
Conversation Insights
Feedback Analytics
Usage Metrics
Containment Metrics
Universal Bots
Universal Bot Definition
Universal Bot Creation
Training a Universal Bot
Universal Bot Customizations
Enabling Languages
Manage Assistant
Plan & Usage
Usage Plans
Support Plans
Multilingual Virtual Assistants
Get Started
Supported Components & Features
Manage Languages
Manage Translation Services
Multiingual Virtual Assistant Behavior
Feedback Survey
Masking PII Details
IVR Settings
General Settings
Assistant Management
Manage Namespace
Data Table
Table Views
App Definitions
Data as Service
Build a Travel Planning Assistant
Travel Assistant Overview
Create a Travel Virtual Assistant
Design Conversation Skills
Create an ‘Update Booking’ Task
Create a Change Flight Task
Build a Knowledge Graph
Schedule a Smart Alert
Design Digital Skills
Configure Digital Forms
Configure Digital Views
Train the Assistant
Use Traits
Use Patterns
Manage Context Switching
Deploy the Assistant
Use Bot Functions
Use Content Variables
Use Global Variables
Use Web SDK
Build a Banking Assistant
Design Conversation Skills
Create a Sample Banking Assistant
Create a Transfer Funds Task
Create a Update Balance Task
Create a Knowledge Graph
Set Up a Smart Alert
Design Digital Skills
Configure Digital Forms
Configure Digital Views
Add Data to Data Tables
Update Data in Data Tables
Add Data from Digital Forms
Train the Assistant
Composite Entities
Use Traits
Use Patterns for Intents & Entities
Manage Context Switching
Deploy the Assistant
Configure an Agent Transfer
Use Assistant Functions
Use Content Variables
Use Global Variables
Intent Scoping using Group Node
Analyze the Assistant
Create a Custom Dashboard
Use Custom Meta Tags in Filters
Migrate External Bots
Google Dialogflow Bot
API Reference
API Introduction
API List
API Collection
koreUtil Libraries
SDK Reference
SDK Introduction
SDK Security
SDK Registration
Web Socket Connect and RTM
Installing the BotKit SDK
Using the BotKit SDK
BotKit - Blue Prism
BotKit - Flight Search Sample VA
BotKit - Agent Transfer
Widget SDK Tutorial
Web SDK Tutorial
Introduction to Admin Console
Administration Dashboard
User Management
Add Users
Manage Groups
Manage Roles
Data Tables and Views
Assistant Management
Invite Users
Send Bulk Invites
Import User Data
Synchronize Users from AD
Security & Control
Using Single-Sign On (SSO)
Two-Factor Authentication (2FA)
Security Settings
Cloud Connector
  1. Home
  2. Docs
  3. Virtual Assistants
  4. Builder
  5. Digital Views

Digital Views

Interactions with Virtual Assistants are typically conducted using chat/messaging tools, voice channels, or other types of assistants. In the majority of the cases, the Virtual Assistants respond to the user queries only when the users have requested some information. This works well for conducting on-demand tasks that need user input for execution and the result is usually a short response, confirmation, or acknowledgment. But the need for more proactive user updates and less user input through an engaging interface has become a key requirement. 

Using Digital Views from the XO Platform, you can design and launch rich visual experiences through interactive components, panels, and widgets, to proactively present relevant information to your users or customers. Panels are the placeholders that hold one or more widgets. Widgets are individual components that display information to the end-users. Your users or customers can interact with your VA either in conversation mode or directly get the required information from the widgets.

This article provides an overview of the working and implementation of Panels & Widgets. For step-by-step usage instructions, refer to this article.

How It Works 

  1. Using Digital Views, an organization offers to its VA end-users a single interface for various activities.
  2. Multiple panels constitute a Digital View.
  3. Each of the panels gives access to various functions.
  4. The end-user accesses these panels for information pertaining to each of the functions and performs follow-up actions.
  5. As an example, a Panel within a travel VA  could have multiple widgets showing:
    1. Upcoming Trips,
    2. Completed Bookings,
    3. Canceled Bookings. 

You can access Digital Views by selecting the VA you want to work with then going to Build > Digital Skills > Digital Views

How to use Digital Views?

You can enable Digital Views for your Virtual Assistant by designing the required widgets, adding them to the relevant panels and publishing them on the WidgetSDK channel.

Here are the steps we recommend for efficient design of Digital Views: 

  1. Set up: Panels are containers to host one or more widgets. You may create multiple panels and each panel can host widgets that present relevant information. Widgets are the interactive components that can contain information to be presented to the end-users and allow them to perform actions and follow-ups.
  2. Configure: Define widgets by connecting them either to your tasks or by directly defining the widget. If you have connected your widget to a Dialog Task, make sure to use a Message node to present the required information in the widget using any of the supported widget templates.
  3. Preview & Publish: Preview your widgets from the XO Platform to review the visual representation of the information. Enable the WidgetSDK channel and publish your panels and widgets to make them available for your end-users.
  4. Host with SDK / Host Independently: You can choose to host your widgets independently or co-host them along with the WebSDK. You can download the SDKs from the GitHub page.

General Setup

Here is the general setup process to follow when you want to configure Panels and Widgets for Digital Views: 

  1. Configure Widgets: Define widgets by connecting them either to your tasks or any other source like JavaScript generating JSON file. In cases where you are using a task as a source, ensure that the message is formatted properly for the Widget SDK channel.
  2. Preview the Widgets: Preview your widgets from the XO Platform.
  3. Set up Panels: You may create multiple panels and each panel can host widgets that present relevant information. You can use the predefined widgets or create new ones.
  4. Test the Panels to see how the Panels and Widgets are rendered in the chat window.
  5. Publish the VA: Publish the VAso that the panels and widgets are made available for your end-users.
  6. Host the Panel: You can choose to host your widgets independently or co-host them along with the web SDK. You can download the SDKs from the GitHub page. Do ensure to enable WidgetSDK as a channel.

Configure Widgets

Widgets are individual components that can communicate with the VA for presenting information to the end-users. The source of information for widgets is from a Dialog Task or a JSON using any of the predefined widget templates.

To configure widgets, follow the below steps:

  1. Click Create Widget to create a widget.

  2. The New Widget dialog opens.

  3. On the New Widget window, enter the following details:
    1. Name of the widget
    2. Display Name for the widget
    3. Auto Refresh to set the frequency with which this widget needs a poll for fresh data. The refresh is applicable only when the panel containing the widget is active.
    4. Source for a widget can be set either from the execution of Dialog Task, from JavaScript by defining a JSON, or by linking an existing Digital Form.
  4. Save the Widget when ready.

Configure Widget Sources

Dialog Task

The Dialog Task option allows you to trigger a task and present the output in the widget.

The Select Dialog Task drop-down will list all available tasks in the current VA. Select the task you want to trigger using this widget.
Note: In the connected Dialog Task make sure to use a Message node to present the required information in the widget using any of the supported widget templates.

You can use the icon next to the Dialog Task to open the Dialog Task for checking the task details like entity names etc.

Any entities used by the selected Dialog Task need to be pre-populated with values by mapping Entity Name with Entity Values.

If the selected Dialog Task has any Authorization Profile defined, it is displayed here.


When selecting JSON as a source, you will be presented with a Javascript editor, where you can add your code.

Digital Form

When selecting Digital Form as a widget source, you will have the option to select the Digital Form, as well as the Dialog Task to trigger upon submission. 

Note that a Digital Form can be used to define multiple Widgets and can also be added to multiple Panels. However, it will be associated with the same Dialog Task across all Widgets and Panels.

Edit, Run & Preview a Widget

After you save, the widget will be In Development state. You can Edit or Delete the widget.

When you Edit widget, apart from being able to modify any of the above fields, you will have the option to Run & Preview the widget. You can save the preview as the thumbnail display for the widget.

Configure Panels

Create a Panel

Panel refers to containers that hold one or more widgets. You can add an existing widget to the panel or create new widgets within it.

  1. Click Create Panel to create a panel.
  2. On the New Panel window, enter the following details:
    1. Name of the Panel.
    2. Display Name for the Panel.
    3. Panel Icon to display in the chat window (URL to the location).
    4. Save the Panel.

  3. After you save, the panel will be In Development and will be displayed on your Digital Views screen. 

Add Widgets

  1. Click Add Widget to add widgets to the panel.

  2. Select widgets from the drop-down list and click Add..You can add multiple widgets to the same panel.

Panel Options

You have the following options for a given panel:

  1. Edit the panel details;
  2. Add Form to add existing forms to the Panel. Once added, forms will behave as a widget with the sourse set to Digital Form;
  3. Add Widget to add existing widgets;
  4. Panel Management to add existing forms/widgets, or remove already added forms/widgets from the panel.
  5. Test the individual panel – this opens the Talk to Bot window along with the panel listing with the current panel active and data presented. You can interact with the VA and test the panel.
  6. Delete the Panel.


When you publish your Virtual Assistant,  please ensure that the panels and widgets you want to include are selected.

Refer here for details on Publishing a Virtual Assistant.


The XO Platform provides the Widget SDK, which you can use for hosting and managing panels and widgets. You can choose to host your widgets independently or co-host them along with the WebSDK. You can download the SDKs from the GitHub page. Do ensure to enable WidgetSDK as a channel. Refer to this tutorial on how to do so.