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 a virtual agent in a Service Apps app. This virtual agent will interact with users via a system of questions and answers.

  • The visual layout library provides templates that help you define the visual layout of the virtual agent quickly. You can modify the virtual agent's properties to customize and adapt its visual aspect to your style guide.
  • Users can click a button to call the virtual agent or it can open automatically.
  • User interaction with the virtual agent can take place via a conversation panel or an entire Web page.
  • Answers from the virtual agent can be linked to Self Help procedures.

Example

Call buttons
Virtual agent - Call button 1.png Virtual agent - Call button 2.png
Virtual agent via a conversation panel Virtual agent via an entire Web page
Virtual agent widget example - Conversational panel.png Virtual agent widget example - Full page.png

Notes

  • The layout visual library is maintained by EasyVista. You cannot add new templates.
  • The tag cloud at the bottom of the conversation panel is automatically generated using the content of the Tags metadata for virtual agent procedures.

Best Practice

  • We recommend that you select a connector that performs the authentication of Service Apps users in Self Help via an API key.
    • This enables users to access Self Help procedures using their Service Apps credentials.
    • Users will be automatically created in Self Help if they do not have a Self Help account. 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.
     

Open Automatically: Used to specify whether the virtual agent's conversation panel should open automatically when the app is run (box is checked) or only when users click the call button (box is not checked).

  • Note: The automatic opening of the conversation panel does not have any impact on the graphic editor. It is done only in execute mode.

Panel

Configure Virtual Agent Layout: Used to define a virtual agent quickly using a template from the visual layout library and customize its appearance in greater detail.

        Open url.png See the description of properties.

List of predictive text suggested to users, displayed at the bottom of the conversation panel. 

  • When users click one of the suggestions, it will appear just like text entered by users.
  • You can click Hide panel quick links icon.png to show or hide the pane.
  • Note: You can modify graphic properties in the User section of the visual layout library.
             Panel - Quick links.png

Quick Links List: List of predictive text suggested.

Best Practice icon.png  

  • Enter short keywords for the predictive text.
  • You can specify predictive text based on the most common keywords entered by users.

example  Remote Worker project ==> Quick links list: Screen sharing, Internet connection

Call Button

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

Best Practice icon.png  You should always configure a call button to allow users to reopen the virtual agent in case they inadvertently close it.

Button Style

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

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

PageGeneralFormat
Font Family (Inherit) Font of the text, selected via Select Font Graphic properties - General format.png
Size Font size, selected via the slide or specified directly in the field
Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) Background color of the widget
Text Color (Inherit) Color of the text displayed by the widget

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

Icon: Image inserted in the call button.

  • Click O to associate an icon from the icon gallery.
  • Color (hover) (Inherit): Color of the button text and icon when the cursor hovers over it.
  • Background Color (hover) (Inherit): Background color of the button and icon.

example  Button text and icon appear in beige on a brown background on hover

Call button - Button style properties - Icon.png

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) Font of the text, selected via Select Font Graphic properties - General format.png
Size Font size, selected via the slide or specified directly in the field
Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) Background color of the widget
Text Color (Inherit) 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 of the text field displayed to the left of the data entry field.
         Call button - Search label properties.png

Label (Note: Only if the Search Style > Enable Input Text box is checked): Text displayed to the left of the data entry field.

PageGeneralFormat
Font Family (Inherit) Font of the text, selected via Select Font Graphic properties - General format.png
Size Font size, selected via the slide or specified directly in the field
Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) Background color of the widget
Text Color (Inherit) Color of the text displayed by the widget

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

Theme

  Open url.png See the description of properties.

Procedure: How to implement a virtual agent in an app

Prerequisites in Service Bots

1. You must have previously created the virtual agent.

2. You must have previously published the Self Help projects attached to the agent.

3. (optional) You must have the information from the API key in order to configure the Service Bots connector if you use the user unique authentication principle.

Procedure_EnterAPIKey

  • Create the API key. Open url.png See the procedure.
    Note: Ask your server administrator to provide the required information if you do not have the rights to create the API key.
  • Copy and paste the following information for creating the connector in a text editor:
    • The API key specific to your Self Help project (1)
    • The secret of the API key (2)
      Caution: This information is only available during this step. You cannot obtain it at a later time.
  • Download the PEM file containing the API private certificate to your workstation (3).

         API key details.png

Step 1: Add a Service Bots connector to Service Apps.

1. Click Apps - Gallery - Connectors icon.png Connector in the App Gallery toolbar or graphic editor toolbar.
The window for configuring the connector will appear.

2. Click Add Connector.

3. Name the connector.

4. Select the Service Bots connector.
The fields specific to the type of connector will appear. Open url.png See the description.
         Service Bots connector - With API key.png

5. Specify the properties for identifying the connector.(1)

  • The domain corresponds to the location of the Self Help server.
  • The virtual agent reference is specified by the domain administrator when creating the agent. You can find it in the Online Studio > Service Bots > Agents menu (Note: Ask your server administrator to provide the required information if you do not have the rights to access this menu).

6. (optional) Configure the API key if you use the user single sign-on authentication. (2)

  • Tick the Cross Service Authentication box.
    The fields for configuring the API key will appear.
  • Specify the fields using the information you pasted in the text editor (see Prerequisites > Step 2).
    • Copy and paste the API key in the API ID field.
    • Copy and paste the secret of the API key in the API Secret Key field.
  • Click Upload API Private Certificate to upload the API private certificate you downloaded earlier to your workstation.
  • (optional) Specify the group that will automatically be assigned to Service Apps users if they do not exist in Self Help.
    Note: This user group must be authorized to access the virtual agent's Self Help projects.

7. Click Save to save the connector and click Save again.
 

Step 2: Add an EasyVista Virtual Agent data source to the 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. Select the Service Bots connector you created earlier in the Alias/connector field.

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

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

1. 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. Ensure that the widget points to the EasyVista Virtual Agent data source you created earlier in the Content > Data Source property.
 

Step 4: Configure the virtual agent.

1. (optional) Tick the Content > Open Automatically box if you want the virtual agent to open automatically when the app is run.

2. Click Configure Virtual Agent Layout.

The template library will appear.
         Virtual agent layout library.png

3. Enter a name for the selected visual layout in the Agent Name field (1).
Note: By default, the virtual agent name is followed by the name of the visual layout.

4. Select the relevant layout in the Preset section (2).

5. Configure the virtual agent's visual layout using different properties (3). Open url.png See the description.

The preview of the virtual agent will automatically be refreshed in the right pane (4) each time you make a modification.

Best Practice icon.png

  • Click Visual appearance preview - Login icon.png to see the virtual agent's login pane.
  • Click Visual appearance preview - Conversation icon.png to see the virtual agent's conversation panel.

6. Click Finish to save the virtual agent's visual layout.
 

Step 5: Configure the virtual agent's call button.

1. Configure the visual aspect of the call button using different properties in the Call Button section. Open url.png See the description.

The preview of the call button will automatically be refreshed in the Design pane.
 

Step 6 (optional): Add predictive text.

1. Enter the list of predictive text that will be suggested to users at the bottom of the conversation panel in the Panel > Quick Links section.  Open url.png See the description.

  • Enter the relevant keywords in the Quick Links List field.
  • Press <Enter> to validate.
  • Repeat this procedure for each predictive text.
     

Step 7: 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.

Tags:
Last modified by Unknown User on 2020/12/07 11:12
Created by Administrator XWiki on 2019/09/10 17:07

Shortcuts

Powered by XWiki ©, EasyVista 2021