Viewer — vormgeving (URL-parameters)

Vormgeving met URL-parameters

Met URL-parameters pas je het uiterlijk en gedrag van de Viewer aan zonder de code te wijzigen. Je kunt parameters rechtstreeks in de app instellen, bijvoorbeeld op het tabblad Delen of in de Viewer. Hiermee regel je de achtergrondmodus, effecten voor afbeeldingsachtergronden, belichting van de 3D-omgeving, zichtbaarheid van de interface en van Toevoegen aan winkelwagen. Vooraf geselecteerde varianten (WooCommerce-attributen): Je kunt ook een specifieke productvariant vooraf selecteren met queryparameters zoals attribute_pa_color, pa_size of size. Deze parameters worden verwerkt via de attribuut-/termkoppelingen van je winkel, zodat de Viewer direct met een bepaalde kleur, maat, materiaal, druktechniek of eigen kleur wordt geopend.

Lijst met beschikbare URL-parameters

ParameterTypeBeschrijvingStandaardwaarde
nav0 / 1Verbergt (0) of toont (1) de navigatie. Alleen beschikbaar in Business.1
add_to_cart0 / 1Verbergt (0) of toont (1) de knop Toevoegen aan winkelwagen.0
bcgstringAchtergrondmodus van de scène: grad_f6f7fb_e8fff6, app_img_123, uploaded, theme of env.Winkel/standaard
envintID van de HDRI-omgeving voor de scènebelichting. Bij bcg=env wordt de omgeving ook als zichtbare scèneachtergrond gebruikt.1
light_intensity0 - 2Lichtsterkte van de 3D-scène.0.6
bcg_blur0 - 100Vervaging voor afbeeldingsachtergronden die zijn geselecteerd met bcg=app_img_*, bcg=uploaded of bcg=theme.0
bcg_brightness0 - 3Helderheid/emissieniveau voor afbeeldingsachtergronden.1
bcg_underlaystringOnderlaag achter afbeeldingsachtergronden. Gebruik grad_ffffff_f5f7fb voor een kleurverloop of none om de onderlaag te verwijderen.Standaardachtergrond
attribute_pa_*stringSelecteer vooraf een attribuutterm van een WooCommerce-product. Geldige sleutelvormen zijn onder meer attribute_pa_color, pa_color en color. Ondersteunde aliassen zijn maat, kleur, materiaal, druktype en patroon.
custom_color0 / 1 / trueVraagt de variant met eigen kleur aan als het product die ondersteunt. Dit kan ook met color=custom.0
picked_colorsstringKomma-gescheiden eigen kleurwaarden in de notatie detailKey:%23hex, bijvoorbeeld front:%23ff6b6b,back:%2300ff88. Het teken # moet als %23 worden URL-gecodeerd.

Voorbeeld

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>