@vizzoro/sdk

Embeddable widget for Vizzoro. A shopper uploads a photo of their room and sees a flooring material applied to it, live.

Get your publishable key and authorized domain from the Vizzoro dashboard first — the widget won't start without one.

Install

Script tag (fastest way to try it)

<script src="https://app.vizzoro.com/sdk.js" data-key="vz_pk_..."></script>
<script>
  Vizzoro.start({ category: "floor", productId: "YOUR_PRODUCT_ID" });
</script>

npm / yarn / pnpm

npm install @vizzoro/sdk
# or
yarn add @vizzoro/sdk
# or
pnpm add @vizzoro/sdk

import { createVizzoro } from "@vizzoro/sdk";

const vizzoro = createVizzoro({ key: "vz_pk_..." });

vizzoro.start({
  category: "floor",
  productId: "YOUR_PRODUCT_ID",
  onLeadCapture: (payload) => {
    // fires once the shopper generates a render
  },
});

Both paths open the same overlay and talk to the same API — pick whichever fits how the rest of your site is built. The npm package additionally ships TypeScript types.

API

Vizzoro.start(options) / createVizzoro(config).start(options)

| Option | Type | Required | Notes | | --- | --- | --- | --- | | category | "floor" | yes | Only floor surfaces are supported today. | | productId | string | yes to preselect a product | Omit to let the shopper pick from the catalog inside the widget. | | locale | "en" \| "es" \| "pt" | no | Falls back to the shopper's browser language, then English. | | onLeadCapture | (payload: unknown) => void | no | Called once a render completes; use it to hook into your own analytics/CRM. |

createVizzoro(config) (npm only) also takes:

| Option | Type | Required | | --- | --- | --- | | key | string | yes — your publishable key |

Both entry points return a controller with .close() to dismiss the overlay programmatically.

Security model

The publishable key is meant to be public — it ships in your page's HTML, same as a Stripe publishable key. It is restricted server-side to the domains you authorize in the dashboard and can only read your active catalog and create render jobs; it cannot read or modify anything else in your account.

Local development

npm install
npm run build   # builds dist/sdk.js (IIFE) + dist/index.{js,cjs,d.ts} (ESM/CJS)
npm run dev     # esbuild watch + serves demo.html at http://localhost:8787/demo.html

demo.html embeds the widget through the real built dist/sdk.js, the same way a dealer site would. Swap in your own publishable key and product ID to try it against your organization's catalog.

License

MIT — see LICENSE.