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).
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    <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 Configurator"
17      src="https://alterproduct.com/app/configurator/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

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).
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Configurator - Basic Styling</title>
5    <style>
6      * { box-sizing: border-box; }
7      html, body, #root { width: 100%; height: 100%; margin: 0; padding: 0; }
8      body { display: grid; justify-content: center; align-items: center; }
9      iframe { display: block; border-radius: 14px; }
10      #wrapper {
11        height: 320px;
12        width: 400px;
13        background: linear-gradient(0deg, rgba(0,43,133,1) 0%, rgba(0,182,215,1) 100%);
14        border-radius: 14px;
15      }
16    </style>
17  </head>
18  <body>
19    <div id="wrapper">
20      <iframe
21        loading="lazy"
22        title="Product Configurator"
23        src="https://alterproduct.com/app/configurator/1"
24        width="100%"
25        height="100%"
26        frameBorder="0"
27        allowFullScreen
28      ></iframe>
29    </div>
30  </body>
31</html>
Zobacz projekt na GitHubGithub Logo