Widgets

Drop-in UI for your community — cart, sign-in, chat, search, an account menu, and more — that you add to any website by pasting a snippet. No backend, no build step. They self-detect your members and match your brand automatically.

30-second start

Two pieces: a mount (where the widget appears) and the script (loads it). Here's a cart:

<!-- 1. where it shows -->
<div data-cobuntu-cart></div>
 
<!-- 2. once, before </body> -->
<script src="https://app.cobuntu.com/widgets/v1/cart.js" async></script>

Reload the page and you have a working cart. Want more widgets? Add their mount <div> and their <script> the same way. Full per-platform steps (Squarespace, Webflow, Lovable, Framer, …) are in Install.

The widgets

Two distribution paths, one source

The widget source lives in one place. We ship it two ways:

Vanilla <script> (any HTML)

For landings in Squarespace, Webflow, Lovable, Framer, plain HTML — anywhere you can paste a <script> tag.

<script src="https://app.cobuntu.com/widgets/v1/cart.js" async></script>
<div data-cobuntu-cart></div>

Self-bootstrapping. The script discovers mount nodes via MutationObserver, so widgets render even if your framework injects the mount divs after page load.

npm package (React + bundler)

For React apps with a bundler (Next.js, Vite, CRA, etc.):

npm install @cobuntu/widgets

import { CobuntuCart, CobuntuAuth } from "@cobuntu/widgets";
 
export function Header() {
  return (
    <>
      <CobuntuCart />
      <CobuntuAuth variant="button" />
    </>
  );
}

react is an optional peer dependency — only required if you import the React wrappers.

Versioning

/widgets/v1/*.js URLs are frozen. Once a customer pastes a <script> tag, the contract (data-attributes, CSS variables, window.Cobuntu* API) cannot break. Refactors that change the contract ship under /widgets/v2/*.js; both versions coexist until customers migrate.

The npm package follows semver.

Next: Install →