Service Desk Chat JS Integration Guide
Service Desk Chat (sdc/js) is a JavaScript library that facilitates chat functionality on your website, enabling communication between website visitors and agents through a dedicated relay server.
Functions
- init(initRequestOpts)
-
- Description: Initializes the sdc library with the relay server URL, http transport type, http headers, color palettes, and language settings.
- Parameters:
- initRequestOpts (InitChatRequest): Options to init the sdc library.
- Returns: (Promise<boolean>) A Promise that resolves to true if the initialization is successful, and false if there is a failure.
- openChatWindow(options)
-
- Description: Opens the chat window with specified visitor options. Also offers the possibility to maximize the chat window again after minimization.
- Parameters:
- options (object): Visitor information and chat settings (optional).
- Returns: Promise<void> None
- closeChatWindow()
-
- Description: Closes the chat window and disconnects from the relay.
- Returns: None
- logout()
-
- Description: Clears or removes any stored session data within the sdc library. Closes the chat window and disconnects from the relay.
- Returns: None
Events
The following events are triggered without further data.
- “ltg.sdc.OpenedChatWindow”: This event is sent when the chat window has been opened and is visible.
- “ltg.sdc.MinimizeWindow”: This event indicates that the window has been minimized. When the window is minimized, the connection to the relay is not interrupted.
- “ltg.sdc.CloseWindow”: This event is triggered when the window is closed. The connection to the relay is disconnected when the window is closed.
- “ltg.sdc.NewMessage”: This event is triggered by incoming messages and can be intercepted if necessary.
All events could be intercepted as follows.
window.addEventListener("{eventName}", () => {
// your logic
});
InitChatRequest Object
The initRequestOpts object passed to init(initRequestOpts) contains properties to init the sdc library.
- address (string): URL of the relay server.
- transportType (number | signalR.HttpTransportType): Http transport type for hub connection. Number 1 for transport type WebSockets. Number 4 is for LongPolling.
- headers (Headers): Optional http headers for hub connection. Only available if transport type is LongPolling.
- customPalettes (object): Color palettes for UI customization. U can use the angular material palettes (Color – Style – Material Design) or you can add your own customized palettes like in the example below.
- language (string): Language setting for chat. (e.g., „en-GB“)
- keepAliveIntervalInMilliseconds (number): This is the time interval at which the client sends a „Keep-Alive“ message to the server to keep the connection active, even if no data is exchanged.
- serverTimeoutInMilliseconds (number): This interval defines how long the client waits before considering the server connection as timed out and closing it due to inactivity.
Example:
var initRequest = {
address: "http://localhost:5001",
transportType: 4,
headers: headers,
customPalettes: palettes,
keepAliveIntervalInMilliseconds: 2000,
serverTimeoutInMilliseconds: 10000
}
const initialized = await ltgsdc.init(initRequest);
Headers Object
The headers object is a key value pair.
For example:
{
"Custom-Header": "test_header"
}
Options Object
The options object passed to openChatWindow(options) contains various properties to customize the visitor’s interaction:
- firstName (string): First name of the visitor.
- lastName (string): Last name of the visitor.
- emailAddress (string): Email address of the visitor.
- language (string): Language setting for chat (e.g., „en-GB“) (optional).
- ticketNumber (string): Ticket number or identifier for reference (optional).
Example:
var options = {
firstName: "TEST",
lastName: "TEST",
emailAddress: "TEST@TEST.test",
language: "en-GB",
ticketNumber: "INC00058"
};
Chat Button Implementation Clarification
The chat button (‘#ltg-sdc-create-chat’) demonstrated in the integration guide is not part of the sdc library product itself. It serves as an example HTML element provided for demonstration purposes. Website owners are responsible for implementing their own chat button or widget UI within their HTML structure to trigger the ‘openChatWindow()’ function.
For effective integration, website owners should customize and integrate their chat button or widget according to their website’s design and user experience preferences. The provided HTML structure for the chat button (‘#ltg-sdc-create-chat’) should be adapted and bound to the ‘ltgsdc.openChatWindow(options)’ function to initiate the chat functionality when clicked by the visitor.
Simple example
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="{relayServerUrl}/sdc/js"></script>
</head>
<body>
<p>
TEST External Relay Website
</p>
<button id="ltg-sdc-create-chat">Create Chat</button>
<button id="ltg-sdc-close-chat">Close Chat</button>
<button id="ltg-sdc-logout">Logout</button>
<script>
document.addEventListener("DOMContentLoaded", async function () {
var options = {
firstName: "TEST",
lastName: "TEST",
emailAddress: "TEST@TEST.test",
// language: "en-GB",
// ticketNumber: "INC00058"
};
var palettes = { isDark: false, primaryPalette: 'purple', accentPalette: 'indigo', warnPalette: 'red', backgroundPalette: 'grey' }
var initRequest = {
address: "http://localhost:5001",
transportType: 1,
customPalettes: palettes
}
const initialized = await ltgsdc.init(initRequest);
console.log("initialized", initialized);
document.getElementById("ltg-sdc-create-chat").addEventListener("click", () => {
ltgsdc.openChatWindow(options);
});
document.getElementById("ltg-sdc-close-chat").addEventListener("click", () => {
ltgsdc.closeChatWindow();
});
document.getElementById("ltg-sdc-logout").addEventListener("click", () => {
ltgsdc.logout();
});
});
</script>
</body>
</html>
Simple example with custom palettes
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="{relayServerUrl}/sdc/js"></script>
<style>
/* simple example with custom palettes and not many CSS changes */
.ltg-sdc-root .ltg-sdc-chat-message-system .ltg-sdc-chat-message {
background-color: #717171 !important;
color: #fff !important;
}
.ltg-sdc-root .ltg-sdc-chat-message-wrapper-them .ltg-sdc-chat-message {
background-color: #1952AD !important;
color: #fff !important;
}
</style>
</head>
<body>
<p>
TEST External Relay Website
</p>
<button id="ltg-sdc-create-chat">Create Chat</button>
<button id="ltg-sdc-close-chat">Close Chat</button>
<button id="ltg-sdc-logout">Logout</button>
<script>
document.addEventListener("DOMContentLoaded", async function () {
var options = {
firstName: "TEST",
lastName: "TEST",
emailAddress: "TEST@TEST.test",
// language: "en-GB",
// ticketNumber: "INC00058"
};
// simple example with custom palettes
var primaryPalette = {
'50': 'e3eaf5',
'100': 'bacbe6',
'200': '8ca9d6',
'300': '5e86c6',
'400': '3c6cb9',
'500': '1952ad',
'600': '164ba6',
'700': '12419c',
'800': '0e3893',
'900': '082883',
'A100': 'b2c2ff',
'A200': '7f99ff',
'A400': '4c71ff',
'A700': '325dff',
'contrastDefaultColor': 'light',
'contrastDarkColors': [
'50',
'100',
'200',
'300',
'A100',
'A200'
],
'contrastLightColors': [
'400',
'500',
'600',
'700',
'800',
'900',
'A400',
'A700'
]
};
var accentPalette = {
'50': '174b9e',
'100': '174b9e',
'200': '174b9e',
'300': '174b9e',
'400': '174b9e',
'500': '174b9e',
'600': '174b9e',
'700': '174b9e',
'800': '174b9e',
'900': '174b9e',
'A100': '174b9e',
'A200': '174b9e',
'A400': '174b9e',
'A700': '174b9e',
'contrastDefaultColor': 'light',
'contrastDarkColors': [
'50',
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900',
'A100',
'A200',
'A400',
'A700'
],
'contrastLightColors': []
};
var backgroundPalette = {
'50': 'fdfdfd',
'100': 'f9f9f9',
'200': 'f5f5f5',
'300': 'f1f1f1',
'400': 'eeeeee',
'500': 'ebebeb',
'600': 'e9e9e9',
'700': 'e5e5e5',
'800': 'e2e2e2',
'900': 'dddddd',
'A100': 'ffffff',
'A200': 'ffffff',
'A400': 'ffffff',
'A700': 'ffffff',
'contrastDefaultColor': 'light',
'contrastDarkColors': [
'50',
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900',
'A100',
'A200',
'A400',
'A700'
],
'contrastLightColors': []
};
var palettes = {
primaryPalette: primaryPalette,
accentPalette: accentPalette,
warnPalette: 'red',
backgroundPalette: backgroundPalette
}
var initRequest = {
address: "http://localhost:5001",
transportType: 1,
customPalettes: palettes
}
const initialized = await ltgsdc.init(initRequest);
console.log("initialized", initialized);
document.getElementById("ltg-sdc-create-chat").addEventListener("click", () => {
ltgsdc.openChatWindow(options);
});
document.getElementById("ltg-sdc-close-chat").addEventListener("click", () => {
ltgsdc.closeChatWindow();
});
document.getElementById("ltg-sdc-logout").addEventListener("click", () => {
ltgsdc.logout();
});
});
</script>
</body>
</html>
Complex example with custom palettes
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="{relayServerUrl}/sdc/js"></script>
<style>
/* complex example with many CSS changes */
.ltg-sdc-root .ltg-sdc-relay-window {
background-color: #EBEBEB !important;
}
.ltg-sdc-root .ltg-sdc-chat-footer {
background-color: transparent !important;
}
.ltg-sdc-root .ltg-sdc-chat-footer svg {
fill: #1952AD !important;
}
.ltg-sdc-root .ltg-sdc-chat-message-system .ltg-sdc-chat-message {
background-color: #525252 !important;
color: #fff !important;
}
.ltg-sdc-root .ltg-sdc-chat-message-wrapper-them .ltg-sdc-chat-message {
background-color: #1952AD !important;
color: #fff !important;
}
.ltg-sdc-root .ltg-sdc-chat-actions {
background-color: #C4C4C4 !important;
color: black !important;
}
.ltg-sdc-root .ltg-sdc-chat-actions-button svg {
fill: black !important;
}
.ltg-sdc-root .ltg-sdc-close-wizard-header > md-content {
background-color: transparent !important;
}
</style>
</head>
<body>
<p>
TEST External Relay Website
</p>
<button id="ltg-sdc-create-chat">Create Chat</button>
<button id="ltg-sdc-close-chat">Close Chat</button>
<button id="ltg-sdc-logout">Logout</button>
<script>
document.addEventListener("DOMContentLoaded", async function () {
var options = {
firstName: "TEST",
lastName: "TEST",
emailAddress: "TEST@TEST.test",
// language: "en-GB",
// ticketNumber: "INC00199"
};
var primaryPalette = {
'50': 'e3eaf5',
'100': 'bacbe6',
'200': '8ca9d6',
'300': '5e86c6',
'400': '3c6cb9',
'500': '1952ad',
'600': '164ba6',
'700': '12419c',
'800': '0e3893',
'900': '082883',
'A100': 'b2c2ff',
'A200': '7f99ff',
'A400': '4c71ff',
'A700': '325dff',
'contrastDefaultColor': 'light',
'contrastDarkColors': [
'50',
'100',
'200',
'300',
'A100',
'A200'
],
'contrastLightColors': [
'400',
'500',
'600',
'700',
'800',
'900',
'A400',
'A700'
]
};
var accentPalette = {
'50': '174b9e',
'100': '174b9e',
'200': '174b9e',
'300': '174b9e',
'400': '174b9e',
'500': '174b9e',
'600': '174b9e',
'700': '174b9e',
'800': '174b9e',
'900': '174b9e',
'A100': '174b9e',
'A200': '174b9e',
'A400': '174b9e',
'A700': '174b9e',
'contrastDefaultColor': 'light',
'contrastDarkColors': [
'50',
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900',
'A100',
'A200',
'A400',
'A700'
],
'contrastLightColors': []
};
var backgroundPalette = {
'50': 'fdfdfd',
'100': 'f9f9f9',
'200': 'f5f5f5',
'300': 'f1f1f1',
'400': 'eeeeee',
'500': 'ebebeb',
'600': 'e9e9e9',
'700': 'e5e5e5',
'800': 'e2e2e2',
'900': 'dddddd',
'A100': 'ffffff',
'A200': 'ffffff',
'A400': 'ffffff',
'A700': 'ffffff',
'contrastDefaultColor': 'light',
'contrastDarkColors': [
'50',
'100',
'200',
'300',
'400',
'500',
'600',
'700',
'800',
'900',
'A100',
'A200',
'A400',
'A700'
],
'contrastLightColors': []
};
var palettes = {
primaryPalette: primaryPalette,
accentPalette: accentPalette,
warnPalette: 'red',
backgroundPalette: backgroundPalette
}
var initRequest = {
address: "http://localhost:5001",
transportType: 1,
customPalettes: palettes
}
const initialized = await ltgsdc.init(initRequest);
console.log("initialized", initialized);
document.getElementById("ltg-sdc-create-chat").addEventListener("click", () => {
ltgsdc.openChatWindow(options);
});
document.getElementById("ltg-sdc-close-chat").addEventListener("click", () => {
ltgsdc.closeChatWindow();
});
document.getElementById("ltg-sdc-logout").addEventListener("click", () => {
ltgsdc.logout();
});
});
</script>
</body>
</html>