Integration des Plugins in einem individuellen Shop
Wir bieten ein fertiges Plugin für alle beliebten E-Commerce-Plattformen, mit dem Sie fast keine Arbeit haben. Wenn Ihre Website jedoch auf einer maßgeschneiderten E-Commerce-Lösung läuft, wird Sie diese Anleitung Schritt für Schritt führen, um den Magic Mirror erfolgreich zu integrieren.
Sie können sich in unserem Demo-Shop ansehen, wie das Ergebnis Ihrer Arbeit aussehen kann.
Integration des Magic Mirror
Der Magic Mirror ist ein Plugin, das Sie im Katalog (Produktliste) oder auf der Produktseite platzieren können.
Platzieren Sie den folgenden Code im Footer Ihrer Seite vor dem Schließen des </body> Tags und ersetzen Sie "API_KEY" durch Ihre tatsächlichen Daten. Diese Daten finden Sie in Ihren Profil-Einstellungen im Auglio-Client-Dashboard.
<script src="//m.virtooal.com/API_KEY" async></script> Jetzt sollten Sie das Icon des Magic Mirror in der unteren linken Ecke Ihrer Website sehen.
Optionen für das Magic Mirror-Icon
Das Plugin-Icon ist standardmäßig immer sichtbar (in der unteren linken Ecke). Wenn Sie dieses Icon nur dann sichtbar machen möchten, wenn mindestens ein integriertes Produkt auf der Seite mit einer korrekt eingestellten "Try On"-Schaltfläche vorhanden ist, befolgen Sie bitte diese Schritte:
- Navigieren Sie zu Ihrem Konto
- Gehen Sie zu Integration > App-Einstellungen
- In der Sektion "Verhalten" aktivieren Sie den Umschalter "Nur virtuellen Spiegel auf Seiten mit dem Button "Anprobieren" anzeigen".
- Klicken Sie auf Speichern
"Anprobieren"-Button
Der "Anprobieren"-Button startet das Magic Mirror-Plugin und wendet das Produkt auf einem Model oder einem Foto des Kunden an (eventuell auf dem Gesicht des Kunden im Live-Modus). Um dem Magic Mirror mitzuteilen, welches Produkt beim Klick angewendet werden soll, müssen Sie ein data-virtooal_id-Attribut für diesen Button festlegen.
<button class="virtooal-tryon-btn" style="display: none;" data-virtooal_id="ID IHRES PRODUKTS">ANPROBIEREN</button>Die einzigen erforderlichen Parameter eines "Anprobieren"-Buttons sind:
- virtooal-tryon-btn-Klasse
- data-virtooal_id-Attribut mit einem Wert entsprechend der Artikel-ID des Produkts (Weitere Informationen zu Artikel-IDs und zum Importieren Ihrer Produkte)
Wir empfehlen dringend, diesen Button standardmäßig ausgeblendet zu halten, da während die Magic Mirror-Initialisierung läuft, alle "Anprobieren"-Buttons auf einer Seite überprüft werden. Der Button wird angezeigt, wenn es eine Übereinstimmung mit Ihren integrierten Produkten gibt.
Sie können auch Klassen, Stile oder Text hinzufügen, um den Button in Ihr Design zu integrieren.
