How to embed Vectary WebAR viewer to Webflow

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. Do you want to know how good a Vectary WebAR viewer can look on the Webflow site? Just check our homepage.

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 Publish tab and click Generate. You can add additional animations, just as rotation, mouse following, and more.
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 Vectary Viewer code to Code editor in Webflow.
7. Once you publish your site, it will appear right where you pasted it.

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 id="3f15feea-4efa-4396-860c-dad2c7192481" src="https://www.vectary.com/embed/viewer/v1/viewer.html?model=3f15feea-4efa-4396-860c-dad2c7192481&env=studio1&envRotation=0&autoplay=1&turntable=0.5&showPreloader=1" 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 Generate 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 with a limited number of views. 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.

‍