Web design
How to
Augmented Reality

How to embed Vectary WebAR viewer to Webflow

How to embed your 3D design to Webflow site.

Vectary web viewer helps you integrate 3D and AR on your Webflow website as easily as embedding a YouTube video. Webflow is an amazing online tool for designers and agencies to create their websites without coding.


What is WebAR?

WebAR is a technology that allows visitors to get Augmented Reality experience from the web without the need to download an external app. Vectary WebAR viewer supports this on both iPhones and Androids.

How to embed your 3D design to Webflow site

  1. Import your 3D model to Vectary Studio or create your model from scratch.
  2. Rotate, pan, or zoom the 3D model and set the view. It will determine how it will look in the WebAR viewer.
  3. Click on the Share tab and toggle Share to web.
  4. Copy the Embed code.
  5. Go to your Webflow web editor. Click on the “+” icon to add an Embed element. You can find it under Components. Drag and drop the Embed element into the container.
  6. Paste your embed code to Code editor in Webflow.
  7. Once you publish your site, it will appear right where you pasted it. You can update it any time, just hit Synchronize after making changes.

Tip: Learn more about 3D model optimization, sharing on the web with transparent background and AR, or creating product configurators.

Webflow WebAR viewer example

Your viewer can look like this. Open this blog on iPhone, or Android and click on the AR badge to see it in Augmented Reality.

Testing WebAR iframe code

No time to generate your WebAR code? Test this iframe on your website:<iframe src="https://app.vectary.com/p/7iG2AipJGbuB1ym4tgRbip" frameborder="0" width="100%" height="480"></iframe>

The Vectary WebAR viewer can be customized with various animations and behaviors. You can also make a custom interactive Web app with the viewer API. Imagine an e-shop where your visitors can choose from various color and shape variations in one viewer.

How to make changes in your Vectary WebAR viewer

Say you want to change color, view, or the entire shape of your 3D model. Vectary editor works like instant 3D/AR CMS for your web viewer:

  1. Open your 3D project on Vectary
  2. Make changes
  3. Click on the Viewer tab and click on the Synchronize button again - there is no need to replace the code. The 3D viewer will be automatically updated on all of your sites.

FAQ

Is it paid?

You can test the Vectary viewer on your website for free. Check our pricing.

Why not just use USDZ export for the AR view?

Vectary WebAR is a great alternative to USDZ embeds as all your website visitors can get an interactive 3D experience, not just those with iPhones. There are millions of Androids too!

I need a special feature of the viewer, can you help me with that?

Sure, contact us at sales@vectary.com or via chat.