Konfigurator – podstawowe osadzanie na stronie

Osadzanie w trybie pełnoekranowym

Umieść konfigurator produktów w dowolnym miejscu strony przy użyciu elementu iframe. Wystarczy ustawić atrybut src wskazujący adres konfiguratora <iframe src="https://alterproduct.com/app/configurator/1" width="100%" height="100%">. Gotowy kod iframe znajdziesz w zakładce „Udostępnianie” swojego projektu. Tam też skonfigurujesz parametry URL. Upewnij się, że Twoje narzędzia e-commerce są ustawione jako publiczne, aby iframe działał poprawnie.

Otwórz w nowej karcie
Docs Konfigurator - osadzanie pełnoekranowe — Podgląd na żywo / demo osadzania (Vanilla JS).
index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Configurator - Full Screen</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"
32      width="100%"
33      height="100%"
34      frameBorder="0"
35      allowFullScreen
36    ></iframe>
37  </body>
38</html>
Zobacz projekt na GitHub Github Logo

Podstawowa stylizacja

Konfigurator możesz dostosować na dwa sposoby:

  • Za pomocą parametrów URL — konfigurowalne w aplikacji (np. kolor tła, środowisko 3D, widoczność przycisków). Więcej informacji znajdziesz na stronie Stylizacja (parametry URL).
  • Za pomocą stylizacji CSS kontenera, np. div, w którym osadzony jest iframe (np. wymiary, obramowanie, zaokrąglenia).
Otwórz w nowej karcie
Docs Konfigurator - podstawowa stylizacja — Podgląd na żywo / demo osadzania (Vanilla JS).
index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Configurator - Basic Styling</title>
5
6    <style>
7      * {
8        box-sizing: border-box;
9      }
10
11      html,
12      body,
13      #root {
14        width: 100%;
15        height: 100%;
16        margin: 0;
17        padding: 0;
18      }
19
20      body{
21        display: grid;
22        justify-content: center;
23        align-items: center;
24      }
25
26      iframe {
27        display: block;
28        border-radius: 14px;
29      }
30
31      #wrapper {
32        height: 320px;
33        width: 400px;
34        background: linear-gradient(0deg, rgba(0,43,133,1) 0%, rgba(0,182,215,1) 100%);
35        border-radius: 14px;
36      }
37    </style>
38  </head>
39  <body>
40    <div id="wrapper">
41      <iframe
42        loading="lazy"
43        title="Product Configurator"
44        src="https://alterproduct.com/app/configurator/1"
45        width="100%"
46        height="100%"
47        frameBorder="0"
48        allowFullScreen
49      ></iframe>
50    </div>
51  </body>
52</html>
Zobacz projekt na GitHub Github Logo