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 via a conversation panel		Virtual agent via an entire Web page

Notes

• The Virtual Agent widget requires:
  • A virtual agent created in Service Bots.  See Deploying a virtual agent.
  • A Service Bots connector.  See the description.
  • An EasyVista Virtual Agent data source. 

• 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.  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 .
• To define a new data source, click 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.

          See the description of properties.

Quick Links

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  to show or hide the pane.
• Note: You can modify graphic properties in the User section of the visual layout library.
           

Quick Links List: List of predictive text suggested.

Call Button

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

Button Style

Properties applied to the virtual agent's call button.
         

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

PageGeneralFormat

Font Family (Inherit)		Font of the text, selected via Select Font
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.

Search Style

Properties applied to the data entry field displayed to the left of the virtual agent's call button.
         

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

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
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

    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

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

1. Click 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.  See the description.
         

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  in the app toolbar to open the graphic editor.

2. Click 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.  See the description.
 

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

1. Click 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.
         

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).  See the description.

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

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.  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.   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  to run the app.
The app will appear in a new Web browser tab.

2. Check that the virtual agent works correctly.