Cart widget
Drop-in cart icon + drawer + checkout for any community landing
page. Persists across the landing and the Cobuntu-served routes
(/marketplace, /events) via shared localStorage — adding a
product on /marketplace updates the badge on /, and vice versa.
Install
<script src="/widgets/v1/cart.js" async></script>
<div data-cobuntu-cart></div>That's the whole contract. The widget auto-bootstraps from the
current hostname, resolves the community tag, and mounts cart UI
into every [data-cobuntu-cart] on the page.
CSS variables (theming)
Set on the mount node or :root:
| Variable | Purpose | Default |
|---|---|---|
--cobuntu-cart-icon-color | Cart icon stroke | currentColor |
--cobuntu-cart-badge-bg | Count badge background | brand color |
--cobuntu-cart-badge-text | Count badge text | #fff |
--cobuntu-cart-drawer-bg | Drawer background | #fff |
--cobuntu-cart-drawer-text | Drawer text | #0a0a0a |
--cobuntu-cart-primary-bg | Checkout button background | brand color |
--cobuntu-cart-primary-text | Checkout button text | #fff |
The widget reserves the cobuntu-cart-* CSS class prefix and the
[data-cobuntu-cart] attribute selector. It will not interfere
with other styles on the page.
Frozen contract
The widget is a public API. Customers paste a <script src>
and we cannot break their pages. The frozen surface:
- The script URL (
/widgets/v1/cart.js) - The mount selector (
[data-cobuntu-cart]) - The localStorage key (
cobuntu_community_cart) - The CSS variable names above
Breaking changes ship as /widgets/v2/cart.js (new URL). v1 is
maintained for at least 12 months after v2 GA. The DOM shape the
widget creates is not part of the contract — don't select into
widget internals.
How the cross-page sync works
In Cobuntu's reverse-proxy whitelabel architecture, your apex
(yourdomain.com) serves both your custom landing AND Cobuntu's
pages (/marketplace, /events, etc.) on the same origin. That
gives the widget three properties for free:
- Shared localStorage — same
cobuntu_community_cartkey the ReactCartProviderwrites - Shared cookies — the widget's checkout call carries the same auth cookie as community-app fetches
- No CORS — all API calls are first-party
Off-origin embedding (a Webflow site at example.com calling a
Cobuntu community on a different domain) is v2 scope — requires a
server-side cart-sync API with cookie-less auth.
Bundle size
~5 KB gzipped. Single file, no dependencies, no React.