Konfigurator – stylizacja (parametry URL)

Stylizacja parametrami URL

Parametry URL pozwalają dostosować wygląd i zachowanie konfiguratora bez potrzeby modyfikowania kodu. Możesz je skonfigurować bezpośrednio w aplikacji (np. w zakładce „Udostępnianie” lub wewnątrz konfiguratora), aby zmieniać tło, środowisko 3D czy widoczność interfejsu.

Lista dostępnych parametrów URL

ParametrTypOpisWartość domyślna
nav0 / 1Ukrywa (0) lub pokazuje (1) górną nawigację. Dostępne tylko w planach Business / Business PRO.1
add_to_cart0 / 1Ukrywa (0) lub pokazuje (1) przycisk „Dodaj do koszyka”.0
bcgstringTło sceny, np. grad_ff7575_4d1212, i16, uploaded, theme lub env — ustawiane w zakładce „Scena”.
envintID środowiska HDRI (oświetlenie), konfigurowane w zakładce „Scena”.1
light_intensity0 – 2Intensywność oświetlenia sceny 3D.0.6

Przykład na żywo

Adres URL: https://alterproduct.com/app/configurator/1?bcg=uploaded&env=8&light_intensity=1.79&add_to_cart=1&nav=0

Otwórz w nowej karcie
Docs Konfigurator - Stylizacja URL — Podgląd na żywo / demo osadzania (Vanilla JS).
index.html
1<!DOCTYPE html>
2 <html>
3  <head>
4    <title>Configurator - Styling URL</title>
5    <meta charset="utf-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7
8    <style>
9      * {
10        box-sizing: border-box;
11      }
12
13      html,
14      body,
15      #root {
16        width: 100%;
17        height: 100%;
18        margin: 0;
19        padding: 0;
20      }
21
22      iframe {
23        display: block;
24      }
25    </style>
26  </head>
27  <body>
28    <iframe
29      loading="lazy"
30      title="Product Configurator"
31      src="https://alterproduct.com/app/configurator/1?bcg=uploaded&env=8&light_intensity=1.79&add_to_cart=1&nav=0"
32      width="100%"
33      height="100%"
34      frameBorder="0"
35      allowFullScreen
36    ></iframe>
37  </body>
38</html>
Zobacz projekt na GitHub Github Logo