3DView.ai
Create

All platforms / Guide

3D model and AR on Webflow

On Webflow you use the Code Embed element. In the product template (Ecommerce or CMS), you can take the model ID from a field, so each product shows its own model.

Plugin / app
Not needed
Where to paste the code
Add → Code Embed
AR on phones
Yes, Android and iPhone

Option 1: Code Embed on a page

For a specific page. Custom code requires a paid Webflow plan (site or workspace).

  1. Step 1

    Copy the code from 3DView

    Sign in, go to “My models” and, on the model, click “Code for your site”: the code is copied right away. The Shopify, WooCommerce and “Any site” tabs only show where to paste it; the code is the same.

    Copy the code from 3DView

  2. Step 2

    Add the Code Embed element

    In the Designer, open the Add panel (A) and drag “Code Embed” onto the page.

    Add the Code Embed element

  3. Step 3

    Paste the code

    Paste the code into the code window and click “Save & Close”.

    Paste the code

  4. Step 4

    Publish

    Click Publish and check the published site (the model doesn't show in the Designer).

    Publish

Option 2: Product template, with a CMS field

A single Code Embed in the template; each product shows its own model.

  1. Step 1

    Copy the code from 3DView

    Sign in, go to “My models” and, on the model, click “Code for your site”: the code is copied right away. The Shopify, WooCommerce and “Any site” tabs only show where to paste it; the code is the same.

    Copy the code from 3DView

  2. Step 2

    Add a field

    In the Products collection (or your CMS collection), add a Plain text field named “Model 3D ID”.

  3. Step 3

    Fill in the ID

    The model ID is the part after /embed/ in the copied code. Put it in each product's field.

  4. Step 4

    Add Code Embed to the template

    In the Product (Template), add Code Embed, paste the code below and replace [Model 3D ID] with your field from “+ Add Field”.

<iframe src="https://www.3dview.ai/embed/[Model 3D ID]" title="[Name]" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>

The code you paste

This is what the code copied from 3DView looks like (yours shows the model ID instead of MODEL_ID). You can change the height (height:480px); leave the rest as it is. Add ?controls=0 after the ID to hide the controls bar under the model.

<iframe src="https://www.3dview.ai/embed/MODEL_ID" title="Oslo sofa" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>

How to check it works

  • On a computer: the model loads, rotates with the mouse, and the “View on phone” button shows a QR code for AR.
  • On Android (Chrome): tap the AR button in the corner of the model. Google's AR viewer opens and you place the product in your room at real size. The phone must support ARCore.
  • On iPhone/iPad (Safari): tap the AR button. AR Quick Look opens, no app needed.
  • Test in Safari or Chrome, not in the Facebook/Instagram in-app browser: AR doesn't start there.

Common problems and fixes

I can't add Code Embed

On the free Webflow plan, custom code isn't published. You need a paid site plan or a paid workspace.

The code disappears or turns into text after saving

The editor stripped it: paste the code in HTML / source code mode, not in visual mode (the steps above show the exact button). If it still disappears, the platform doesn't allow iframes: use the link and QR code from “Share / QR”.

The model is too small or gets cut off

Increase the height in the code: change height:480px to, say, height:600px. The width (100%) adapts to the column on its own. On phones, 400–500px is usually enough.

The AR button doesn't appear or doesn't start on iPhone

AR on iPhone needs Safari (or Chrome on iOS) and an iPhone/iPad with iOS 12 or later. 3DView prepares the iPhone version (USDZ) automatically. Open the model's direct link (the “View in AR” button in your account): if it works there, your platform blocks AR inside embedded frames; add a “View in AR” link to that URL under the model.

The browser says “insecure content” or the model doesn't load

Don't change the address in the code to http://. On an https site, browsers block http frames (mixed content). Leave the address exactly as it is: https://www.3dview.ai/embed/…

The 3DView logo appears on the model

You remove it per model, from your account: “Remove logo”, a one-time payment in credits. The code stays the same.

Does it slow down the page?

No: the code has loading="lazy", so the model only loads when it scrolls into view. Hosting is included, no subscription.

Simplified illustrations, not screenshots; menus may look slightly different in your version.

Frequently asked questions

Do I need a Webflow app?

No. Code Embed is built into Webflow.

Can I use the script option?

Yes: add the /embed.js script once in Site settings → Custom code, then <view3d-model> in Code Embed. The iframe is enough for most sites.

Don't have a 3D model yet?

Scan the product with your phone or start from a photo. You get the code for your site, a link with QR code, and AR included.

Create your first model