3D and AR with Vectary

Vectary turns a flat product page into an interactive 3D scene shoppers can spin, zoom, and drop into their living room through app-free AR. Build the experience in Vectary, generate an iframe embed, and paste it into a Code Embed element to render it inline on your published page.

For deeper control, the Vectary Model API gives you JavaScript hooks to drive configurator state and sync custom UI with the scene. The foundation product teams, agencies, and e-commerce builders use to power configurators, campaigns, and shoppable 3D catalogs.

How to integrate 3D and AR with Vectary

What is 3D and AR with Vectary? Vectary is an online platform for creating interactive 3D and AR designs that you share or embed through a single link, with no downloads and no software installs. You model, import, edit, and publish entirely in the browser. The platform supports no-code product configurators, animation timelines, interactive hotspots, and app-free WebAR, and reports more than 4 million users.

Reach for Vectary when a flat product image is not enough. A furniture brand wants shoppers to rotate a sofa and swap fabrics. An electronics company wants to show how a device opens and assembles. Vectary handles the 3D rendering and AR, while you handle layout, content, and hosting.

This integration can stay no-code or add developer-controlled UI and CMS logic:

• The iframe embed drops an interactive 3D viewer onto any page with copy-and-paste, no code.
• Developer-led builds can use the Vectary Model API to control configurator state, materials, and visibility through JavaScript on the page, and the Data API to manage CMS content so you can store and serve model URLs per item. This path requires developer resources.

Most implementations start with the iframe embed and add the Model API only when you need programmatic control over the scene.

Add Vectary 3D models with Code Embed elements

Vectary integrates through the native embedding path described in Vectary's documentation for Webflow. Generate an iframe embed in Vectary and paste it into a Code Embed element. This covers most use cases including interactive 3D rotation and app-free AR, and it needs no JavaScript.

This method works well for single-page 3D viewers and product heroes. You need a paid plan because free plans cannot add embeds to any page. On the Vectary side, embedding requires a Pro AI or Business plan, and the Vectary logo appears on Free, Education, and Legacy Pro workspace links. Removing the watermark entirely requires a Business plan.

To set up the integration:

1. In Vectary, click the Share button, then click Update all changes to sync the latest version.
2. Toggle Share to web to generate the iframe code, then copy it.
3. In the Designer, click the + icon and drag a Code Embed element onto the canvas.
4. Paste the Vectary code into the Code editor and click Save.
5. Publish your site.

This embed gives visitors mouse or touch control for rotation and zoom, and it supports app-free WebAR on iPhone and Android directly in the browser. Hotspots and annotations come from the settings you configure in Vectary Studio.

You do not need to replace the embed code when you change the model. Clicking Update all changes in Vectary propagates updates to every existing embed automatically. The Code Embed element supports up to 50,000 characters, and Vectary embeds fit well within that limit.

Drive configurators with the Vectary Model API

The Vectary Model API gives you JavaScript control over an embedded 3D scene. Use it when a plain iframe is not enough, for example syncing a custom UI with material swaps, variant changes, or object visibility. The API is a wrapper around postMessage with async methods, and it runs entirely in the browser. Add the script using custom code in head and body tags because server-side languages do not run on the platform.

The Model API is available on Vectary Business plans only. Load the SDK as a module and call init before any other method. To learn about adding scripts to a page, see Custom code in head and body tags.

Initialize the viewer and connect

Every Model API session starts by loading VctrModelApi and calling init. This call opens the connection to the embedded model. You cannot use any other method until init resolves.

To set up programmatic control:

1. Add the iframe embed to your page with a Code Embed element, as described above.
2. In page settings, add a script before the </body> tag that imports the SDK:

import { VctrModelApi } from "https://app.vectary.com/studio-lite/scripts/api.js";

3. Call init on the API instance and wait for the returned Promise to resolve before calling other methods.

Once init resolves, the rest of the SDK becomes available for configurator logic.

Build a product configurator

A configurator lets visitors change materials, swap variants, and toggle parts on a 3D model. Wire buttons or inputs to Model API calls so a click updates the scene in real time. This pattern powers consumer-facing material and color pickers tied to a product page.

To connect custom UI to the 3D scene:

1. Read the current state with getConfigurationState to see present variants and materials.
2. Apply a new state with setConfigurationState, or swap a single object's material with setActiveMaterial.
3. Show, hide, or toggle parts with toggleVisibility.
4. Listen for scene events with addEventListener and send events into the scene with dispatchEvent.

These methods are async and return Promises, so chain UI updates to their resolution. The Model API reference documents each method and its signature.

Build with the Data API and Vectary API

For CMS-driven 3D, where each collection item carries its own model, combine the Data API with Vectary embeds. This path requires developer work. Store a Vectary model URL or embed code in a CMS field, then bind that field to an Embed element so each item renders its own scene. The Data API lets you create and update those items programmatically.

Use the Vectary Model API for browser-side control of the embedded scene through JavaScript. Use the Data API for CMS collections and items. Use CMS webhook events for real-time notifications when items change.

Vectary has no public REST API and no server-side webhooks, so a true two-way server sync is not possible. Any pipeline runs from your side.

Manage CMS items with the Data API

The Data API v2 reads and writes CMS collection items over HTTP. Store each Vectary model's public URL or iframe code in a Link or plain Text field, then drive that content with the API. The CMS plan supports 2,000 items and the Business plan supports 10,000.

Start by listing items with GET https://api.webflow.com/v2/collections/{collection_id}/items, with a max of 100 per page. When you need a new CMS item, use POST https://api.webflow.com/v2/collections/{collection_id}/items and pass the Vectary URL inside the fieldData object with keys matching your field slugs. For existing items, use PATCH https://api.webflow.com/v2/collections/{collection_id}/items/{item_id}.

The JS SDK wraps these endpoints:

import { WebflowClient } from "webflow-api";

const client = new WebflowClient({ accessToken: "YOUR_TOKEN_HERE" });
await client.collections.items.listItems("580e63fc8c9a982ac9b8b745", {
  offset: 0,
  limit: 100,
});

Store Vectary embed code in a Link or plain Text field because the API does not support code blocks in Rich Text fields.

What can you build with the 3D and AR with Vectary integration?

Integrating Vectary lets you put interactive 3D and AR on your pages without writing a rendering engine or shipping a mobile app.

• Product configurator: Wire buttons to setActiveMaterial and setConfigurationState so shoppers switch a sofa's fabric or a desk's finish on a live 3D model, as the ARrange and beflo configurators demonstrate.
• 3D product hero: Drop a single Code Embed onto a landing page so visitors rotate and zoom a watch or accessory, the pattern used in the vectary-hero example site.
• App-free AR product viewer: Add an embed that launches AR through ARKit on iOS and ARCore on Android. Shoppers can place furniture or electronics in their room with no app download.
• CMS-driven 3D catalog: Store a Vectary model URL in each Collection List item and bind it to an Embed element, so a catalog of products each renders its own interactive scene.

If you need more control over configurator logic or model loading tied to product data, the API integration path covers those cases with full flexibility.