Self Help Online Studio - Virtual Agent Management

Last modified on 2022/08/17 15:23

Visual layout library: Available from Self Help version Autumn 2020 - Build 2020.2.108.7 onwards.

The Agents menu enables you to view the list of virtual agents created in the Service Bots module and deployed in Self Help and to specify their properties.

  • Each virtual agent is associated with Self Help projects in a given domain.
  • The creation wizard proposes missions that enable you to automatically download the content of all Self Help projects required for the virtual agent to work based on its scope of action.

    example  

    • Employees mission ==>  Download the Social Base, Service Manager and Employee Virtual Agent projects
    • Starter Pack mission ==>  Download the Social Base project and an empty Self Help project for the virtual agent's knowledge base
  • The visual layout library enables you to configure and customize the appearance of a virtual agent.

Notes

  • Only domain administrators are authorized to access the  Agents menu.
  • The visual layout library can only be used to configure a virtual agent integrated within a Web page. If the virtual agent is used in a Service Apps app, you should define its visual layout using the Virtual Agent widget.
  • To integrate a virtual agent within a Web page, you must add a JavaScript code in the <head> section of the page. Open url.png See the procedure
  • To integrate a virtual agent in Microsoft Teams, you must create a Bot app in Azure Bot Service. Open url.png See Microsoft Teams integration

Caution

  • The installation of the Social Base package is vital for the virtual agent to work.

Best Practice

  • To create a virtual agent quickly, you can:
    • Select one of the predefined missions in the virtual agent creation wizard.
    • Duplicate an existing virtual agent and modify the relevant properties.
  • To integrate the virtual agent quickly within a Web page, define the visual layout of the virtual agent in the visual layout library and copy the relevant JavaScript code. Open url.png See the procedure
  • Click View icon.png (View) next to the visual layout to test the visual appearance of the virtual agent.
    Replace {language_agent} in the URL with the language in which you want the virtual agent to run.

https://{server_address}/selfhelp/api/servicebots/layouts/{id_layout}?lang={language_agent}

Menu access

Online Studio > Channels > Agents

Screen description

         Agent.png

Name: Name of the virtual agent.

  • The name must be unique on the server.

Reference: ID of the virtual agent, used in the JavaScript code for integrating the virtual agent within a Web page. 

  • The ID must be unique on the server.
  • Lower-case letters and numbers as well as the following characters are authorized: _ and -. There must be no spaces.

Description: Comment indicating the scope of action for the virtual agent.

Last modification: Last modification date of the virtual agent.

Domain: Domain of the Self Help projects associated with the virtual agent.

Project List: List of Self Help projects associated with the virtual agent.

  • Self Help projects are defined for the domain of the virtual agent.
  • When you select a mission in the creation wizard, you can automatically download all of the Self Help projects associated with its scope of action. You can then delete or add other projects to the list.

Agent Layout: List of visual layouts defined for the virtual agent.

  • A given virtual agent can have several visual layouts.
  • Each visual layout is identified by its name which must be unique on the server.
  • Each visual layout is defined using the visual layout library.

Procedures

How to create a virtual agent

Note: Only for domain administrators.

Step 1: Create the new virtual agent

1. Select Channels > Agents in the Online Studio menu.

2. Click + Add.
 

Step 2: Specify general information on the virtual agent

1. Specify the information for identifying the virtual agent.

  • Note: The reference will automatically be generated using the virtual agent name. You can modify it.
  • Caution: Lower-case letters and numbers as well as the following characters are authorized: _ and -. There must be no spaces.

2. Select the domain of the virtual agent.

Note: Only the domains you are authorized to access will be available.

3. Click Next.
 

Step 3: Define the functional scope of the virtual agent

The list of predefined virtual agent missions will automatically appear.

          Open url.png See the description of Self Help templates

          Agent - Mission list.png

1. Select one of the predefined missions corresponding to the virtual agent's scope of action.

All of the Self Help projects required for the virtual agent to work will automatically be selected.

or

Select the Empty mission to define the scope of action from scratch as well as the Self Help projects required for the virtual agent to work.

2. Complete the list of Self Help projects to be associated with the virtual agent.

Caution: You must always associate the Social Base project because it is required for the virtual agent to work.

  • Untick the boxes of the Self Help projects in the selected mission if you do not want to associate them with the virtual agent.
    Note: If Self Help projects in the selected mission have the same names as those already present in the domain, they will not be selected. An information message will appear on hover.
            Agent - Project list - Hover message when exist in domain.png
  • Add the required Self Help projects to the list of existing projects.
    Note: Only the domains you are authorized to access will be available.

          Agent - Project list.png
 

Step 4: Save the new virtual agent

1. Click Save and Close.

or

Click Save and Configure Layout to configure the visual layout of the virtual agent for integrating it within a Web page.

  • The list of virtual agents defined on the server will be refreshed.
  • If you created the virtual agent using a mission, the Self Help projects associated with the mission (except those you unticked) will automatically be imported to the virtual agent's domain.


Step 5 (optional): Define the virtual agent's visual layout

Notes:

  • Perform this step if you intend to integrate the virtual agent within a Web page.
  • To integrate a virtual agent within a Service Apps app, you must configure its visual layout using the widget Virtual Agent.

         Agent - Visual layout.png

1. Select the visual layout you want (1).

2. Enter the name of the virtual agent for this new visual layout (2).

  • Note: The name will automatically be generated based on the visual layout name. You can modify it.

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

