Developer help center

Bring Vizzoro into your website.

Everything an implementer needs to connect an authorized catalog, open the visualizer and understand the production flow.

Start here

Vizzoro lets shoppers place a real material from your catalog into a photo of their room. Your team manages products in the Vizzoro app. Your website loads the visualizer through a small JavaScript SDK.

1. Prepare the catalog

Create a textured floor product with its image and physical dimensions in the Vizzoro app.

2. Authorize your website

Add the exact website hostname in Integration, then create a publishable key for that domain.

3. Add the SDK

Add the script tag and call Vizzoro.start from your product page or button.

Install the SDK

Place this code once on the page where shoppers can open the visualizer. The publishable key is designed for browser use.

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

Replace PRODUCT_ID with the product document ID shown in your Vizzoro catalog. Use the same domain that you authorized in the app.

SDK reference

Vizzoro.start opens an accessible full-screen visualizer. Calling it again replaces the current visualizer.

Vizzoro.start({
  category: "floor",
  productId: "PRODUCT_ID",
  locale: "pt",
  onLeadCapture: ({ productId, jobId }) => {
    console.log("Visualization completed", productId, jobId);
  }
});

categoryrequired

Material category. The current MVP supports floor.

productIdrequired

ID of a product in the authorized catalog.

localeoptional

en, pt or es. When omitted, Vizzoro uses the shopper browser language.

onLeadCaptureoptional

Callback after a completed visualization. Receives productId and jobId.

Keys and authorized domains

A Vizzoro publishable key is safe to place in browser code because it has a narrow purpose. It opens the visualizer only from a domain you approved.

Create keys in the app only after adding every production and staging hostname.
Vizzoro checks the key and the website domain every time the visualizer opens.
Do not put service credentials or unpublished keys in a website.
Create a new key and remove the old one if a domain changes ownership.

Use it on a product page

Place the Vizzoro.start call inside the button or interaction that a shopper uses to preview a material. Use the ID of the product currently being viewed.

Product detail pages

Use the product ID from your commerce platform to map each page to the matching product in the Vizzoro catalog.

Custom buttons

Call Vizzoro.start from any existing button, card or call to action. The visualizer opens over the current page.

Troubleshooting

The visualizer does not open

Confirm that the SDK script loads without a browser error and that Vizzoro.start receives a productId.

The domain is not authorized

Add the exact hostname in Integration. Add both example.com and www.example.com when your website uses both.

The product cannot be loaded

Confirm the product ID belongs to the same Vizzoro organization as the publishable key.

A render failed

Use a regular JPG or PNG room photo under 25 MB. Confirm that the product has a texture and dimensions.

Need implementation help?

Send the page URL, browser error, product ID and the hostname you authorized. That lets our team reproduce the integration quickly.

Contact Vizzoro support