Installation and Configuration

Overview

Before configuring the extension in the Service Desk application, you need to define the knowledge sources for the AI chatbot, configure the look and feel of the chat, adjust the position of the chat on the screen and the chatbot name, and adjust how the user names and live agent names will be shown in the chat. All this is done through the Conversational AI administration portal.

For more details about the Conversational AI administration portal, see Efecte Chat for Service Management guide.

Knowledge Sources Configuration

The processed data sources are specified in the Conversational AI administrator portal → Projects → AI Chatbot → Knowledge sources:

AI chatbot knowledge sources.png

For more details about the portal configuration, visit How to set up your Chatbot page.

Adding sources

AICore portal integrates with various platforms, such as SharePoint, Confluence, external links to the online help platforms, or Matrix42 Knowledge Base, consolidating information from multiple sources:

AICore configuration Matrix42 Knowledge Base.png
AICore portal: integration with Matrix42 Enterprise Knowledge Base configuration example

For instance, to integrate Matrix42 Enterprise Knowledge Base, it is necessary to have an API Token that can be generated by the Matrix42 ESM administrator. See also, Web Services tokens: Generate API Token.

For more details on various knowledge sources configuration, see:

M42 Intelligence: AI Knowledge Discovery
Data Sources section in the AI Core portal Docs.

Connecting portals

To process the data from the specified knowledge sources, the AICore should be connected to Conversational AI administrator portal by adjusting the settings in Projects → AI Chatbot → AI Core Configurations and Secrets.

Agent Console Users

The Agent Console URL is a portal where the Agents can browse active chats and chat history. The data from this portal is shown in the Agent Console of the Service Desk → Notifications area. To access the Agent Console, additional credentials are required.

Agent Console users are managed in the Conversational AI administrator portal:

In the Conversational AI administrator portal, open Users → Users list
Use + Create an agent action
Fill out the Name and E-mail address of the new agent user. One Agent user can be created per e-mail address.

The login credentials are sent to the specified email.

Agent Console edit agent user.png

Conversational AI portal: edit agent user example

The name of the user specified in the Conversational AI portal will be shown as an Agent name in the live chat:

Agent Name1.png
Self Service Portal: chat with a live Agent, and the Agent's name example

For more details, see also Chat User Management.

Adjusting Look & Feel

Showing the user name in live chat

By default, the chat Agents do not see the name of the person they are chatting with. Each new conversation is entitled by a generated and automatically assigned user number:
Agent Console Live Chat no user name1.png

The Agent can see the End User name in the live chat when the M42 Enterprise authentication is enabled:

KD for end users authentication enabled1.png

To enable the M42 Enterprise authentication, apply the following configuration:

In the Conversational AI administrator portal, open Projects → AI Chatbot → Advanced → M42 Enterprise authentication
Select the Enable authentication checkbox
In Authentication URL , adjust the following URL by changing the placeholder to your Matrix42 Enterprise instance:
https://{my_Martix42Enterprise_URL}/m42Services/api/userinfo

The configuration for https://m42.imagoverum.com/m42Services/api/userinfo might look as follows:

CAI_M42 Enterprise authentication enabled1.png

Styling the chat for the Self Service Portal

To make the chat widget blend more naturally with the New Look of the Matrix42 Self Service Portal, you can adjust its appearance through the Conversational AI administrator portal → Projects → AI Chatbot → Look and CSS Settings sections. Change the default values in these sections to the values from the ESM, which can be found via the following paths:

Theme: in the ESM Administration application → User Interface →Theme → Select default for New Look Theme and click Edit → all colors are listed here. See also Themes.
CSS var could be found in the following way: in the ESM, open DEV-tools on UUX page in Web-browser (right button click on the page → Inspect) → Select the very first root <html> element in Elements-tab → Find in Styles-tab the full list of CSS variables.

Look

In the Look configuration, adjust the Base Color and Font name as follows:

Base color: could be the same as value in the ESM Administration application → User Interface →Theme → Accent Colors → Primary Color

Font name: Roboto,"Helvetica Neue",sans-serif

CSS settings

Adjust the following default values with the custom values from ESM Theme or CSS var:

AI Chatbot Styling_CSS Settings.png

The configuration below is customized for the default New Look Theme from the ESM Administration application → User Interface →Theme.

