Viewer – Gestaltung (URL-Parameter)

Gestaltung mit URL-Parametern

Mit URL-Parametern kannst du Aussehen und Verhalten des Viewers anpassen, ohne den Code zu ändern. Parameter lassen sich direkt in der App konfigurieren (z. B. im Tab „Teilen“ oder im Viewer). Damit steuerst du den Hintergrundmodus, Bildhintergrundeffekte, die Beleuchtung der 3D-Umgebung, die UI-Sichtbarkeit und die Sichtbarkeit der Warenkorb-Schaltfläche. Variantenvorauswahl (WooCommerce-Attribute): Du kannst außerdem eine bestimmte Produktvariante über Abfrageparameter wie attribute_pa_color, pa_size oder size vorauswählen. Diese Parameter werden anhand der Attribut-/Wertzuordnung deines Shops aufgelöst und öffnen den Viewer direkt mit einer bestimmten Farbe, Größe, einem Material, Druckverfahren oder einer eigenen Farbe.

Liste der verfügbaren URL-Parameter

ParameterTypBeschreibungStandardwert
nav0 / 1Blendet die Navigation aus (0) oder ein (1). Nur in Business verfügbar.1
add_to_cart0 / 1Blendet die Schaltfläche „In den Warenkorb“ aus (0) oder ein (1).0
bcgstringHintergrundmodus der Szene: grad_f6f7fb_e8fff6, app_img_123, uploaded, theme oder env.Shop/Standard
envintID der HDRI-Umgebung für die Szenenbeleuchtung. Bei bcg=env wird die Umgebung auch als sichtbarer Szenenhintergrund verwendet.1
light_intensity0 - 2Lichtintensität der 3D-Szene.0.6
bcg_blur0 - 100Unschärfe für Bildhintergründe, die mit bcg=app_img_*, bcg=uploaded oder bcg=theme ausgewählt werden.0
bcg_brightness0 - 3Helligkeit/Leuchtstärke von Bildhintergründen.1
bcg_underlaystringUnterlage hinter Bildhintergründen. Verwende grad_ffffff_f5f7fb für einen Verlauf oder none, um sie zu entfernen.Hintergrundstandard
attribute_pa_*stringWählt einen WooCommerce-Produktattributwert vorab aus. Akzeptierte Schlüsselformen sind attribute_pa_color, pa_color und color; unterstützt werden Aliasnamen für Größe, Farbe, Material, Druckverfahren und Muster.
custom_color0 / 1 / trueFordert die Variante mit eigener Farbe an, sofern das Produkt sie unterstützt. Dasselbe ist mit color=custom möglich.0
picked_colorsstringKommagetrennte eigene Farbwerte im Format detailKey:%23hex, z. B. front:%23ff6b6b,back:%2300ff88. Das Zeichen # muss als %23 URL-kodiert sein.

Beispiel

URL: https://alterproduct.com/app/viewer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_underlay=none&add_to_cart=1&nav=0&attribute_pa_color=white&attribute_pa_size=m

<iframe
  loading="lazy"
  title="Product Viewer"
  src="https://alterproduct.com/app/viewer/1?bcg=grad_f6f7fb_e8fff6&env=8&light_intensity=1.2&bcg_underlay=none&add_to_cart=1&nav=0&attribute_pa_color=white&attribute_pa_size=m"
  width="100%"
  height="100%"
  frameBorder="0"
  allowFullScreen
></iframe>