Live Chat Widget Configuration

Support Portal provides a configurable live chat widget that can be embedded on any website to establish a real-time communication channel between your organization and its end users. This article covers the full configuration surface — from initial inbox creation through visual customization, operational availability settings, dark mode, and SDK-level deployment.

Operational objective

The live chat widget serves as a front-line engagement layer for web properties. Proper configuration ensures that the widget reflects your organization's branding, operates within defined availability windows, and routes conversations to the correct agent pool. For regulated environments — government portals, telecom self-service sites, financial institutions — these settings also control the initial data collection posture and after-hours messaging behavior.

Browser and platform support

The live chat widget and the Support Portal dashboard are compatible with current versions of all major browsers.

Mobile applications are supported on Android 5.0+ and iOS 11.0+.

Creating a website inbox

Before configuring widget settings, you must create a website inbox that serves as the container for the channel. Navigate to Settings > Inboxes and select Add Inbox, then choose the Website channel type.

The creation interface presents the following parameters:

After providing the required parameters, select Create Inbox. The next step prompts you to assign agents.

Assigning agents to the inbox

Conversations are routed only to agents associated with the inbox. Even administrators must be explicitly added as collaborators to receive conversations from a given inbox.

Select agents from the dropdown and confirm the assignment. Agent rosters can be modified at any time from the Collaborators tab in the inbox settings (see below). For guidance on creating agent accounts, see Agents.

Widget deployment

Once the inbox is created, Support Portal generates a JavaScript snippet for embedding the widget on your website. Navigate to Settings > Inboxes, select the inbox, and open the Configuration tab.

Copy the snippet and place it in the root HTML template of your website — typically before the closing </body> tag. In enterprise deployments, this snippet is often managed through a tag manager or included in a shared layout template that spans multiple properties.

For telecom operators managing multiple web properties (e.g., consumer portal, dealer portal, corporate self-service), each site typically maps to a separate inbox with its own widget configuration. This ensures that conversations are routed to the correct operational team and that the widget appearance matches each property's branding.

Widget settings reference

After creating the inbox, the full range of configuration options becomes available. Navigate to Settings > Inboxes, locate the website inbox, and select the gear icon to open its settings.

General settings

The Settings tab provides controls for the core widget behavior.

Key options on this tab include:

Email collection — Enabled by default. When active, the widget prompts visitors to provide an email address at the start of a conversation. This supports contact identification and follow-up workflows. Organizations that prefer anonymous initial interactions (e.g., government complaint portals where anonymity is required) can disable this setting.

CSAT surveys — When enabled, a satisfaction survey is presented to the visitor each time a conversation is resolved. Survey results are aggregated in the Reports section. See Reports for details on interpreting CSAT data.

Select Update to persist any changes made on this tab.

Collaborators

The Collaborators tab controls which agents have access to this inbox and whether automatic conversation assignment is active.

When automatic assignment is enabled, incoming conversations are distributed among the agents associated with this inbox based on the configured routing logic. Disabling automatic assignment places all new conversations in the unassigned queue, where agents or supervisors can claim them manually — a pattern common in regulated environments that require human triage before assignment.

Business hours

The Business Hours tab defines the operational availability window for this inbox. Enable the Business availability toggle to activate scheduling.

Once enabled, configure the following:

Availability schedule — For each day of the week, set the opening and closing hours along with the applicable time zone. Days left unchecked are treated as non-operational.

Unavailability message — Define the message displayed to visitors who initiate a conversation outside of configured business hours. This message should set clear expectations about response timing (e.g., "Our team is available Monday through Friday, 08:00–18:00 CET. Your message has been received and will be addressed during the next business day.").

When an AI Module is active on the inbox, the unavailability message is suppressed during AI-handled sessions. The message is only sent if the AI Module transfers the conversation to a human agent or if no AI Module is configured. See Agentbot Configuration for details on AI Module behavior during off-hours.

For government institutions operating across multiple time zones or with varying holiday schedules, business hours can be configured independently per inbox — allowing a single Support Portal workspace to serve regional offices with different availability windows.

Select Update Business Hour Setting to save.

Pre-chat form

The Pre Chat Form tab allows you to collect visitor information before the conversation begins. This is particularly useful in environments where identification is required before an agent engages — for example, telecom support portals that need an account number or government services that require a case reference.

Enable the pre-chat form and configure the following:

Pre-chat message — An introductory message explaining why information is being collected (e.g., "To assist you efficiently, please provide the following details.").

Form fields — The standard fields include Name, Email, and Phone. Additional fields can be added by creating custom attributes first — see Custom Attributes — which then become available as selectable form fields.

Each field can be marked as required or optional, giving you control over the data collection posture. Select Update to activate the form.

Widget builder

The Widget Builder tab provides a visual interface for customizing the widget's appearance. Changes are previewed in real time within the builder.

Available customization options include the widget bubble position, style, and the launcher icon. For organizations deploying the widget across multiple branded properties — such as a telecom operator with consumer and enterprise portals — the widget builder ensures each deployment can match the target site's visual language without code changes.

Dark mode configuration

The live chat widget supports automatic dark mode, adapting its appearance to match the visitor's operating system or browser theme preference. This is configured through the SDK settings rather than the inbox UI.

To enable dark mode, add the darkMode parameter to the altoresSettings object in your widget deployment code:

window.altoresSettings = {
  // ... other settings
  darkMode: "auto",
};

The darkMode parameter accepts the following values:

For government or enterprise portals that enforce a specific visual theme, setting darkMode to light ensures consistent appearance regardless of individual device settings. For consumer-facing sites where user preference is prioritized, auto provides a seamless experience.

SDK settings overview

The JavaScript snippet generated during inbox creation supports additional configuration through the altoresSettings object. This object is defined in the global scope before the widget script loads and controls runtime behavior such as dark mode (documented above), locale, widget position, and custom launcher behavior.

window.altoresSettings = {
  darkMode: "auto",
  position: "right",
  locale: "en",
  // Additional SDK parameters as needed
};

For a complete reference of available SDK parameters, see Sdk Setup.

Enterprise deployment considerations

Multi-site deployments — Telecom operators and large enterprises often deploy live chat across several web properties. Each property should map to a dedicated inbox with its own widget configuration, agent roster, and business hours. This ensures clean conversation routing and per-site reporting. The widget snippet is unique per inbox, so each site receives the correct configuration automatically.

Brand-consistent theming — Government portals and regulated institutions typically have strict visual identity requirements. Use the Widget Color setting and Widget Builder to match official color schemes, and set darkMode to light if the portal enforces a fixed theme. Pre-chat form fields can be configured to collect identifiers required by organizational process (case number, department, service category).

Availability governance — In environments where response time commitments are contractual (SLA-bound operations), business hours configuration should align precisely with staffed service windows. Combine business hours with the unavailability message to communicate expected response times transparently. When AI Modules are deployed for after-hours coverage, the handoff behavior between AI and human agents should be documented in your operational procedures.