Viewer – podstawowe osadzanie na stronie

Osadzanie w trybie pełnoekranowym

Umieść Viewer 3D w dowolnym miejscu strony przy użyciu elementu iframe. Ustaw atrybut src na adres Viewer’a "https://alterproduct.com/app/viewer/1. Gotowy kod znajdziesz w zakładce Udostępnianie swojego projektu. Pamiętaj o włączeniu publicznej widoczności narzędzi e-commerce.

Otwórz w nowej karcie
Viewer 3D — przykład pełnoekranowy — Podgląd na żywo / demo osadzania (Vanilla JS).
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Viewer - Full Screen</title>
5    <meta charset="utf-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1" />
7    <style>
8      * { box-sizing: border-box; }
9      html, body, #root { width:100%; height:100%; margin:0; padding:0; }
10      iframe { display:block; }
11    </style>
12  </head>
13  <body>
14    <iframe
15      loading="lazy"
16      title="Product Viewer"
17      src="https://alterproduct.com/app/viewer/1"
18      width="100%"
19      height="100%"
20      frameBorder="0"
21      allowFullScreen
22    ></iframe>
23  </body>
24</html>
Zobacz projekt na GitHubGithub Logo

Podstawowa stylizacja

Viewer możesz dostosować na dwa sposoby:

  • Parametry URL – np. kolor tła, środowisko 3D, widoczność przycisków (Szczegóły tutaj).
  • Stylizacja CSS – np. wymiary, obramowanie czy zaokrąglenia kontenera div.
Otwórz w nowej karcie
Viewer 3D — podstawowa stylizacja — Podgląd na żywo / demo osadzania (Vanilla JS).
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Viewer - Basic styling</title>
5    <style>
6      * { box-sizing: border-box; }
7
8      html, body, #root {
9        width: 100%;
10        height: 100%;
11        margin: 0;
12        padding: 0;
13      }
14
15      body {
16        display: grid;
17        justify-content: center;
18        align-items: center;
19      }
20
21      iframe {
22        display: block;
23        border-radius: 14px;
24      }
25
26      #wrapper {
27        height: 320px;
28        width: 400px;
29        background: linear-gradient(0deg, rgba(0,43,133,1) 0%, rgba(0,182,215,1) 100%);
30        border-radius: 14px;
31      }
32    </style>
33  </head>
34  <body>
35    <div id="wrapper">
36      <iframe
37        loading="lazy"
38        title="Product Viewer"
39        src="https://alterproduct.com/app/viewer/1?bcg=i16"
40        width="100%"
41        height="100%"
42        frameBorder="0"
43        allowFullScreen
44      ></iframe>
45    </div>
46  </body>
47</html>
Zobacz projekt na GitHubGithub Logo