Vectary 3D & AR

How to integrate Vectary 3D & AR with Webflow

Integrating Vectary with Webflow brings interactive 3D models and AR experiences directly to your website. While there's no marketplace app, the embed method offers quick implementation for most use cases, and the API provides advanced capabilities for dynamic content management and e-commerce integration.

Choose the API approach when you need programmatic control over model selection, automated content updates, or deep e-commerce integration with product variants. The Vectary Model API enables dynamic model loading based on product data and real-time synchronization between your 3D assets and Webflow CMS.

Embed 3D and AR models

Add interactive 3D models and AR experiences to any Webflow page using Vectary's iframe embed code. This method requires no coding knowledge and provides immediate results with full interactivity and AR capabilities on supported devices. The embed automatically includes viewer controls, AR activation buttons, and responsive sizing. Perfect for product showcases, portfolio pieces, and marketing pages. Start by creating your model in Vectary Studio.

Key capabilities:

• Share to web generates iframe code from any Vectary project

• Automatic AR support with WebAR technology on mobile devices

• Live synchronization reflects model updates without changing embed code

• Texture quality controls for performance optimization

• Responsive sizing with percentage-based width and height

Place the embed element anywhere in your Webflow design using the visual editor. Models update automatically when you make changes in Vectary Studio and refresh sharing settings.

Build with Webflow and Vectary API

Connect Vectary's 3D models dynamically with your Webflow site using the Model API. This approach enables automated model selection based on product data, variant switching, and programmatic content management. Essential for e-commerce sites with multiple products or dynamic galleries. Access requires a Vectary business subscription and basic JavaScript implementation.

API capabilities:

• Dynamic model loading with setWebflowEcommerce method

• Product-model mapping using folder organization and naming conventions

• Variant synchronization between Webflow products and Vectary materials

• Custom event tracking for analytics and user interactions

• Programmatic updates through REST endpoints

The API integration requires adding a script to your Webflow site footer and organizing your Vectary models in folders that match your product structure.

E-commerce product integration

Map Vectary 3D models to Webflow e-commerce products automatically. The integration uses folder IDs and product naming to display the correct model on each product page. When customers select variants, the 3D model updates to show the corresponding materials and configurations.

Set up requires organizing models in Vectary folders, matching model names to product names, and adding the Model API script to your site footer. The script handles model selection and variant switching without additional coding.

Dynamic galleries and collections

Create automated 3D galleries that pull models from Vectary folders. Use Webflow CMS to store model IDs and metadata, then display interactive 3D content in collection lists. Updates in Vectary sync automatically to your live site.

Implement by storing Vectary embed URLs in CMS fields and binding them to embed elements in collection templates. For advanced filtering and sorting, combine with Webflow's CMS API for programmatic updates.

What you can build

Integrating Vectary with Webflow opens possibilities for creating immersive, interactive web experiences. Here are proven applications:

• E-commerce product configurators: Build interactive shopping experiences where customers can customize products in real-time, like furniture retailers offering material and color options with instant 3D preview and AR placement

• Portfolio showcases: Create stunning design portfolios with rotatable 3D models, perfect for industrial designers, architects, or 3D artists presenting their work with full interactivity

• Educational demonstrations: Develop interactive learning modules with 3D models of complex machinery, anatomical structures, or scientific concepts that students can explore from every angle

• Virtual showrooms: Design immersive brand experiences where visitors can explore product lines in 3D, like automotive sites with detailed car configurators or fashion brands with 360-degree product views