Self Help Online Studio - Virtual Agent Layout Library
The virtual agent layout library is made up of several zones.
- (1) Name of the virtual agent's visual layout.
- (2) Library containing visual layouts.
- (3) Properties for defining the visual layout of the virtual agent in greater detail, e.g. font, size, color, etc.
- (4) Preview of the virtual agent's visual layout.
List of properties
Agent Name: Name of the virtual agent's visual layout.
- By default, the name is based on the type of layout selected.
example Selection of the Contrast layout ==> Name: Custom - Small Panel - Contrast
- You define the virtual agent name displayed in the interface using the Agent > Agent Display Name property.
Preset
List of virtual agent layouts.
- Click one of the templates to display its visual layout.
Used to display the visual layout of the virtual agent's login pane.
Used to display the visual layout of the conversation panel.
Login pane  |
Conversation panel  |
|---|---|
 |
 |
Shape
Used to select the way in which the virtual agent will be integrated in the app.
- Full Page: The virtual agent will occupy the entire Web page. No conversation panel will appear.
- Panel: The conversation panel will occupy the entire height of the Web page.
- EVSelf Help and Small Panel: The conversation panel will be floating and can be moved anywhere on the Web page.
- Click one of the templates to display its visual layout.
Body
Properties applied to the text of the conversation panel.
(1) Font Family: Font of the text.
(1) Font Size: Font size.
(2) Background Color: Background color of the conversation panel.
Portal Theme: Skin used in the side pane displaying the details of a procedure.
Header
Properties applied to:
- The top banner in the conversation panel
- The login pane
(1) Title: Title of the top banner.
Title Color: Text color.
Title Size: Font size.
Title Align: Alignment of the text.
(2) Header Color: Background color applied to:
- The banner
- The login button
(3) Close Icon: Color of the cross for closing the conversation panel and the login pane.
Agent
Properties applied to the display of the virtual agent's answers in the conversation panel, as well as keywords in the tag cloud.
(1) Agent Color: Main color applied to:
- The virtual agent icon or name in the header of each answer
- Hyperlinks in the conversation panel
- Every odd-numbered keyword in the tag cloud
Agent Display Name: Name of the virtual agent.
- If no name is specified, the
icon will be displayed by default.
(2) Alternative Color: Alternative color applied to every even-numbered keyword in the tag cloud, as well as to all keywords on hover.
(3) Agent Background: Background color of the virtual agent's answer field.
(4) Font Color: Color of font in the virtual agent's answer field.
User
Properties applied to the field displaying user questions.
In Service Apps apps with a virtual agent, these properties are also applicable to the predictive text suggested to users at the bottom of the conversation panel (1). 
See Virtual Agent widget > Panel > Quick Links.
(1) User Color: Color of font in the user question field.
(2) User Background: Background color of the user question field.
Text Input
Properties applied to data entry fields in:
- The login pane
- The footer of the conversation panel
(1) Bottom Background: Background color of the conversation panel footer.
Display Text Area: Used to indicate if a data entry field is displayed in the footer of the conversation panel (box is checked) or not (box is not checked).
Placeholder: The text displayed in the search field is automatically cleared once the user starts typing.
Use this field to help users enter data, for example, by indicating a type of question.
(2) Text Area: Color of font in the data entry fields.
(3) Text Area Background: Background color of the data entry fields.
(4) Text Area Border: Border type, color and width (in pixels) of the data entry fields.
(5) Submit Icon/Submit Button: Color of the icon for validating data entry and background color of the icon.
Enable Speech to Text (Chrome Only) (Note: Only for Chrome): Used to indicate if the speech-to-text functionality is enabled (box is checked) or not (box is not checked). If it is enabled, users can orally voice their questions which will then be transcribed automatically. If it is disabled, users must use the keyboard to enter their questions.
(6) Display Tags Icon: Used to indicate if the tag icon will be displayed (box is checked) or not (box is not checked). If the box is checked, you can modify the icon color in the Tag Icon property.