Install

Pick the host that matches where your landing lives.

Branding is automatic. As soon as you drop the script tag, the widget fetches your community's theme from api.cobuntu.com/api/communities/by-domain/<your-host> and applies it to every widget on the page. No CSS work required for the common case. See Theming if you want to override.

Squarespace

Settings → Advanced → Code Injection → Footer. Paste:

<script src="/widgets/v1/cart.js" async></script>
<script src="/widgets/v1/auth.js" async></script>
<script src="/widgets/v1/messages.js" async></script>
<script src="/widgets/v1/notifications.js" async></script>
<script src="/widgets/v1/search.js" async></script>

The relative /widgets/v1/... paths resolve via Cobuntu's reverse proxy when your apex is configured. For not-yet-proxied landings, use absolute URLs (https://app.cobuntu.com/widgets/v1/...).

Header → Custom HTML block (Fluid Engine) or Code Block (legacy). Paste the mount points:

<div class="cobuntu-actions" style="display:inline-flex;gap:12px;align-items:center;">
  <div data-cobuntu-search></div>
  <div data-cobuntu-messages data-require-auth="hide"></div>
  <div data-cobuntu-notifications data-require-auth="hide"></div>
  <div data-cobuntu-cart></div>
  <div data-cobuntu-auth data-variant="button" data-label-logged-out="ACCOUNT"></div>
</div>

(Optional) Design → Custom CSS. Override the auto-fetched theme with your own CSS variables. See Theming for the full variable list.

Webflow

Project Settings → Custom Code → Footer Code. Paste the <script> tags from the Squarespace step 1.
Embed element anywhere in your nav. Drop the mount points.

Lovable

index.html → add the <script> tags to the <body> (after your React root mount). Lovable preserves the file across edits.
Header component → add the <div data-cobuntu-*> mount points in your JSX.

Framer

Site → Settings → General → Custom Code → End of <body>. Paste the <script> tags.
Embed Code Component in your header. Paste the mount points.

Plain HTML / Hugo / Jekyll / Astro

Same idea — <script> tags before </body>, <div data-cobuntu-*> in your header. Nothing host-specific.

React + bundler

npm install @cobuntu/widgets

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

No <script> tags needed — the React wrappers lazy-load the underlying widget bundle from app.cobuntu.com automatically.

Verify the install

After deploying:

✓ Open your landing. Cart icon visible in the header.
✓ Click the auth button → Cobuntu's /login flow opens.
✓ Log in. Header now shows your name + avatar.
✓ DevTools Network tab: GET https://api.cobuntu.com/api/users/me returns 200.

If any step fails, see Troubleshooting (TODO).

What's served from where

/widgets/v1/*.js — Cobuntu's CDN, served via Vercel.
<div data-cobuntu-*> — your HTML, anywhere.
CSS theming — your CSS file, applied via CSS variables the widget reads off the mount node or :root.

Overview Theming