Web design
How to

How to put an interactive 3D or AR design onto a Squarespace website

How to embed an interactive 3D/AR design to Squarespace.

Vectary web embed is a simple way to put an interactive 3D element onto your blog or website. This technology is called WebAR. Similar to the YouTube embed procedure, the Vectary 3D/AR viewer generates a piece of code that you paste into the web editor. Anyone with iPhone or Android can get an Augmented Reality experience directly from the web without installing an app.

How to embed an interactive 3D/AR design to Squarespace

  1. Import your 3D model to the Vectary Studio or create your own model from scratch.
  2. Click on the Publish tab and Generate button.
  3. Go to your theme editor in Squarespace. Click on Pages. Now click on the section you want to edit or create a new section by clicking on the +.
  4. Click on Edit and now on the + icon in the upper right corner.
  5. Add a Code block. Read more about using Code blocks on Squarespace
  6. Delete the default text and paste the generated vectary embed code.
  7. Preview the site, if you need to do some changes, just generate the code again and the viewer will automatically update.
  8. Publish your site.
https://embedwistia-a.akamaihd.net/deliveries/01f2f9a2223f9427ea4b145e8cbcf93ad95bc816.jpg?image_play_button_size=2x&image_crop_resized=960x540&image_play_button=1&image_play_button_color=7b796ae0

Using the Code Block

How to make changes in your 3D web viewer

Say you want to change color, view or an 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 Publish 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.

Start creating

Vectary 3D/AR Viewer example:

Your Shopify page can have an interactive lement like this. Open this site on Iphone with Safari or Android with Chrome to see it in augmented reality too.

FAQ

Is it paid?

Vectary Viewer is part of our free plan with a limited number of views. Check our pricing page.

Why not just use USDZ export for the AR view?

This is a great alternative to USDZ embeds as all your website visitors can get an interactive 3D experience, not just those with iPhones. Vectary Viewer now supports Android devices too!