Live Chat

Widget V2 source code

The SignalZen Live Chat widget V2 is open source. The full source code lives on GitHub at github.com/SignalZen/widget, so you can read exactly what runs on your website, audit it, or build your own version.

What it is

An embeddable customer support chat widget built with React 19, TypeScript, Vite and Tailwind CSS v4. It compiles to a single self-contained IIFE (signalzen.js) that installs on any website with a one-line snippet, and mounts into a Shadow DOM root so your site styles and the widget styles never collide.

Repository structure

Path	Purpose
`src/widget/embed.tsx`	Widget entry point — mounts the React app into a Shadow DOM root
`src/components/signalzen/`	All widget UI components
`src/components/signalzen/screens/`	Individual screens (Welcome, AI Chat, etc.)
`vite.widget.config.ts`	Library build config — outputs `public/signalzen.js`
`public/index.html`	Hostile-CSS test page for local smoke-testing

Prerequisites

Node.js 20+ or Bun
Access to a running SignalZen backend — or point at the production API for read-only testing

Setup

# Install dependencies
npm install          # or: bun install

# Copy and configure environment
cp .env.example .env.development
# Edit .env.development with your backend URLs

Development

# Watch-build the widget and serve the test page at http://localhost:8081
npm run dev:widget

This runs two processes in parallel:

build:widget:dev — rebuilds public/signalzen.js on every source change
browser-sync — serves public/ and live-reloads on each rebuild

Open http://localhost:8081 and the test page loads the widget from the local bundle.

Building

# Production bundle -> public/signalzen.js
npm run build:widget

# Development bundle with source maps (no minification)
npm run build:widget:dev

The built file is gitignored — do not commit it.

Environment variables

All variables are prefixed with VITE_ and inlined at build time. See .env.example in the repository for documentation. Create .env.development for local development and .env.production for production builds.

Install snippet

The production widget is installed with the standard snippet:

<script type="text/javascript">
  var _sz = _sz || {};
  _sz.appId = "YOUR_PUBLIC_TOKEN";
  (function () {
    var e = document.createElement("script");
    e.src = "https://cdn.signalzen.com/signalzen.js";
    e.setAttribute("async", "true");
    document.documentElement.firstChild.appendChild(e);
    var t = setInterval(function () {
      if (typeof SignalZen !== "undefined") {
        clearInterval(t);
        new SignalZen(_sz).load();
      }
    }, 10);
  })();
</script>

Optional configuration keys on _sz:

language — set the widget translation manually, see Language
renderInContainerId — render the widget inside a given div instead of a fixed position

Note Please change YOUR_PUBLIC_TOKEN to the Public Token that is given in the Integration page on the Console.

Contributing

Fork the repository and create a feature branch
Run npm run dev:widget to start the watch build
Test your changes in the browser at http://localhost:8081
Run npm run lint before opening a pull request
Do not commit public/signalzen.js — the build artifact is gitignored
Do not run build:widget as part of a pull request — production builds are handled separately