LLM Configuration
Configure a new chat connector via the Web UI.
Modify the following fields:
Field | Value | Explanation |
|---|---|---|
ChatbotUrl | http://acd-chat:4005/webhooks/rest/webhook | Point it to the GPT chatbot service. |
GPTModel | gpt-4o | For example. This is the newest GPT4o model. |
GPTAPIKey | xxxxxxx | Paste the GPT API Key here. |
GPTTemperature | 0,30 | For example. Lower is less lies and halucination, higher (up to 1.0) is more. |
GPTMaxAnswerTokens | 16384 | This is for GPT4o. Lookup the value for other models. |
GPTMaxTotalTokens | 128000 | This is for GPT4o. Currently we do not use this value. |
GPTPrompt | <the prompt> | Add the system prompt. See below, for an example. |
Example Prompt
Here is an example of the prompt:
Control Commands
It is possible to control the chat connector using control sequences. These are specified in the prompt for the LLM as follows: /control:<control_command>,<control_command>
The following commands are available:
Command | Example | Description |
|---|---|---|
askXXX |
| This command causes the chat connector to enter a data collection mode. It will use the configuration parameter askXXX - for example askEMail (from the code tab) to prompt the user for some input.
|
sayXXX |
| This command causes the chat connector to send a message to the user. |
stop |
| This command causes the chat connector to stop and close the chat session. |
agent |
| This command tries to transfer the chat to an agent, if possible. If no agent is available, the bot will remain connected and can respond to any inputs the user enters. As soon as an agent is found, the bot will be disconnected. |
runRoutingApplication |
| This causes the chat connector to run the routing application associated with the chat connector. See below for more details. |
pdata |
| This causes the chat connector to store a value in pdata. This can, for example, be used to differentiate what the routing application should do as the next step. See also below, “Running a Routing Application”. |
Running a Routing Application
When running an LLM bot, the routing application can be run in two different scenarios:
When a
control:runRoutingApplicationcommand is usedAt the end of the chat session, when it is closed
When the routing application is run, it is provided with $workdata variables as follows:
Variable | Example | Description |
|---|---|---|
| 1234 | The ID of the AcdEvent being processed. |
| askEMail,askCustomerNumber,sayThankYouGoodbye,stop | The last control action list processed by the chat connector. |
| 0 or 1 | If the chat is still active - i.e. the chat connector is processing a control action list and was instructed to run a routing application, then this variable will be 1. If the routing application is being run at the end of the chat, this variable will contain 0. This can be used to differentiate what the routing application should do. |
| The conversation history. | |
| 4 | The current index of the action being performed. Used internally by the chat connector. |
| The URL from the client which was used to open the chat connector. | |
| pdata | The type of the further data provided. |
| All further fields present in pdata. |
If the routing application uses the “Routing Result” object to return data, and the data contains valid json containing a pdata object, then all of the fields will be added to pdata. For example:
{
"pdata": {
"key1": "value1",
"key2": "value2"
}
}
Would cause the fields “key1” and “key2” to be added to pdata, with the values “value1” and “value2” respectively.
Configuration Parameters
On the Code tab of the chat connector configuration, the configuration of the chat connector can be changed.
Conversation Parameters
The following parameters influence the output of the chat connector in the chat window, and relate to the messages which are displayed at various points in the conversation.
Conversation parameters
The following parameters may be specified “as is”, in which case the language for the message will be determined from the setting in pdata - language and if this is not present, using the preferred language set in the user’s browser.
For example:
…
"welcomeMessage": "Hello this is your new chat connector",
"welcomeMessage#de": "Hallo und willkommen in Ihren neuen Chat-Connector"
…
Parameters affecting all Chats (normal and bots)
Parameter | Use |
|---|---|
| The message displayed if no agents are logged in for chat to the acd group specified in the chat connector when the chat is initially started (if it is a bot, the bot agent is not logged in) when the chat is initiated. |
| The message displayed if the chat is opened outside of opening times as defined in the ACD group - standard opening times. This message is also displayed if no response is received from the chatbot when the conversation is initiated. This usually means the chatbot connector is “down”. |
| The message displayed when the agent (or the chatbot) starts typing. |
| The message displayed if the agent closes the chat event. |
| The message displayed if no agents accept the chat within the timeout parameters specified in the chat connector when the first message is distributed to an available agent. This means either:
|
| The message displayed, if agents are logged in and the chat session therefore can be initiated. |
| The message displayed in the input box before the user starts typing the question. |
| The tag added to the conversation history variable For example:
|
| The tag added to the conversation history variable For example:
|
| The tag added to the conversation history variable For example:
|
| The tag added to the conversation history variable For example:
|
Example configuration:
{
"noAgents":"Sorry, currently there are no agents available. Please try again later.",
"noAgents#de":"Es tut uns leid, aber derzeit sind keine Agenten verfügbar. Bitte probieren Sie etwas später nochmal.",
"outOfService":"Sorry, but the service is not available at the moment.",
"outOfService#de":"Es tut uns leid, aber der Service steht derzeit nicht zu Verfügung.",
"agentTyping":"Agent $agent is typing...",
"agentTyping#de":"Agent $agent schreibt ...",
"bye":"Thank you for using our service. Goodbye.",
"bye#de":"Danke, dass Sie unseren Service genutzt haben. Auf Wiedersehen.",
"byeNoAgent":"Sorry, currently there are no agents available. Please try again later.",
"byeNoAgent#de":"Es tut uns leid, aber derzeit sind keine Agenten verfügbar. Bitte probieren Sie etwas später nochmal.",
"welcomeMessage":"Welcome!",
"welcomeMessage#de":"Herzlich willkommen!.",
"editorPlaceholder":"Enter your message here.",
"editorPlaceholder#de":"Geben Sie Ihre Nachricht hier ein."
}
Chat Implementation
The easiest way to implement the chat, is to copy the code from the “Code” page of the chat connector.
Here is an example html file:
<html>
<body>
<script src='https://acd-chat:3003/gui//chat.js'></script>
<script type="text/javascript">
JTEL_CHAT.initChat({
Hash: 'xxxxxxxxxx',
BaseWSURI: 'wss://acd-chat:3003',
BaseResourceURI: 'https://acd-chat:3003/gui', //optional
pdata: {name:'John Doe', email:'john.doe@example.com', sender:'John Doe', receiver:'My Chat Connector', userdata:'123456', userdata2:'userdata2', userdata3:'userdata3'} });
</script>
<p>Test Chat</p>
</body>
pdata Configuration
The pdata structure included in the initChat function is completely customisable. You can put whatever data is necessary in here. For example, if the user is authenticated in your web application, you might want to include the user name and email address, as the example configuration shows.
Language Override
The language used by the chat connector is determined by the setting of the user’s browser. However, it is possible to add a key to pdata to override the language of the chat connector. See the code below for an example of how to override the language to German:
<html>
<body>
<script src='https://acd-chat:3003/gui//chat.js'></script>
<script type="text/javascript">
JTEL_CHAT.initChat({
Hash: 'xxxxxxxxxx',
BaseWSURI: 'wss://acd-chat:3003',
BaseResourceURI: 'https://acd-chat:3003/gui', //optional
pdata: {
language: 'de',
name: 'John Doe',
email: 'john.doe@example.com',
sender: 'John Doe',
receiver: 'My Chat Connector',
userdata: '123456',
userdata2: 'userdata2',
userdata3: 'userdata3'
}
});
</script>
<p>Test Chat</p>
</body>
Overriding CSS and Images
Currently, it is not possible to upload images and CSS files via the web interface. Custom images and CSS files require access to the chat server.
Styling the Chat Dialog
Styling of the chat dialog is possible as shown in the example below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>JTELChat</title>
<script src='https://chatserver:3003/gui//chat.js'></script>
<script type="text/javascript">
JTEL_CHAT.initChat({
Hash: 'XXXXXXXXXX',
BaseWSURI: 'wss://chatserver:3003',
BaseResourceURI: 'https://chatserver:3003/gui', //optional
pdata: {
name: 'John Doe',
email: 'john.doe@example.com',
sender: 'John Doe',
receiver: 'My Chat Connector',
userdata: '123456',
userdata2: 'userdata2',
userdata3: 'userdata3'
},
chat: {
dialog: { width: '400px', height: '600px' },
button: {
borderRadius: "5px",
img: "images/customer_chat_open.svg",
imgClose: "images/customer_close.svg",
bottom: "16px",
right: "16px",
size: "48px",
visible: true
},
overrideCSS: 'css/customer_override.css'
}
});
</script>
</head>
The width and height of the resulting dialog can be changed using the dialog parameters.
The button parameters are used to specify where on the screen the chat icon should be displayed. The example shows positioning relative to the bottom right of the screen, but the following would be just as valid, positioning the button relative to the top / left of the screen.
button: {
borderRadius: "5px",
top: "16px",
left: "16px",
size: "48px",
visible: true
}
Overriding images
The chat open icon and close icon can be overridden as shown in the example above. Note: the images should be placed in or relative to the /ClientMessenger/public directory. Hence, in the example above, the images are in /ClientMessenger/public/images
Custom CSS
Under /ClientMessenger/public/chat/css create a file customer_override.css.
.chatColumnBorder {
border-left: 2px solid #551cf2;
border-bottom: 2px solid #551cf2;
border-right: 2px solid #551cf2;
border-radius: 0px 0px 5px 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-flex: 1;
-ms-flex: 1 1;
flex: 1 1;
}
Use the browsers dev tools to find out what you would like to change.
Customizing images/icons
Custom images are placed in /ClientMessenger/public/images and configured in the chat.button definition in the html file - see the example above.
Sending an EMail from the Routing Application
To send an email from the routing application, html format should be used in the E-Mail object. Here is an example:
<!DOCTYPE html>
<html>
<head>
<style>
/* Information Container Styles */
.infoContainer {
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
margin-bottom: 30px;
border-radius: 8px;
max-width: 600px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.infoContainer h2 {
margin-top: 0;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
color: #333;
border-bottom: 2px solid #ddd;
padding-bottom: 10px;
}
.infoItem {
display: flex;
margin: 10px 0;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.infoLabel {
flex: 0 0 150px;
font-weight: bold;
color: #555;
}
.infoValue {
flex: 1;
color: #333;
}
/* Existing Balloon Styles */
.balloonContainer {
padding: 4px;
min-height: 25px;
max-width: 90%;
min-width: 60%;
width: auto;
clear: both;
}
.leftBalloon {
border-radius: 5px;
color: black;
margin-bottom: 5px;
float: left;
margin-left: 15px;
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
background: rgba(0, 255, 0, 0.3);
}
.leftBalloonText {
font-size: 16px;
color: #2b0f0f;
word-wrap: break-word;
padding: 10px;
}
.rightBalloon {
border-radius: 5px;
margin-bottom: 5px;
float: right;
margin-right: 15px;
color: black;
box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
background: rgba(225, 245, 254, 0.92);
}
.rightBalloonText {
font-size: 16px;
color: #2b0f0f;
word-wrap: break-word;
padding: 10px;
}
.rightFloated {
display: block;
float: right;
}
.senderName {
color: #f17735;
font-size: 9px;
font-weight: bold;
}
/* Clearfix */
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<!-- Information Container -->
<div class="infoContainer">
<h2>Conversation Details</h2>
<div class="infoItem">
<span class="infoLabel">AcdEventsID:</span>
<span class="infoValue">$workdata.AcdEventsID</span>
</div>
<div class="infoItem">
<span class="infoLabel">Email:</span>
<span class="infoValue">$workdata.EMail</span>
</div>
<div class="infoItem">
<span class="infoLabel">Customer Number:</span>
<span class="infoValue">$workdata.CustomerNumber</span>
</div>
</div>
<!-- Conversation History -->
<h3>Conversation History:</h3>
$workdata.ConversationHistory
</body>
</html>