WebChat channels

Updated at October 17th, 2025

+ More

Table of Contents

WebChat Module Overview Creating a WebChat Channel General WebChat Settings WebChat Queue & Input Settings IVR Channel Configuration for WebChat Testing Webchat Adding Webchat to your website

WebChat Module Overview

The WebChat Module allows Halo admins to define and manage WebChat channels that route conversations to a specific Router.

✔ Specific settings are configured in the Halo Management Console managed by Cirrus.

Creating a WebChat Channel

Navigate to Explorer Pane > WebChat Channels.
Click Add to create a new WebChat Channel.
Configure the following settings:

General WebChat Settings

Field	Description
Name	Enter a unique name for the WebChat Channel (used in the URL).
Title	The title bar text displayed in the web browser.
Default Router	Select a Router for WebChat routing (if no channel is provided in the URL or IVR channels).
Routing Type	Define routing mode: Push (assigned to an available agent) Pick From Queue (agent selects chat manually).
Allow Attachments	Enables a paperclip icon, allowing customers to send attachments.

✔ The Default Router also determines WebChat availability notifications:

Clock Closed – If the system clock is closed.
Queue Full – If no more slots are available.
No Agent Available – If no agents are online.

WebChat Queue & Input Settings

Setting	Functionality
Wait for Input	WebChat is queued only if the customer starts typing.
No Input Timeout (min)	If the customer is inactive, the system sends a warning message before ending the chat.
No Input Prompt	Displays a notification message when the customer has been idle for too long.

IVR Channel Configuration for WebChat

✔ Create a new IVR Channel under Voice-Channels with type WebChat.
✔ Assign it to the WebChat Channel created earlier.
✔ We recommend starting with a clock. It makes it easy to open and close your webchat at the right times. When your chat is open, link the prompts, menus, or Routers that should be available as part of the customer experience. When your chat is closed, choose the application prompt you want customers to see.

Testing Webchat

✔ To access a WebChat page, redirect your browser to:

https://<portalname>.cirrusconnects.ai/webchat/<WebChat channelname>

Adding Webchat to your website

Send your website domain(s) to Cirrus to be whitelisted
Insert your portal name in the sections highlighted yellow e.g. https://NAME.cirrusconnects.ai/
Insert your webchat channel name in the section highlighted green
Further customisations:
1. showChatButton - wording for the launcher can be adjusted
2. Delay (in seconds) before showing the webchat launcher highlighted in pink
3. Additional customisations to the following included in the snippet:
  1. chatButton
  2. chatHeader
  3. chatHeaderButton
4. Advanced Style Sheet Access - this can be supplied by Cirrus upon request

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<script>
customer_url = '<portal_name>';
chat_channel = '<webchat channel name>';
const awaitTimeout = (delay, reason) =>
 new Promise((resolve, reject) =>
 setTimeout(
 () => (reason === undefined ? resolve() : reject(reason)),
 delay
 )
 );
const wrapPromise = (promise, delay, reason) =>
 Promise.race([promise, awaitTimeout(delay, reason)]);
function loadScript(scriptUrl) {
 const script = document.createElement('script');
 script.src = scriptUrl;
 document.body.appendChild(script);
 return new Promise((res, rej) => {
 script.onload = function () {
 res();
 }
 script.onerror = function () {
 rej();
 }
 });
}
window.onload = function () {
 wrapPromise(loadScript('<portal_name>/webchat/js/webchat.js'), 3000, {
 reason: 'Fetch timeout',
 })
 .then(data => {
 console.log('Script loaded!');
 setChatURL('<portal_name>/webchat');
 setChatChannel('Webchat - Prod');
 setChatLanguage('en-GB');
 createChatIFrame();
 showChatButton('Click here to chat with us', 5, true, 'fa fa-comment-o');
 restoreChat();
 })
 .catch(data => console.log(`Failed with reason: ${data.reason}`));
};
</script>
 <style>
 .chatButton {
 background: #0b4060;
 position: fixed !important;
 right: 10px;
 bottom: -30px;
 top: auto !important;
 z-index: 99;
 width: 400px;
 height: 30px;
 resize: both;
 display: block;
 border-style: none;
 padding-bottom: 0px;
 cursor: pointer;
 color: white;
 font-size: 16px;
 font-weight: 400;
 }
 .chatHeader {
 background: #0b4060;
 border-width: thin;
 }
 .chatHeaderButton {
 color: white;
 font-family: Consolas;
 }
 </style>
</html>

Contact Us