Virtual Agent Widget


Apps - Widget - Virtual Agent icon.png This widget belongs to the EasyVista category in the widget library. It is used to integrate the call button for a virtual agent created in Self Help, into Service Apps

  • When the virtual agent is called, a conversation panel will appear, enabling users to interact via a system of questions and answers.
  • Each answer from the virtual agent can return Self Help procedures.
  • You can use several properties to customize the call button and conversation panel.

Example

Call button Conversation panel
Virtual agent - Button.png Virtual agent - Conversational pane.png

Notes

  • A Tags link displaying a tag cloud at the bottom of the conversation panel.
    • The tag cloud is automatically generated using the content of Tags metadatas for virtual agent procedures.
    • You can format it using the Tag Cloud widget that points to the data source linked to the virtual agent.
               Open url.png See the example.

List of properties

Content

Data source: Self Help data source linked to the widget. 

  • The drop-down list displays only EasyVista Virtual Agent data sources.
  • To modify the data source or to view its contents, you should click Apps - Edit icon.png.
  • To define a new data source, click Apps - Add datasource icon.png Add Data Source in the Objects pane.
     

Theme: Name of the Self Help theme to be used.

  • If you do not specify this field, the default theme will be used.

Panel

Properties applied to:

  • Text in the conversation panel
  • The data entry field at the bottom of the conversation panel
             Conversational pane - Panel properties.png

Font Family: Text font.

Size: Font size.

Text Color: Text color.

Panel Top

Properties applied to the header of the conversation panel.
         Conversational pane - Panel top properties.png

(1)  Title: Image displayed at the top of the panel. Click Apps - Upload icon.png to select it.

(2)  Subtitle: Title displayed at the top of the panel.

Subtitle Color: Text color of the title in the panel.

(3)  Background Color: Background color of the panel header.

Virtual Agent

Properties applied to the display of the virtual agent's answers in the conversation panel, as well as keywords in the tag cloud.
         Conversational pane - User area properties - Agent name and links.png

Name: Name of the virtual agent, displayed in the header of each answer provided.

(1)  Text Color (Note: If the default color of Panel > Text Color is modified, it will become the priority color): Main color applied to:

  • The header of each virtual agent's answer, i.e. name of the virtual agent and the vertical left border highlighting the length of the answer
  • Hyperlinks in the conversation panel
  • Every odd-numbered keyword in the tag cloud

(2)  Alternative Color: Alternative color applied to every even-numbered keyword in the tag cloud.

User Area

Properties applied to the shortcut section as well as the display of user questions in the conversation panel.
         Conversational pane - User area properties - User question and shortcuts.png

(1)  User Color: Color applied to:

  • User questions in the conversation panel
  • Background color of shortcuts at the bottom of the panel

(2)  User Background Color: Background color applied to user questions in the conversation panel.

(3)  Quick Links: List of shortcuts displayed at the bottom of the conversation panel. They redirect users automatically to one of the virtual agent's project procedures.

Panel Bottom

Properties applied to the footer of the conversation panel.
         Conversational pane - Panel bottom properties.png

(1)  Footer Color: Background color of the panel footer.

(2)  Text Area Border Color: Color of the data entry field border.

Text Area Border Size: Width, in pixels, of the data entry field border.

(3)  Placeholder: The text displayed in the search field is automatically cleared once the user starts typing.

Best Practice icon.png Use this field to help enter data, for example, by indicating a type of question.

Theme

The properties below are used to configure the virtual agent's call button.

   Open url.png See the description of other properties.

Button Style

Properties applied to the virtual agent's call button.
         Call button - Button style properties.png

Button Label: Name of the virtual agent's call button.

PageGeneralFormat
Font Family (Inherit) (1) Font of the text, selected via Select Font EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Search Label

Properties applied to the text area displayed to the left of the data entry field.
         Call button - Search label properties.png

PageGeneralFormat
Font Family (Inherit) (1) Font of the text, selected via Select Font EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Search Style

Properties applied to the data entry field displayed to the left of the virtual agent's call button.
         Call button - Search style properties.png

Enable Input Text: Used to indicate if a data entry field is displayed to the left of the call button (box is checked) or not (box is not checked).

Placeholder (Note: Only if the Enable Input Text box is checked): The text displayed in the search field is automatically cleared once the user starts typing.

PageGeneralFormat
Font Family (Inherit) (1) Font of the text, selected via Select Font EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Procedure: How to implement a virtual agent in an app

Prerequisites:  Deployment of the virtual agent in Self Help

   Open url.png See the procedure.
 

Step 1: Add a SelfHelp connector to Service Apps.

1. Click Add Connector.

2. Name the connector.

3. Select the SelfHelp connector.

4. Specify the other properties.

  • The domain is the one hosting the Self Help server.

5. Click Save and click OK.
 

Step 2: Add an EasyVista Virtual Agent data source to the Service Apps app.

1. Click Apps - Application properties icon.png in the app toolbar to open the graphic editor.

2. Click Apps - Add datasource icon.png Add Data Source in the Objects pane.

3. Select the type of data source, Applications > EasyVista Virtual Agent.

4. In the Alias/Connector field, select the SelfHelp connector you created in step 2.

5. Specify the other properties of the data source.
    Open url.png See the description.
 

Step 3: Add a Virtual Agent widget to the Service Apps app.

. Click Apps - Add widget icon.png Add Widget in the Objects pane.

2. Click and drag the EasyVista > Virtual Agent widget type to the Design pane.

3. Select the EasyVista Virtual Agent data source you created in step 3.
 

Step 4: Configure the virtual agent.

1. Define the visual aspect of the conversation panel using the Panel..., Virtual Agent and User Area properties.

2. Define the visual aspect of the call button using the Button Style, Search Label and Search Style properties in the Theme section.
 

Step 5: Test the virtual agent.

1. Click EVApps - GUI - Execute icon.png to run the app.
The app will appear in a new Web browser tab.

2. Check that the virtual agent works correctly. 

Example: Virtual agent's tag cloud containing keywords in the wiki

        Conversational pane - Tag cloud.png

1. In Self Help:

  • Create the virtual agent for the wiki. One procedure is created for each glossary entry.
  • Specify keywords using the Tags metadata of each procedure.
     

2. In Service Apps:

  • Use the Tag Cloud widget to search for the content of the Tags metadata for virtual agent procedures.
  • The size of a keyword is determined by its frequency.
  • Each odd-numbered keyword, i.e. first, third, fifth, etc., will be displayed using the main color defined in the Virtual Agent > Text Color property of the widget. Note: If the default color of Panel > Text Color is modified, it will become the priority color.
  • Each even-numbered keyword, i.e. second, fourth, sixth, etc., will be displayed using the alternative color defined in the Virtual Agent > Alternative Color property of the widget.
Tags:
Last modified by Unknown User on 2019/12/10 17:34
Created by Administrator XWiki on 2019/09/10 17:07

Shortcuts

Recent changes
•  Service Engine
•  Service Apps
•  Self Help

Glossary

Powered by XWiki ©, EasyVista 2019