Viewer – stylizacja (parametry URL)

Stylizacja za pomocą parametrów URL

Parametry URL pozwalają dostosować wygląd i zachowanie Viewer’a bez modyfikowania kodu. Parametry możesz skonfigurować bezpośrednio w aplikacji (np. w zakładce „Udostępnianie” lub wewnątrz Viewer’a) i 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/viewer/1?bcg=uploaded&env=8&light_intensity=1.79&add_to_cart=1&nav=0

Otwórz w nowej karcie
Docs Viewer — Styling URL — Podgląd na żywo / demo osadzania (Vanilla JS).
index.html
1<!DOCTYPE html>
2 <html>
3   <head>
4     <title>Viewer - 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 Viewer"
31       src="https://alterproduct.com/app/viewer/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