Self Help Online Studio - Service Bots Menu > Agents


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

This menu displays the list of virtual agents created in Service Bots.

  • A virtual agent is a functionality that enables user interaction via a system of questions and answers in a conversation panel.
  • It assembles all knowledge for a set of Self Help projects in a given domain.
  • It can be deployed via different display channels.
  • It uses a dictionary to analyze user questions and to select the most relevant content related to the request.

Notes

  • Only domain administrators are authorized to access the Service Bots > Agents menu.
  • The virtual agent creation wizard provides access to the visual layout library.
    • This library enables you to configure and customize the virtual agent's visual layout when it is integrated within a Web page. Open url.png See the procedure.
    • If the virtual agent is used in a Service Apps app, you can 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.

Caution

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

Best Practice

  • To deploy the virtual agent quickly, select one of the predefined missions in the virtual agent creation wizard. This corresponds to a scope of action defined for a virtual agent. It is used to automatically download the contents of all Self Help projects required for the virtual agent to work.
        Open url.png See List of Self Help templates.

    example  

    • Select the Employees mission ==>  Download the Social Base, Service Manager and Employee Virtual Agent projects
    • Select the Starter Pack mission ==>  Download the Social Base project and an empty Self Help project for the virtual agent's knowledge base
  • 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.

Description

       Service Bots menu - Agents.png

Access: Service Bots > Agents menu

  • You can sort the list of virtual agents by clicking one of the column headers.
  • You can group virtual agents using a specific criterion by clicking the Group By link at the top of the list.
  • You can apply a filter to the names of virtual agents by clicking the Filter link at the top of the list.
  • Click the name of a virtual agent to see its details.
    • The list of all Self Help projects associated to the virtual agent will appear.
    • All the virtual agent's visual layout will appear. Click Add icon.png to create a new one. Open url.png See the procedure.
    • For a virtual agent associated to Microsoft Teams, the details of the Bot app created in Azure Bot Service will appear. Open url.png See the Microsoft Teams integration.
              Service Bots menu - Agents - Details.png
       

Functionalities available in the toolbar

  • Create a new virtual agent. Open url.png See the procedure.
    • Note: Only for domain administrators.
    • Display the list of predefined missions, used to automatically download and import all Self Help projects required for the virtual agent to work into the domain, based on the virtual agent's scope of action.
    • Access the visual layout library to quickly configure and adapt the virtual agent's visual layout to the corporate style guide.
  • Modify a virtual agent.
  • Delete a virtual agent.
  • Duplicate a virtual agent.
  • Associate a virtual agent with the Microsoft Teams collaborative platform. Open url.png See the description.

Procedures

How to create a virtual agent

Note: Only for domain administrators.

Step 1: Create the new virtual agent.

1. Open the Online Studio.

2. Select Service Bots > Agents in the menu.

3. Click + Add.

The list of predefined virtual agent missions will appear.
         Virtual agent - Template Library.png

4. Select the method for creating the new virtual agent.

  • You can click the predefined mission corresponding to the virtual agent's scope of action. This enables you to automatically associate the Self Help projects required for the virtual agent to work.
        Open url.png See List of Self Help templates.
  • You can 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.

5. Click Set General Information.

6. Specify the information for identifying the virtual agent.

Step 2: Define the functional scope of the virtual agent.

1. Select the domain of the virtual agent.
Only the domains you are authorized to access will appear.

2. Indicate the Self Help projects associated with the virtual agent.

  • Note: If you select a mission, all Self Help projects associated with the mission will automatically appear. You can disable them by unticking the relevant box.
  • Caution: You must always associate the Social base.
  • You can click Add icon.png to add other Self Help projects you are authorized to access in the domain.
            Virtual agent - Project selection.png

3. Click Save and Close to save the new virtual agent.

  • 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 3 (optional): Define the virtual agent's visual layout.

Note

  • This step is mandatory if you intend to integrate the virtual agent within a Web page. Open url.png See the procedure.
  • You configure the virtual agent in a Service Apps app using the Virtual Agent widget.
  • You can define several visual layouts for a given virtual agent.
     

1. Click Add icon.png in the Agent Layout section.

Note: You can define the visual layout immediately by clicking Save and Configure Layout when completing the creation of the virtual agent.

       Virtual agent - Add layout.png

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

2. Select the template you want.

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

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

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

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.

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

6. Repeat this procedure for each visual layout to be created for the virtual agent.
 

Step 4 (optional): Configure the Service Manager connection package.

Note: If the virtual agent is used to search for information and create tickets in Service Manager.

ServiceManagerPackageConfiguration_Procedure

1. Open 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. Open url.png See the procedure.
The virtual agent can call the Service Manager REST API.

Step 5: 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 6: 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, the 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.
  • You can also create it manually. To do this, you must configure the JavaScript code provided in this document.
     

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. Open the Online Studio.

2. Select Service Bots > Agents in the menu.
The list of virtual agents will appear.

3. Click the virtual agent to be integrated within the Web page.
The list of visual layouts defined for the virtual agent will appear.

Note: Click Add icon.png at the bottom of the list to create a new visual layout. Open url.png See How to create a virtual agent > Step 3.

       Virtual agent - Layouts.png

4. Click Copy Code.
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.

Click to see the JavaScript code.

<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: Indicates whether or not the virtual agent should use the version of Self Help projects currently being edited. Note: If the value is true, then users must have the appropriate rights. Otherwise, the value is false.
  • 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.
     

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.

Tags:
Last modified by Unknown User on 2021/09/20 20:03
Created by Administrator XWiki on 2020/12/07 11:15

Shortcuts

Recent changes
•  EV Service Manager
•  Service Apps
•  EV Self Help
•  Service Bots

Powered by XWiki ©, EasyVista 2021