Chat V2

📘

SDK reference version: 1.0.0

This document describes what a client application needs to integrate the SDK. You do not need to install the SDK's internal dependencies individually.

Overview

Integration methodDependencies the client must provideWhen to use it
Embedded JavaScriptNo npm dependenciesHTML sites, CMSs, ecommerce sites, or applications without React.
React packageweb-chat-sdk-v2, react, and react-domReact applications with a build process.

Both methods require a valid public channelKey and connectivity to the chat environment. A channelKey is not a server credential: never expose a serverKey, private token, or backend secret.

Option A: embedded JavaScript integration

This option does not require Node.js, npm, React, React DOM, or a manual Socket.IO installation.

The client must publish or serve these two SDK-generated assets:

  • web-chat-sdk-v2.min.js
  • web-chat-sdk-v2.min.css

Load them on the page in this order:

  1. The stylesheet.
  2. The JavaScript bundle.
  3. A call to WebChat.init(...) after the bundle has loaded.

The browser bundle contains everything needed to run the widget, including the Socket.IO client and its UI dependencies. Therefore, do not add an additional <script> for socket.io-client, React, or React DOM.

See DOC_INITIALIZATION.md for the inclusion example and initialization parameters.

Browser requirements

The integrated site must run in a modern browser with support for:

  • Standard DOM and modern CSS.
  • WebSocket and/or HTTP polling, which Socket.IO uses.
  • sessionStorage, which stores the temporary contact identifier when contactCode is not provided.

ES modules are not required for the distributed global bundle.

If site policies block external resources, the JavaScript, CSS, and custom assets (such as icons) must be hosted on a domain allowed by the site's Content Security Policy (CSP).

Option B: React package integration

Required dependencies

Install the SDK together with React and React DOM if the application does not already include them:

npm install web-chat-sdk-v2 react react-dom

React and React DOM are peer dependencies: the client project controls their versions to avoid multiple React copies in the application. The SDK supports these versions:

PackageCompatible version
react>=18.2.0 <20
react-dom>=18.2.0 <20

Then import the component and its styles:

import { ChatWidget } from 'web-chat-sdk-v2'
import 'web-chat-sdk-v2/styles.css'

The Socket.IO client is declared as an SDK production dependency. In a standard npm integration, it is not necessary to add socket.io-client to the consuming application's package.json unless the application uses it directly for other connections.

Dependencies included by the SDK

These dependencies are installed and resolved automatically when the package is installed. They do not require client configuration:

DependencySDK purpose
socket.io-client v4Connection, authentication, real-time messaging, and reconnection.
i18next and react-i18nextUser-interface language handling and bundled translations.
@tanstack/react-virtualEfficient rendering of message lists.
@indigitall/indigitall-react-uiComplementary chat UI elements.

Development tools such as Vite, TypeScript, ESLint, Vitest, and Testing Library are not runtime dependencies. They are only required to develop or modify the SDK, not to use it.

Connectivity and platform configuration

In addition to the packages or files above, the integration needs the following:

ItemRequirement
channelKeyRequired. Public chat channel identifier supplied for the integration.
baseUrlOptional. Web Chat environment URL; defaults to https://eu1.chat-v2.indigitall.com when omitted.
Network accessThe browser must be able to reach baseUrl over HTTPS, secure WebSocket (wss), or the Socket.IO fallback transport.
CORS/proxyAny proxy, WAF, or CSP must allow requests and WebSocket/polling connections to the chat environment.
contactCodeOptional and recommended for authenticated users. It must be stable and must not contain secrets.

To prevent security and connectivity issues:

  • Serve the application, SDK assets, and chat environment over HTTPS in production.
  • Allow connect-src to the domain configured in baseUrl in the site's CSP.
  • When using a strict CSP, also allow the origin serving the JavaScript, CSS, and configured icons.
  • cspStrict: { nonce: '…' } forwards the raw response nonce to the ThemeProvider in @indigitall/indigitall-react-ui (version 4.28.0 or later), so its Emotion-generated style elements can satisfy a nonce-based style-src. It does not authorize inline style attributes; do not use this mode with style-src-attr 'none'.
  • Do not configure or expose private keys in code delivered to the browser.

Information the integrator must provide

Before starting the integration, the client should have:

  1. The public channelKey for the relevant channel.
  2. The environment URL (baseUrl) if the default endpoint will not be used.
  3. An identification choice: a stable client-owned contactCode for known users, or a temporary session identifier for anonymous visitors.
  4. Approved URLs for SDK assets and, when applicable, customized icons or styles.
  5. The CSP, CORS, proxy, or firewall rules required to communicate with the chat environment.

Quick validation

An integration is ready when these checks pass:

  • The SDK CSS and JavaScript load without browser-console errors.
  • The floating launcher appears.
  • WebChat.init({ channelKey: '…' }) or ChatWidget is initialized only once.
  • The connection reaches the authenticated state and can send a text message.
  • On sign-out or when the containing view is removed, the JavaScript integration calls destroy() or the React component is unmounted.

ee DOC_INITIALIZATION.md for the JavaScript implementation and DOC_CUSTOMIZATION.md for appearance and behavior options.