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. Use interactions and animations. The Preview mode shows how it will look in the WebAR viewer.
3. Click on the Share tab and toggle the sharing option.
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.

Testing WebAR iframe code

No time to generate your WebAR code? Test this iframe on your website:<iframe src="https://app.vectary.com/p/6JUjnpxVLsmPmDGW0tpVSQ" 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 Share tab and click on the Syncronize changes - there is no need to replace the code. The 3D viewer will be automatically updated on all of your sites.

‍

How to add and AR icon to your viewer in Vectary

1. Go to Vectary Studio
2. Click esc to get to the scene settings
3. Click on the Advanced settings and choose Augmented Reality. You can customize the icon and it's possition.

Please note: interactions in AR are not available at the moment. However AR preview can showcase a product variation your visitors set up in the 3D viewer.

‍

FAQ

Is it paid?

Sign up to prepare a 3D viewer for your website. Animations and interactions are part of the paid plan. Check our pricing.

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

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

‍