Vectary

Static product photos can't show an item from every angle or place it in a shopper's room. They also do not support material swaps on click. There is no native element for Vectary scenes the way there is for images or video. Building an interactive 3D viewer from scratch means WebGL development plus separate AR files for iOS and Android.

Vectary's iframe embed code puts interactive 3D scenes and app-free WebAR on any Webflow page. Edits made in Vectary Studio appear on the live site without touching the embed code. On Vectary's Business plan, the Model API adds JavaScript control over embedded scenes. It handles configurator logic such as material swaps and variant changes.

The integration fits ecommerce teams that sell configurable products and agencies that build product launch pages. Manufacturers can use it for 3D quoting tools. Vectary names automotive, electronics, furniture, fashion, and consumer products among its target industries. Designers can stay on the no-code embed path while developers wire up the Model API.

How to integrate Vectary with Webflow

What is Vectary? Vectary is an online platform for creating interactive 3D and AR designs, including product configurators and assembly manuals, entirely in the browser. It includes a no-code 3D studio with a configurator builder, plus WebAR output for iPhone and Android. More than 4 million people use it. Teams at Panasonic, NASA, Steelcase, and KTM use it too.

Teams pair the two tools when a product deserves more than a photo gallery. A furniture brand can let shoppers rotate a desk, change its finish, and preview it in their room over AR. The same embed works across marketing pages and sales toolkits, including portfolio-style sites.

You can implement the Vectary-Webflow integration in these ways:

• The Code Embed element places Vectary's iframe code on any page without writing code.
• CMS-driven embeds pull Vectary project URLs from Webflow CMS fields to power per-item 3D catalogs.
• The Vectary Model API and Webflow Data API give full control over scene behavior and content sync. Both require JavaScript, and the Data API needs server-side development.

Most implementations combine two or more of these methods depending on the complexity of the setup.

Embed a Vectary scene with the Code Embed element

The iframe embed is the fastest path and needs no coding knowledge; it is the method the 3D and AR with Vectary integration listing documents. You need a Vectary Pro AI or Business plan for public links, and on the Webflow side a paid Workspace plan or an active Site plan (either one enables the Code Embed element). Vectary projects are private by default, so enable sharing first.

To set up the integration:

1. In Vectary, click Share in the top-right corner and toggle Share to Web.
2. Click Update all changes, then choose Copy iframe code.
3. In Webflow, drag a Code Embed element from the Add panel onto the page.
4. Paste the iframe code, then set width and height to 100% for responsive sizing.
5. Publish the site.

The embed method supports:

• Interactive 3D models visitors can explore directly on the page
• App-free WebAR on iPhone and Android, launched from the AR button in the viewer
• Animation timelines and interactive hotspots configured in Vectary Studio
• Automatic updates when you edit the scene in Vectary Studio

Skip Vectary's older Publish option; it is deprecated and uses a different rendering engine. The Code Embed element accepts up to 50,000 characters, far more than a Vectary iframe needs. One embed works well for a hero scene; for a catalog of models, move to the CMS.

Power CMS-based embeds with Webflow CMS fields

For sites with many models, store each Vectary project URL as a CMS field. That replaces hard-coded iframes. A single Code Embed element on a Collection List page template then renders a different 3D scene for every product.

To bind a Vectary URL to a Code Embed element:

1. Add a link or plain text field to your collection and paste each project's embed URL into it.
2. Place a Code Embed element on the Collection List page template and paste the iframe code.
3. Click Edit code, place your cursor where the field value should go, click the purple dot, and choose your URL field.
4. Click Save & Close and publish the site.

You can also drop an iframe into a single item's content through the plus icon in the item editor. Use an HTML embed inside the CMS for this. This method keeps content editors out of code entirely; the next method is for developers who need the scene to react to the page.

Build with the Vectary Model API and Webflow APIs

Programmatic control runs in the browser through the VctrModelApi JavaScript class. Vectary has no public REST API. That class wraps postMessage calls to the embedded iframe. The Model API is Business-only, as noted above. On the Webflow side, the Data API manages CMS items and custom code from your own server.

