@zabbu/create-widget

Interactive setup for the Zabbu chat widget — installs the package with whichever package manager your project already uses, and prints (or, for plain HTML, offers to insert) the right integration snippet.

Usage

npm create @zabbu/widget

or, without the npm create sugar:

npx @zabbu/create-widget

You'll be asked for your Site Key (from the Zabbu admin panel). From there it:

1. Detects your package manager (npm, pnpm, yarn, or bun) from whichever lockfile is in the current directory, and installs @zabbu/chat-widget with it.
2. Detects whether the project is React, Vue, or neither (by checking package.json's dependencies) and prints the matching snippet — @zabbu/chat-widget/react's <ZabbuChat>, @zabbu/chat-widget/vue's, or the plain <script> tag.
3. For a plain project with an index.html (or public/index.html), offers to insert the script tag automatically, right before </body>.

Nothing here edits React/Vue source files — those get a snippet to place yourself, since there's no one conventional file to guess for every project shape (Next.js app router vs. pages router, a src/ directory or not, and so on). The index.html case is the one this can do safely and unambiguously.

Flags

| Flag | | |---|---| | --site-key=<key> | Skip the prompt | | -y, --yes | Auto-accept the index.html insert prompt (for CI/scripting) | | -h, --help | Show usage |