Step-by-step guides for every Vizbl feature.

1. Go to the Vizbl dashboard and sign up with your work email.
2. Verify your email and complete your store profile (store name, category, expected catalog size).
3. Pick a plan, every plan starts free for 14 days, no card required.

Once your account is active you'll get an account_id and a sandbox API_KEY visible in Settings → Developer.

You have two options:

1. Send photos. Upload 6–12 product photos taken from different angles. Vizbl's AI rebuilds geometry, infers materials and ships a textured GLB / USDZ.
2. Upload an existing 3D file. Vizbl accepts .glb, .gltf, .usdz, .fbx and .obj (with textures).

For best AI results: shoot on a plain background, even lighting, no harsh shadows, and include at least one top-down angle.

1. Open a model in the dashboard.
2. Click Attach to product and pick a SKU from your store (Shopify / WordPress / Wix accounts are auto-synced).
3. Enable AR, the viewer will show a "View in your room" button on the product page.

If you're on Shopify, WordPress, Wix, BigCommerce or Squarespace, install the Vizbl integration and the button appears automatically. For custom storefronts, paste this snippet onto the product page:

<script type="module"
  src="https://cdn.vizbl.com/v1/viewer.js"></script>

<vizbl-viewer
  model-id="YOUR_MODEL_ID"
  ar
  scale="auto">
  <button slot="ar">View in your room</button>
</vizbl-viewer>

Open your product page on a phone and tap the AR button, the model should appear at true scale in your room. Once you confirm it works, push to production and watch the Analytics tab for AR launches, dwell time and conversion lift.

1. Open the Vizbl listing on the Shopify App Store and click Install.
2. Approve the read/write permissions on products and themes.
3. In the Vizbl dashboard, choose the products you want AR on. Drag-and-drop the existing models or upload new ones.
4. Vizbl injects a theme block, drag it onto your product template in the Shopify editor where you want the "View in your room" button to appear.
5. Save the theme and test on mobile.

To uninstall, remove the app from Apps in your Shopify admin, the theme block disappears automatically.

1. From your WordPress admin, go to Plugins → Add New and search for Vizbl AR.
2. Install & activate. Enter your Vizbl API key in Settings → Vizbl.
3. For Gutenberg: add the Vizbl Viewer block to any post or product page and pick the model.
4. For classic editor: use the shortcode [vizbl id="YOUR_MODEL_ID" ar="true"].

All three platforms support a custom HTML embed block. The setup is identical:

1. In your page editor, add an Embed code / Custom HTML block where the viewer should appear.
2. Paste the snippet:

<script type="module"
  src="https://cdn.vizbl.com/v1/viewer.js"></script>

<vizbl-viewer
  model-id="YOUR_MODEL_ID"
  ar>
</vizbl-viewer>

Replace YOUR_MODEL_ID with the id from your Vizbl dashboard. Save & publish.

The Vizbl viewer is a Web Component, so it works with any framework that renders HTML.

// React example
import { useEffect } from "react";

export default function ProductView({ modelId }) {
  useEffect(() => {
    if (document.getElementById("vizbl-loader")) return;
    const s = document.createElement("script");
    s.id = "vizbl-loader";
    s.type = "module";
    s.src = "https://cdn.vizbl.com/v1/viewer.js";
    document.head.appendChild(s);
  }, []);

  return <vizbl-viewer model-id={modelId} ar />;
}

For Vue and Svelte, register the custom element in your build config (most modern bundlers do this automatically).

The 3D + AR Viewer can be deployed three ways:

• Inline. The viewer renders right on the product page.
• Modal. The viewer opens in a full-screen modal on click of a button.
• Hosted page. Vizbl hosts a beautiful viewer page at view.vizbl.com/m/MODEL_ID. Great for QR codes and email.

Combine these with poster= for a static image until the viewer loads, and scale="auto" for true-world dimensions in AR.

Vizbl normalizes everything into a single internal format and serves the right one per device:

• .glb / .gltf, used for Web 3D and Android Scene Viewer.
• .usdz, used for iOS Quick Look.
• .fbx, .obj, accepted on upload, converted server-side.

Recommended size: under 10 MB after compression. Vizbl applies Draco + KTX2 automatically.

On Growth and Enterprise plans you can override the default colors, button label, font and background of the viewer:

<vizbl-viewer
  model-id="…"
  accent="#f97316"
  background="#ffffff"
  font="Inter, sans-serif"
  ar-label="Try at home">
</vizbl-viewer>

Open your model in Studio → Hot-spots to add labelled markers (materials, dimensions, features). They appear on hover in 3D and on tap in AR.

One model can carry many variants. In the dashboard, define variants under Model → Variants and the viewer renders a swatch picker. Variants stay in sync with your e-commerce platform's SKUs.

Vizbl's AI takes 6–12 photos of a product and rebuilds an accurate 3D model. Three stages:

1. Reconstruction. Geometry is rebuilt from multi-view photogrammetry + a learned shape prior.
2. Material inference. Surfaces are separated and PBR textures applied (albedo, roughness, normal, metallic).
3. Optimisation. Mesh is decimated, textures KTX2-compressed and three LODs are created.

Turnaround is typically a few minutes. You'll get a webhook (model.ready) when it's done.

• Background: plain, light grey or white.
• Lighting: diffuse, no harsh shadows. Avoid coloured lights.
• Angles: at least 8, front, back, both sides, two 45° front, top, bottom.
• Resolution: 2000+ px on the long edge.
• Avoid: reflective surfaces without diffusion, transparent objects, identical photos.

Every output lands in Studio → Pending review. Approve, request a re-run, or send to a Vizbl artist for human refinement (Growth / Enterprise plans).

1. Open the model and click Share → QR code.
2. Pick the size and format (PNG, SVG or print-ready PDF).
3. Add the QR to packaging, flyers, postcards or in-store signage.

QR codes link to view.vizbl.com/m/MODEL_ID. iOS and Android phones launch AR straight from the camera.

Each shared link has its own micro-page. Pick a header image, brand colours, a "Buy" CTA URL, and optional product description. All editable from Studio → Share.

Generate keys in Settings → Developer. Use the sandbox key for dev, the production key for live traffic. Send keys with the header:

Authorization: Bearer $VIZBL_KEY

• POST /v1/models, upload a photo set or 3D file.
• GET /v1/models/:id, read a model's status and URLs.
• PUT /v1/products/:sku/model, attach a model to a SKU.
• POST /v1/share-links, generate a public link / QR.
• GET /v1/analytics/sessions, view sessions, AR launches, dwell time.

Full spec at developer.vizbl.com.

Subscribe to model.ready, model.failed, session.completed. Webhooks are signed with HMAC-SHA256 over the raw body using your webhook secret.

The dashboard shows AR launches, viewer engagement (dwell time, rotations), conversion lift on AR-viewed products, and per-model performance. Filter by time range, device or country.

Vizbl emits vizbl_view, vizbl_ar_launch and vizbl_ar_close on the page's data layer. Forward them to GA4, Segment or any analytics tool with a single mapping.

Upgrades happen instantly. Downgrades take effect at the end of the current billing cycle. Visit Settings → Billing → Change plan.

Roles: Owner, Admin, Editor, Viewer. SSO and audit log on Enterprise.

Invoices auto-generate every month and live under Billing → Invoices. Add your VAT/GST id in Settings → Billing → Tax.

Cancel any time from Billing. You keep access until the end of the period. Models stay in your account for 30 days after cancellation.