Virtual Agent Layout Library


From:
  • Service Apps: versions Autumn 2020 - Build 2020.2.124.2 and later.
  • Self Help: versions Autumn 2020 - Build 2020.2.108.7 and later.

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.

         Virtual agent layout library.png

List of properties

Agent Name: Name of the virtual agent's visual layout.

  • Note: This name is not used in Service Apps because only one visual layout can be defined in a given app.
  • By default, the name is based on the type of layout selected.

    example  Selection of the Contrast layout ==> Name: Custom - Small Panel - Contrast

  • Note: You define the virtual agent name displayed in the interface using the Agent > Agent Display Name property.
             Virtual agent display name.png

Preset

List of virtual agent layouts.

  • Click one of the templates to display its visual layout.
    • Visual appearance preview - Login icon.png Used to display the visual layout of the virtual agent's login pane.
    • Visual appearance preview - Conversation icon.png Used to display the visual layout of the conversation panel.
Login pane   Visual appearance preview - Login icon.png Conversation panel   Visual appearance preview - Conversation icon.png
Visual appearance preview - Login preview.png Visual appearance preview - Conversation preview.png

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.

         Template - Body properties.png

(1) Font Family: Font of the text.

(1) Font Size: Font size.
Note: The size of a keyword is also determined by its frequency, i.e. the number of occurrences in all virtual agent procedures.

(2)  Background Color: Background color of the conversation panel.

Portal Theme: Skin used in the side pane displaying the details of a procedure.
         Template - Body properties - Portal theme.png

Header

Properties applied to:

  • The top banner in the conversation panel
  • The login pane

         Template - Header properties.png

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

         Template - Agent properties.png

(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 Agent name icon.png icon will be displayed by default.
             Template - Agent properties - Agent name.png

(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.
Note: You define the font and font size in the Body section.

User

Properties applied to the field displaying user questions.

Note: 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).  Open url.png See Virtual Agent widget > Panel > Quick Links.

         Template - User properties.png

(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
             Template - Text input properties.png
     

(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).
         Template - Text input properties - Display area.png

Placeholder: The text displayed in the search field is automatically cleared once the user starts typing.

Best Practice icon.png 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.
         Template - Text input properties - Enable Speech to Text.png

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

Tags:
Last modified by Unknown User on 2021/04/19 12:35
Created by Administrator XWiki on 2020/12/07 11:12

Shortcuts

Powered by XWiki ©, EasyVista 2021