The preview of the virtual agent will automatically be refreshed in the right pane (4).

Best Practice icon.png

  • Click Conversation to see the virtual agent's conversation panel.
  • Click Login to see the virtual agent's login pane.
            Agent - Visual layout - Display modes.png

4. Click Save to save the virtual agent's visual layout.

You will return to the list of virtual agents.

5. Click + Add in the right pane displaying the details to repeat this procedure for each visual layout to be created.

         Agent - Visual layout - Add.png

How to deploy a virtual agent

Step 1: Create the virtual agent

     Open url.png See the procedure
 

Step 2 (optional): Configure the Service Manager connection package

Note: Perform this step if the virtual agent is used to search for information and create tickets in Service Manager.

ServiceManagerPackageConfiguration_Procedure

1. Go to the Desktop Studio in edit mode.

2. Expand the tree structure of the Service Manager project in the virtual agent's domain.

3. Specify the parameters for the oSetup variable found in the project library, which are required to call the Service Manager REST API.

     Open url.png See the detailed procedure.

Step 3: Configure and publish the virtual agent procedures

ProceduresConfigurationPublication_Procedure

1. Adapt the procedures specific to the virtual agent to the identity of your virtual agent in compliance with your corporate style guide.

     Open url.png See:

2. Publish all of the virtual agent procedures for the Self Help projects. Open url.png See the detailed procedure.

Note:  Service Manager project procedures do not need to be published.

Step 4: Deploy the virtual agent

VirtualAgentDeploiement_Procedure

1. Configure the integration mode of the virtual agent depending on the display channel. Open url.png See the detailed procedures.

2. Inform users that the virtual agent is now available.

How to integrate the virtual agent in a display channel

Integration in a Service Apps app

A virtual agent is implemented in an app using the Virtual Agent widget. The virtual agent is accessed using a Service Bots connector.

          Open url.png See the procedure

Integration within a Web page

To integrate a virtual agent within a Web page, you must add a JavaScript code in the <head> section of the page. This code contains all of the information specified when the virtual agent was created. This information, which is required to ensure the virtual agent works correctly within the Web page, includes the domain address, virtual agent ID, language, etc.

  • You can copy the code from the visual layout of the virtual agent. In this case, you are not required to perform any configuration manually.
  • It can also be manually created. To do this, you must adapt the JavaScript code provided. Open url.png See the procedure
     

Best Practice icon.png  Configuration using the code generated by the visual layout of the virtual agent

Step 1: Copy the JavaScript code from the visual layout of the virtual agent

1. Select Channels > Agents in the Online Studio menu.

The list of virtual agents will appear.

2. Click the virtual agent to be integrated within the Web page.

The list of visual layouts defined for the virtual agent will appear in the right pane.

3. Click Copy code icon.png (Copy code) next to the visual layout.

         Agent - Visual layout - Copy code.png

The JavaScript code containing the configuration of the visual layout will be copied to the clipboard.
 

Step 2: Integrate the JavaScript code in the Web page

1. Open the Web page in a text editor.

2. Paste the JavaScript code in the <head> section of the page.


Manual configuration of the JavaScript code

Step 1: Configure the JavaScript code manually

1. Copy the JavaScript code below to a text editor.

<script type="text/javascript" src="https://www.myselfhelpdomain.com/va-themes/EVSelfHelp.widget.min.js"></script>
<script type="text/javascript">
  var ezEvie = new EVSelfHelp.Widget(
   {
    "assistant-id": "MyAgentID",
    "lang": "en_US",
    "is-test": false,
    "config-url": "https://www.myselfhelpdomain.com/va-themes/ezv-panel/config.json",
    "quicklinks": ["Text1","Text2"],
    "contextvars":
     {
      "shoptions": "public",
      "theme": "evsh"
     },
    "custom":
     {
    "ff": "verdana",
    "fs": "14px",
    "f_color": "#1e1f1f",
    "title": "https://www.domain.com/logo.png",
    "subtitle": "Your virtual agent",
    "subtitle_color": "#ffffff",,
    "bg_color": "#6eb0da"
    "cb_name": "EVie",
    "cb_color": "#6eb0da",
    "cb_color_alt": "#2c658a",
    "user_color": "#ffffff", //f6f7f9
    "user_bgcolor": "#fa7268", //ffbb00
    "footer_color": "#ffffff",
    "placeholder": "Enter your question",
    "textarea_border": "1px solid #e8e8e8"
     }
   });
</script>

2. Specify the parameters below.

  • www.myselfhelpdomain.com: Address of the domain hosting the Self Help project.
  • assistant-id: ID of the virtual agent.
  • lang: Language to be used.
        example  fr_FR, en_US
  • is-test: Used to indicate if the virtual agent should use the Self Help projects currently being edited (value true) or not (value false). Note: Users must have the appropriate rights. 
  • quicklinks: Predictive text suggested to users.
  • contextvars.shoptions: Public account when data must be made accessible to non-authenticated users. Note: If SSO is used, the account must be specified.
  • contextvars.theme: evSH skin to be used for displaying procedures.
  • custom: Parameters for customizing the conversation panel interface.
     

Step 2: Integrate the JavaScript code in the Web page

1. Open the Web page in a text editor.

2. Paste the JavaScript code in the <head> section of the page.

Microsoft Teams integration

     Open url.png See the procedure

Tags:
Powered by XWiki © EasyVista 2022