Self Help Online Studio - Virtual Agent Management
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.
See the procedure - To integrate a virtual agent in Microsoft Teams, you must create a Bot app in Azure Bot Service. 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. See the procedure
- Click
(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
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
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.
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.
See the description of Self Help templates
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.
- 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.
- Add the required Self Help projects to the list of existing projects.
Note: Only the domains you are authorized to access will be available.
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.
1. Select the visual layout you want (1).
2. Enter the name of the virtual agent for this new visual layout (2).
3. Configure the virtual agent's visual layout using different properties (3). See the description of the visual layout library
The preview of the virtual agent will automatically be refreshed in the right pane (4).
- Click Conversation to see the virtual agent's conversation panel.
- Click Login to see the virtual agent's login pane.
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.
How to deploy a virtual agent
Step 1: Create the virtual agent
See the procedure
Step 2 (optional): Configure the Service Manager connection package
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.
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.
See:
- Deploying a virtual agent: Adapting procedures
- How to customize the social base
2. Publish all of the virtual agent procedures for the Self Help projects. See the detailed procedure.
Step 4: Deploy the virtual agent
VirtualAgentDeploiement_Procedure
1. Configure the integration mode of the virtual agent depending on the display channel. 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.
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.
We recommend that you use this method. You are not required to perform any configuration manually. See the procedure
- It can also be manually created. To do this, you must adapt the JavaScript code provided. See the procedure
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) next to the visual layout.
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">
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.
- config-url: Location of the evSH skin.
- quicklinks: Predictive text suggested to users.
- contextvars.shoptions: Public account when data must be made accessible to non-authenticated users.
- 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
See the procedure