Customization

This page documents all options accepted by WebChat.init(). Only channelKey is required.

WebChat.init({
  channelKey: 'YOUR_CHANNEL_KEY',
  language: 'en',
  position: 'right',
  chatContainer: { variant: 'plain' },
  theme: { primaryColor: '#2d6cdf', panelWidth: '400px' },
})

Required SDK files and CSS customization

The browser integration requires both production files:

<link rel="stylesheet" href="/indigitall/web-chat-sdk-v2.min.css" />
<script src="/indigitall/web-chat-sdk-v2.min.js"></script>

• web-chat-sdk-v2.min.js contains the Web Chat logic and exposes WebChat.init().
• web-chat-sdk-v2.min.css contains the widget styles. Without it, the chat can work but will not have its intended layout and appearance.

Changing the loaded SDK CSS changes the appearance of every Web Chat instance that uses that stylesheet. However, do not edit web-chat-sdk-v2.min.css directly: a later SDK upgrade would overwrite those changes. Instead, load your own stylesheet after the SDK stylesheet and override its CSS variables or selectors.

<link rel="stylesheet" href="/indigitall/web-chat-sdk-v2.min.css" />
<link rel="stylesheet" href="/assets/my-web-chat-theme.css" />
<script src="/indigitall/web-chat-sdk-v2.min.js"></script>

Use the theme options below for the supported visual tokens. Use a custom CSS stylesheet for advanced rules that are not exposed as initialization options. Scope custom selectors with a className when possible, so they only affect the intended widget:

WebChat.init({
  channelKey: 'YOUR_CHANNEL_KEY',
  className: 'my-support-chat',
})

.my-support-chat .indigitall-chat-container-plain {
  background-color: #f8fafc;
}

Connection and behavior

Socket.IO transport selection is managed internally by the SDK. It first supports WebSocket and retains HTTP polling as a compatibility fallback; it is not a configurable integration option.

CSP con nonce

Use cspStrict to pass the host nonce to the Emotion cache created by @indigitall/indigitall-react-ui's ThemeProvider while keeping the normal widget appearance and functionality. This requires the library version with ThemeProvider nonce support (4.28.0 or later).

The customer server must generate a fresh, cryptographically secure nonce for every HTML response and use that same value in both the CSP response header and cspStrict.nonce:

<link rel="stylesheet" href="/indigitall/web-chat-sdk-v2.min.css" />
<script src="/indigitall/web-chat-sdk-v2.min.js"></script>
<script nonce="SERVER_GENERATED_NONCE">
  WebChat.init({
    channelKey: 'YOUR_CHANNEL_KEY',
    cspStrict: { nonce: 'SERVER_GENERATED_NONCE' },
  })
</script>

The matching response header must include the nonce with its nonce- prefix:

Content-Security-Policy: style-src 'self' 'nonce-SERVER_GENERATED_NONCE';

cspStrict forwards its nonce value to the Indigitall UI library's ThemeProvider, so dynamically inserted style elements created through its Emotion cache receive the nonce. The value is the raw nonce (without nonce-), must be unique per response, and must never be generated in browser JavaScript. A nonce does not authorize React style attributes; this mode is therefore incompatible with policies that set style-src-attr 'none' or otherwise block inline style attributes. The widget also uses inline styles for layout and virtualization.

Layout and theme

Set chatContainer.variant to 'whatsApp' (default conversation-pattern background) or 'plain' (neutral background).

theme accepts these CSS-friendly tokens:

WebChat.init({
  channelKey: 'YOUR_CHANNEL_KEY',
  position: 'left',
  horizontalOffset: '16px',
  verticalOffset: '16px',
  chatContainer: { variant: 'plain' },
  theme: {
    primaryColor: '#2d6cdf',
    primaryContrastColor: '#ffffff',
    panelWidth: '400px',
    panelHeight: '640px',
    borderRadius: '18px',
  },
})

Labels, icons, and welcome label

labels overrides bundled UI strings. Supported keys are:

title, subtitle, placeholder, send, emoji, attach, uploading, open, close, closeWelcomeLabel, empty, connecting, reconnecting, connectionFailed, unauthorized, retry, feedback, removeFeedback, loadOlder, scrollToLatest, today, yesterday, defaultContactName, closeContactDetails, viewContactDetails, carouselActions, and defaultDocumentName.

icons accepts URL-based replacements for launcher, close, send, location, and scrollToLatest. Every icon has { src: string, alt?: string }.

WebChat.init({
  channelKey: 'YOUR_CHANNEL_KEY',
  labels: { open: 'Open support', placeholder: 'Write a message…' },
  icons: { launcher: { src: '/assets/chat.svg', alt: '' } },
  welcomeLabel: {
    title: 'Need help?',
    body: 'Our team is ready to help.',
    icon: { src: '/assets/support.png', alt: 'Support team' },
    closable: true,
    closeIcon: { src: '/assets/close.svg', alt: '' },
  },
})

welcomeLabel.title is required when configured. closable defaults to false.

Input and attachments

default uses the existing Indigitall ChatInputKeyboard composer. It is selected when chatInput is omitted or when chatInput.variant is 'default'.

whatsapp uses a WhatsApp-inspired layout: an attachment control on the left by default (hide it with showAttachments: false), a rounded message field with the emoji control inside it, and a send-only paper-plane button on the right. The send button is disabled until the user enters text; the SDK does not provide voice-message recording.

WebChat.init({
  channelKey: 'YOUR_CHANNEL_KEY',
  chatInput: {
    variant: 'whatsapp',
    showEmoji: true,
  },
})

Use icons.send to replace the paper-plane image with an application-provided SVG or transparent PNG.

renderChatInput(props) fully replaces the built-in composer. It receives value, onChange, onSend, onSendMultimedia, isUploadingMultimedia, connected, connectionState, disabled, labels, and config. Use its send callbacks instead of accessing the socket directly.

Tags and callbacks

Tag memory is stored in sessionStorage, scoped to Web Chat URL, channel, and contact. These options manage SDK-local memory only; they do not remove backend tags.

Complete example

WebChat.init({
  channelKey: 'YOUR_CHANNEL_KEY',
  contactCode: 'user-12345',
  contactName: 'Ada Lovelace',
  language: 'en',
  locale: 'en-GB',
  initiallyOpen: false,
  chatAutoOpenTime: 10000,
  position: 'right',
  chatContainer: { variant: 'plain' },
  chatInput: { variant: 'whatsapp', showEmoji: true, showAttachments: true },
  assignTags: ['web'],
  theme: { primaryColor: '#2d6cdf', panelWidth: '400px' },
  onError: (error) => console.error('Chat error', error),
})