The setup can use these APIs:

• The Vectary Model API controls embedded scenes. It covers materials, variants, camera, animations, events, and screenshots
• Webflow Data API handles CMS collections, collection items, assets, and site publishing; Webflow webhooks push CMS and form events to your server in real time

Sync between systems starts from the browser or from Webflow's side because Vectary sends no outbound webhooks.

Control an embedded scene with VctrModelApi

This sub-method turns a static embed into an interactive configurator driven by your page's UI. Buttons on the Webflow page can drive material changes and variant changes inside the scene. They can also move the camera.

To wire it up:

1. Give the embedded iframe an id in your Code Embed element:```html

2. Load the API in your site's footer through [custom code in head and body tags](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags), under **Site settings** > **Footer code**:```js
import { VctrModelApi } from "https://app.vectary.com/studio-lite/scripts/api.js";
const api = new VctrModelApi("vectary-embed");
await api.init();

3. Call methods after init() resolves. All methods are asynchronous and return Promises.

From there, use setActiveMaterial(objectName, materialName) for material swaps and setConfigurationState() to switch variants. Use setViewState(state, duration) to animate the camera. Two-way communication runs through dispatchEvent(name, value) and addEventListener(). The scene must have Interact mode configured in Vectary Studio. Load the script from app.vectary.com; copying it to your own server causes CORS errors.

Connect a Webflow Ecommerce product template

Vectary's Webflow Ecommerce guide documents a helper method that binds an embedded scene to product data on Ecommerce pages. It needs a Vectary Business plan and a paid Webflow subscription.

To set it up:

1. Open Pages > E-commerce pages > Products Template, select Product Image in the Navigator, and add an Embed element.
2. Paste the iframe code with the id set to vectary_embed:```html

``` 3. Give the product name text element the id `productname`. 4. Add this script under Site settings > Custom code > Footer code:```js import { VctrModelApi } from "https://app.vectary.com/studio-lite/scripts/api.js"; var modelApi = new VctrModelApi("vectaryembed"); await modelApi.setWebflowEcommerce("{folderid}", "productname"); ```

An optional third parameter accepts a CSS selector for a parent element to support custom layouts. Vectary links a working demo store at store-starter-c51302.webflow.io/product/awesomeness.

Sync a 3D catalog with the Data API and webhooks

If your product data lives in an external system, manage Vectary embed URLs across CMS items from your own server. This path requires server-side development and an API token with CMS scopes.

To implement the sync:

1. Create items with POST https://api.webflow.com/v2/collections/{collection_id}/items. Store the Vectary embed URL in fieldData. Items start as drafts and require name and slug at minimum; the create item endpoint needs the CMS:write scope.
2. Publish with POST /v2/collections/{collection_id}/items/publish, or use the live items endpoint at POST /v2/collections/{collection_id}/items/live to create and publish in one call.
3. Register a webhook at POST /v2/sites/{site_id}/webhooks to catch collection_item_created and collection_item_changed events for downstream processing.

Webhook events then trigger whatever downstream processing your catalog needs.

What can you build with the Vectary Webflow integration?

These four builds all run on the same Vectary embed, from a single hero scene to a full product configurator.

• Ecommerce product configurator: Bind a 3D scene to product data with setWebflowEcommerce. Vectary's demo store at store-starter-c51302.webflow.io shows a working configurator on an Ecommerce product page.
• 3D configurator with AR preview: Furniture maker beflo built a configurator for its modular sit-stand desk with realistic textures, animations, and AR functionality.
• Quoting and sales configurator: Sharp integrated Vectary into its 3D workflow and launched 3D configurators with an Augmented Reality preview on its website, letting customers explore variants before buying.
• Interactive 3D hero section: The vectary-hero Made in Webflow project by Sonja Snoeyink describes it as a simple hero for a 3D AR product created and embedded in Vectary.

If you need more control over product configurators or CMS-driven catalogs, the API integration path also covers ecommerce page behavior with full flexibility.