3DView.ai
Creează

Toate platformele / Ghid

Model 3D și AR pe Webflow

Pe Webflow folosești elementul Code Embed. În șablonul de produs (Ecommerce sau CMS) poți lua ID-ul modelului dintr-un câmp, ca fiecare produs să-și arate modelul.

Plugin / aplicație
Nu e nevoie
Unde lipești codul
Add → Code Embed
AR pe telefon
Da, Android și iPhone

Varianta 1: Code Embed pe o pagină

Pentru o pagină anume. Codul personalizat cere un plan Webflow plătit (site sau workspace).

  1. Pasul 1

    Copiază codul din 3DView

    Intră în cont la „Modelele mele” și, la model, apasă „Cod pentru site”: codul se copiază imediat. Filele Shopify, WooCommerce și „Orice site” arată doar unde îl lipești; codul e același.

    Copiază codul din 3DView

  2. Pasul 2

    Adaugă elementul Code Embed

    În Designer deschide panoul Add (A) și trage „Code Embed” în pagină.

    Adaugă elementul Code Embed

  3. Pasul 3

    Lipește codul

    Lipește codul în fereastra de cod și apasă „Save & Close”.

    Lipește codul

  4. Pasul 4

    Publică

    Apasă Publish și verifică site-ul publicat (în Designer nu vezi modelul).

    Publică

Varianta 2: Șablonul de produs, cu câmp CMS

Un singur Code Embed în șablon; fiecare produs își arată modelul.

  1. Pasul 1

    Copiază codul din 3DView

    Intră în cont la „Modelele mele” și, la model, apasă „Cod pentru site”: codul se copiază imediat. Filele Shopify, WooCommerce și „Orice site” arată doar unde îl lipești; codul e același.

    Copiază codul din 3DView

  2. Pasul 2

    Adaugă un câmp

    În colecția Products (sau colecția ta CMS) adaugă un câmp Plain text numit „Model 3D ID”.

  3. Pasul 3

    Completează ID-ul

    ID-ul modelului e partea de după /embed/ din codul copiat. Pune-l în câmpul fiecărui produs.

  4. Pasul 4

    Pune Code Embed în șablon

    În șablonul Product (Template) adaugă Code Embed, lipește codul de mai jos și înlocuiește [Model 3D ID] cu câmpul tău din „+ 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>

Codul pe care îl lipești

Așa arată codul copiat din 3DView (la tine apare ID-ul modelului în loc de MODEL_ID). Poți schimba înălțimea (height:480px); restul lasă-l neschimbat. Adaugă ?controls=0 după ID ca să ascunzi bara de reglaje de sub model.

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

Cum verifici că merge

  • Pe calculator: modelul se încarcă, se rotește cu mouse-ul, iar butonul „Vezi pe telefon” arată un cod QR pentru AR.
  • Pe Android (Chrome): apasă butonul AR din colțul modelului. Se deschide vizualizatorul AR Google și pui produsul în cameră, la mărime reală. Telefonul trebuie să fie compatibil ARCore.
  • Pe iPhone/iPad (Safari): apasă butonul AR. Se deschide AR Quick Look, fără nicio aplicație.
  • Testează din Safari sau Chrome, nu din browserul intern al Facebook/Instagram: acolo AR nu pornește.

Probleme frecvente și soluții

Nu pot adăuga Code Embed

Pe planul gratuit Webflow, codul personalizat nu se publică. Ai nevoie de un plan de site plătit sau de un workspace plătit.

Codul dispare sau devine text după salvare

Editorul l-a curățat: lipește codul în modul HTML / cod sursă, nu în modul vizual (pașii de mai sus arată butonul exact). Dacă tot dispare, platforma nu permite iframe-uri: folosește linkul și codul QR din „Distribuie / QR”.

Modelul e prea mic sau apare tăiat

Mărește înălțimea din cod: height:480px devine, de exemplu, height:600px. Lățimea (100%) se adaptează singură la coloană. Pe telefon 400–500px e de obicei suficient.

Butonul AR nu apare sau nu pornește pe iPhone

AR pe iPhone cere Safari (sau Chrome pe iOS) și un iPhone/iPad cu iOS 12 sau mai nou. 3DView pregătește automat varianta pentru iPhone (USDZ). Deschide linkul modelului direct (butonul „Vezi în AR” din cont): dacă acolo merge, platforma ta blochează AR în cadrele încorporate; pune sub model un link „Vezi în AR” către acel link.

Browserul spune „conținut nesigur” sau modelul nu se încarcă

Nu schimba adresa din cod în http://. Pe un site https, browserele blochează cadrele http (conținut mixt). Lasă adresa exact cum e: https://www.3dview.ai/embed/…

Apare logo-ul 3DView pe model

Îl scoți per model, din cont: „Elimină logo”, o singură plată în credite. Codul rămâne același.

Încetinește pagina?

Nu: codul are loading="lazy", deci modelul se încarcă doar când ajunge pe ecran. Găzduirea e inclusă, fără abonament.

Ilustrații simplificate, nu capturi de ecran; meniurile pot arăta puțin diferit în versiunea ta.

Întrebări frecvente

Am nevoie de o aplicație Webflow?

Nu. Code Embed e inclus în Webflow.

Pot folosi varianta cu script?

Da: pui scriptul /embed.js o singură dată în Site settings → Custom code, apoi <view3d-model> în Code Embed. Iframe-ul e suficient pentru majoritatea site-urilor.

Nu ai încă un model 3D?

Scanează produsul cu telefonul sau pornește de la o poză. Primești codul pentru site, linkul cu QR și AR incluse.

Creează-ți primul model