Chat widget.

Paste the snippet before your closing </body> tag. Replace YOUR_ORG_ID with the value from your dashboard. That’s the whole install.

<script>
  (function() {
    var s = document.createElement("script");
    s.src = "https://cdn.kaltalk.com/widget.js";
    s.async = true;
    s.onload = function() {
      KalTalk.init({
        organizationId: "YOUR_ORG_ID"
      });
    };
    (document.head || document.body || document.documentElement).appendChild(s);
  })();
</script>

Vite, CRA, or any other SPA? Drop the HTML snippet into your index.html. Same effect.

If you already know who’s on the page, pass it to the widget. Their replies attach to the same person across visits, and the AI can use the context.

KalTalk.init({
  organizationId: "YOUR_ORG_ID",
  customerExternalId: "user_123",
  customerEmail: "ada@example.com",
  customerName: "Ada Lovelace",
  customerPhone: "+1 555 0100",
  customerCompany: "Lovelace & Co",
  // Extra facts your team will see next to the conversation.
  // Flat, scalar-only (string / number / boolean / null), up to 10 keys.
  customerMetadata: {
    plan: "Pro",
    signupDate: "2025-01-15",
    mrr: 99,
    isTrial: false
  }
});

customerMetadata is flat and scalar-only - up to 10 keys, strings / numbers / booleans / null. Nested objects and arrays are dropped. The identify response includes a droppedMetadataKeys list so you can see what didn’t land.

Values are self-reported by the visitor and shown to your team as such - don’t make trust decisions on them without a server-side check.

Some teams prefer to open the chat from their own button, a menu item, or a link inside the app. Pass hide: true and the default bubble never shows. Open and close the chat whenever you want with window.KalTalk.open() and window.KalTalk.close().

KalTalk.init({
  organizationId: "YOUR_ORG_ID",
  hide: true
});

// Open the chat from your own button, link, or menu item.
document.getElementById("contact-support")
  .addEventListener("click", function () {
    window.KalTalk.open();
  });

// Close it programmatically at any time.
// window.KalTalk.close();

Color, position, header text, welcome message, avatar - all editable from your widget settings, no code change needed. Pick what you want, save, and your live widget updates within seconds.

Loads async

The snippet doesn’t block your page. It loads after everything else.

One install per app

For Next.js, React, etc., add it once at the root - not on every page.

Hide branding

The "Powered by KalTalk" footer comes off on Pro and above.