Variable name	Default value	Custom value	Custom value source
`$BaseColor`	`#0066B2`	`#007be7`	Primary Color `CSS: var(--mx-active-color)`
`$ContrastToBaseColor`	`#ffdd57`	`#ffc30d`
`$ButtonPrimaryBackground`	`$BaseColor`	`$BaseColor`
`$ButtonLinkBackground`	`mix(white, $ButtonLinkColor, 93%)`	`mix(white, $ButtonLinkColor, 95%)`
`$ButtonLinkRadius`	`5px`	`16px`
`$HomePanelRadius`	`10px`	`16px`
`$TextColor`	`#5d5d5d`	`#383d51`	Theme: Base Colors → Content → Text Color `CSS: var(--mx-content-text-color)`
`$ButtonPadding`	`15px`	`16px`
`$ButtonBackgroundTo`	`lighten($ButtonColor, 9)`	`$ButtonColor`
`$ButtonWidth`	`60px`	`48px`
`$ButtonHeight`	`60px`	`48px`
`$ButtonHideColor`	`#fff`	`#ffffff`
`$HeaderColor`	`#fff`	`$TextColor`
`$HeaderBackgroundFrom`	`$ModuleTitleTabColor`	`#ffffff`	Theme: Base Colors → Content → Background Color `CSS: var(--mx-content-bg-color)`
`$HeaderBackgroundTo`	`lighten($ModuleTitleTabColor, 5)`	`#ffffff`	Theme: Base Colors → Content → Background Color `CSS: var(--mx-content-bg-color)`
`$HeaderAvatarBorderColor`	`#fff`	`#ffffff`	Theme: Base Colors → Content → Background Color `CSS: var(--mx-content-bg-color)`
`$HeaderButtonColor`	`#fff`	`#4d596b`	Theme: Base Colors → Content → Icon Color `CSS: var(--mx-content-icon-color)`
`$HeaderButtonHoverBackground`	`darken($ModuleTitleTabColor, 7)`	`#e7f4fb`	Theme: Accent Colors → 10% of Button Color `CSS: color-mix(in srgb, var(--mx-btn-color) 10%, transparent)`
`$ModuleWidth`	`410px`	`432px`
`$BalloonRadius`	`15px`	`16px`
`$ModuleShadowSize`	`20px`	`32px`
`$BorderRadius`	`10px`	`16px`
`$InputSmallRadius`	`2px`	`16px`
`$InputNormalRadius`	`4px`	`16px`
`$MainInputOutlineWidth`	`1px`	`2px`	Theme: Accent Colors → 10% of Button Color
`$MainInputRadius`	`100px`	`18px`
`$MainInputRestRadius`	`100px`	`18px`
`$MainInputAutocompleteRadius`	`5px`	`16px`
`$MainInputEmojiModalRadius`	`10px`	`16px`
`$MainBackground`	`#fdfdfe`	`#fdfdff`	`CSS: var(--mx-input-bg)`
`$LoadingBackgroundFrom`	`lighten($ModuleTitleTabColor, 5)`	`#edf3fd`	`CSS: var(--mx-supplementary-bg-color-enhanced)`
`$LoadingBackgroundTo`	`lighten($ModuleTitleTabColor, 5)`	`#edf3fd`	`CSS: var(--mx-supplementary-bg-color-enhanced)`
`$LoadingCircle1Background`	`transparentize (lighten($LoadingBackgroundFrom, 6), 0.1)`	`transparentize (lighten($LoadingBackgroundFrom, 6), 0.5)`
`$LoadingCircle2Background`	`transparentize(lighten ($LoadingBackgroundTo, 4), 0.1)`	`transparentize(lighten ($LoadingBackgroundTo, 4), 0.5)`
`$LinkColor`	`#3273dc`	`$BaseColor`
`$CarouselItemRadius`	`10px`	`16px`
`$MessageRadius`	`5px`	`12px`
`$MessageInBorder`	`#e9e9e9`	`#edf3fd`	`CSS: var(--mx-supplementary-bg-color-enhanced)`
`$MessageOutBackground`	`#eceff1`	`#edf3fd`	`CSS: var(--mx-supplementary-bg-color-enhanced)`
`$MessageLinkFontWeight`	`normal`	`500`
`$NotificationRadius`	`10px`	`16px`
`$ScrollBarThumbBackground`	`rgba(0, 0, 0, 0.45)`	`#bdbfc6`	Scrollbar Thumb color from UUX (`CSS var(--mx-scrollbar-color)`)

Install Extension

The Matrix42 Enterprise Administrator can install Knowledge Discovery for End Users from the Extension Gallery.

Activate

After installation, the Knowledge Discovery for End Users should be activated and configured via Service Desk → Settings → Knowledge Discovery for End Users.

In Enabled, select the checkbox to activate the extension and fill out the following fields:

Conversational AI URL
Agent Console URL
Installation ID
Space ID

The Conversational AI URL, Installation ID, and Space ID are available in the individual environment, as described on the Configuring Efecte Chat to ESS page.

The Agent Console URL is a portal where the Agents can browse active chats and chat history.

Knowledge_Discovery_for_End_User_Service_Desk_Settings_1.png

Knowledge Discovery for End Users configuration in Service Desk Settings

Click Save & Close to proceed.