Alle Plattformen / Anleitung
3D-Modell und AR in Wix
In Wix fügen Sie ein Element „Embed HTML“ hinzu und setzen den Code oder nur den Link des Modells ein. Achtung bei Wix Stores: Die Produktbeschreibung akzeptiert kein HTML.
- Plugin / App
- Nicht nötig
- Wo der Code hinkommt
- Hinzufügen → Embed Code → „Embed HTML“
- AR auf dem Handy
- Meist ja; auf dem Handy testen
Variante 1: Element Embed HTML auf einer Seite
Funktioniert auf jeder Wix-Seite: Produktpräsentation, Landingpage, Portfolio.
Schritt 1
Code aus 3DView kopieren
Öffnen Sie in Ihrem Konto „Meine Modelle“ und klicken Sie beim Modell auf „Code für die Website“: Der Code wird sofort kopiert. Die Tabs „Shopify“, „WooCommerce“ und „Jede Website“ zeigen nur, wo Sie ihn einfügen; der Code ist derselbe.
Code aus 3DView kopieren Schritt 2
Element Embed HTML hinzufügen
Klicken Sie im Editor auf „+“ (Add Elements) → Embed Code → „Embed HTML“. In Wix Studio: Add → Embed & Social → Embed HTML.
Element Embed HTML hinzufügen Schritt 3
Code einfügen
Klicken Sie auf „Enter Code“, wählen Sie „Code“ und fügen Sie den Code ein. Oder wählen Sie „Website Address“ und fügen Sie nur den Link des Modells ein (https://www.3dview.ai/embed/…). Klicken Sie auf Update.
Code einfügen Schritt 4
Feld vergrößern
Ziehen Sie an den Ecken des Elements, damit es mindestens 480px hoch ist und die volle Breite des Abschnitts hat.
Schritt 5
Veröffentlichen
Klicken Sie auf Publish und prüfen Sie die Website am Computer und auf dem Handy.
Veröffentlichen
Variante 2: Wix Stores (der Wix-Shop)
Die Produktbeschreibung in Wix Stores ist reiner Text: Sie akzeptiert kein iframe. Ein Embed-HTML-Element auf der Produktseite erscheint bei allen Produkten.
Vorteile
- Link und QR-Code funktionieren bei jedem Produkt, ohne Code.
Nachteile
- Ohne Wix-Code (Velo) erscheint das Modell nicht direkt auf der Produktseite.
Schritt 1
Link und QR-Code holen
Klicken Sie in „Meine Modelle“ beim Modell auf „Teilen / QR“: Sie kopieren den direkten Link zum Modell (öffnet 3D und AR auf dem Handy) und speichern den QR-Code.
Schritt 2
Link in die Beschreibung setzen
Schreiben Sie in die Produktbeschreibung „Produkt in 3D und AR ansehen“ und verlinken Sie es mit dem Link des Modells.
Schritt 3
Oder eine eigene Seite
Erstellen Sie für das Produkt eine Wix-Seite (oder einen Abschnitt) mit dem Element Embed HTML und setzen Sie in der Beschreibung eine Schaltfläche dorthin.
Schritt 4
Fortgeschritten: Velo
Mit Velo (dem Wix-Code) kann ein einziges Embed-HTML-Element für jedes Produkt einen anderen Link erhalten. Fragen Sie einen Wix-Entwickler.
Der Code, den Sie einfügen
So sieht der aus 3DView kopierte Code aus (bei Ihnen steht die ID des Modells statt MODEL_ID). Die Höhe (height:480px) können Sie ändern; den Rest lassen Sie unverändert. Hängen Sie ?controls=0 an die ID an, um die Bedienleiste unter dem Modell auszublenden.
<iframe src="https://www.3dview.ai/embed/MODEL_ID" title="Sofa Oslo" loading="lazy" allow="xr-spatial-tracking; fullscreen; accelerometer; gyroscope" allowfullscreen style="width:100%;height:480px;border:0;border-radius:12px"></iframe>
So prüfen Sie, ob es funktioniert
- Am Computer: Das Modell lädt, lässt sich mit der Maus drehen, und die Schaltfläche „Auf dem Handy ansehen“ zeigt einen QR-Code für AR.
- Auf Android (Chrome): Tippen Sie auf die AR-Schaltfläche in der Ecke des Modells. Der AR-Viewer von Google öffnet sich und Sie stellen das Produkt in Originalgröße in den Raum. Das Handy muss ARCore unterstützen.
- Auf iPhone/iPad (Safari): Tippen Sie auf die AR-Schaltfläche. AR Quick Look öffnet sich, ganz ohne App.
- Testen Sie in Safari oder Chrome, nicht im internen Browser von Facebook/Instagram: Dort startet AR nicht.
- Wix setzt den Code in einen eigenen Frame. Startet die AR-Schaltfläche auf dem Handy nicht, fügen Sie eine Wix-Schaltfläche mit dem Link des Modells hinzu: Dort funktioniert AR immer.
Häufige Probleme und Lösungen
Das Element hat Scrollleisten oder schneidet das Modell ab
Vergrößern Sie das Embed-HTML-Feld im Editor (nicht nur den Code). Prüfen Sie Mobilgeräte separat in der mobilen Ansicht des Editors.
Der Code verschwindet oder wird nach dem Speichern zu Text
Der Editor hat ihn bereinigt: Fügen Sie den Code im HTML- bzw. Quellcode-Modus ein, nicht im visuellen Modus (die Schritte oben zeigen die genaue Schaltfläche). Verschwindet er trotzdem, erlaubt die Plattform keine iframes: Nutzen Sie Link und QR-Code aus „Teilen / QR“.
Das Modell ist zu klein oder wird abgeschnitten
Erhöhen Sie die Höhe im Code: aus height:480px wird zum Beispiel height:600px. Die Breite (100%) passt sich automatisch an die Spalte an. Auf dem Handy reichen meist 400–500px.
Die AR-Schaltfläche erscheint nicht oder startet nicht auf dem iPhone
AR auf dem iPhone braucht Safari (oder Chrome unter iOS) und ein iPhone/iPad mit iOS 12 oder neuer. 3DView erstellt die iPhone-Variante (USDZ) automatisch. Öffnen Sie den Link des Modells direkt (Schaltfläche „In AR ansehen“ im Konto): Funktioniert es dort, blockiert Ihre Plattform AR in eingebetteten Frames; setzen Sie unter das Modell einen Link „In AR ansehen“ zu diesem Link.
Der Browser meldet „unsichere Inhalte“ oder das Modell lädt nicht
Ändern Sie die Adresse im Code nicht auf http://. Auf einer https-Seite blockieren Browser http-Frames (gemischte Inhalte). Lassen Sie die Adresse genau so: https://www.3dview.ai/embed/…
Auf dem Modell erscheint das 3DView-Logo
Sie entfernen es pro Modell im Konto: „Logo entfernen“, eine einmalige Zahlung in Credits. Der Code bleibt derselbe.
Wird die Seite langsamer?
Nein: Der Code hat loading="lazy", das Modell lädt also erst, wenn es auf dem Bildschirm erscheint. Das Hosting ist inklusive, ohne Abo.
Vereinfachte Illustrationen, keine Screenshots; die Menüs können in Ihrer Version etwas anders aussehen.
Häufige Fragen
Brauche ich eine App aus dem Wix App Market?
Nein. Embed HTML ist in Wix enthalten.
Funktioniert es mit dem kostenlosen Wix-Tarif?
Das Element Embed HTML ist verfügbar, aber für einen echten Shop brauchen Sie ohnehin einen Tarif mit Domain und Zahlungen.
Sie haben noch kein 3D-Modell?
Scannen Sie das Produkt mit dem Handy oder starten Sie mit einem Foto. Sie erhalten den Code für die Website, den Link mit QR-Code und AR inklusive.
Erstes Modell erstellen