greatkb chat — demo

This page embeds the chat widget the same way any host site would. Click the launcher button in the bottom-right to open it.

Embed snippet

<script>
  (function(){
    var c = window.GreatKB = window.GreatKB || function(){(c.q=c.q||[]).push(arguments)};
    c.q = c.q || [];
    ["init","update","open","close","toggle","attach","on","off"].forEach(function(m){
      c[m] = c[m] || function(){
        var args = [m]; for (var i=0;i<arguments.length;i++) args.push(arguments[i]);
        c.q.push(args);
      };
    });
  })();
  GreatKB.init({
    kbId: "YOUR-KB-UUID",
    theme: "auto",
    assistant: {
      name: "Aria",
      greeting: "Hi! I'm Aria. Ask me about pricing, accounts, or shipping.",
    },
    website: {
      name: "Acme Inc.",
    },
    page: {
      context: "Short hint about the current page.",
    },
  });
</script>
<script async src="https://chat.greatkb.com/widget.js"></script>

Config schema

interface GreatKBConfig {
  kbId: string;                       // required
  theme?: "auto" | "light" | "dark";  // default "auto"
  assistant?: { name?: string; greeting?: string };
  website: { name: string };
  page?: { url?: string | false; context?: string };
  launcher?: false | LauncherConfig;  // default = {} (floating button)
}

interface LauncherConfig {
  label?: string;                     // default "Chat"
  icon?: string;                      // SVG markup or https:// URL
  background?: string;                // CSS color, default "#2563eb"
  color?: string;                     // CSS color, default "#fff"
  position?: "bottom-right" | "bottom-left";
  attachTo?: string | Element;        // bind open() to a host element
}

Programmatic API

GreatKB.init(config)        // one-shot bootstrap
GreatKB.update(partial)     // change settings at runtime
GreatKB.open() / close() / toggle()
GreatKB.attach("#my-btn")   // bind a host element to toggle()
GreatKB.on("message", ({ role, text }) => console.log(role, text))
GreatKB.off("message", handler)

Recipes

GreatKB.init({ kbId: "..." });

GreatKB.init({
  kbId: "...",
  launcher: false,
});
document.getElementById("help")
  .addEventListener("click", () => GreatKB.open());
// or:  GreatKB.attach("#help");

GreatKB.init({
  kbId: "...",
  launcher: {
    label: "Ask Support",
    background: "#10b981",
    color: "#fff",
    position: "bottom-left",
  },
});

Full reference: see apps/chat/README.md.