Przejdź do głównej treści
← Wróć do CutOptim ConfiguratorOsadzanie · jedna linijka kodu

Konfigurator produktu na stronę sklepu, który osadzasz jedną linijką kodu

CutOptim Configurator to konfigurator produktu na stronę sklepu z materiałami płytowymi, który działa wewnątrz Twoich stron. Wklejasz jeden znacznik script i jeden element; konfigurator otwiera się na stronie, w oknie modalnym, w panelu bocznym albo jako osobna strona i oddaje zamówienie do Twojego sklepu.

Cztery sposoby otwierania

Wybierz, jak ma się pojawiać konfigurator; ten sam kod obsługuje wszystkie cztery, a ustawienie sklepu decyduje o domyślnym.

  • — Na stronie (inline): konfigurator jest częścią strony produktu.
  • — Okno modalne (modal): przycisk, na przykład „Potnij tę płytę na wymiar”, otwiera go nad stroną.
  • — Panel boczny (drawer): wysuwa się z boku i zostawia stronę produktu w zasięgu wzroku.
  • — Osobna strona: konfigurator na całą stronę, który po zamówieniu odsyła klienta do Twojego koszyka.

Cztery sposoby pokazania w sklepie

Ta sama linijka kodu – wybierasz, jak się otwiera.

Jeden skrypt i jeden element

Konfigurator jest komponentem webowym: jeden znacznik script go ładuje, a element <cutoptim-configurator> z Twoim kluczem publicznym wskazuje miejsce. Przycisk z atrybutem data-cutoptim-open otwiera okno modalne lub panel boczny i może wstępnie wybrać płytę ze strony produktu, na której jest klient.

Kod, który wklejasz do swojego sklepu
<script type="module" src="https://cfg.cutoptim.com/embed/assets/cutoptim-configurator.js"></script>

<button data-cutoptim-open="#cut">Cut this board to size</button>
<cutoptim-configurator id="cut" mode="modal" key="pk_your_publishable_key" lang="pl">
</cutoptim-configurator>

Twoja marka, Twoje teksty

Kolory, czcionki, zaokrąglenia i jasny lub ciemny motyw dopasowują się do Twojej marki. Nazwane kotwice ::part pozwalają Twojemu arkuszowi stylów poprawić przyciski, karty i pola, a każdy tekst widoczny dla klienta można zmienić osobno dla każdego języka. Konfigurator działa we własnej, odizolowanej warstwie, więc style Twojej strony go nie psują, a on nie psuje Twojej strony.

Zamówienie wraca do Twojego sklepu

Gdy klient zamawia, strona dostaje zdarzenie cutoptim:order z zamówieniem i jego podpisaną wyceną, więc Twój sklep może wrzucić je do koszyka. Twój serwer może sprawdzić podpis pod adresem /cfg/v1/quote/verify, zanim zaakceptuje cenę. W trybie osobnej strony klient wraca z zamówieniem do Twojego koszyka.

Bezpieczny domyślnie

Twój klucz działa tylko na adresach stron, które wymienisz, więc inna witryna nie osadzi Twojego konfiguratora z Twoimi cenami. Ceny są liczone i podpisywane po naszej stronie, nigdy w przeglądarce.

Zanim osadzisz konfigurator, otwórz sklep demo: pokazuje dokładny kod dla każdego z czterech sposobów otwierania.

Najczęstsze pytania

Jak dodać konfigurator do mojej strony?
Wklej jeden znacznik script i jeden element <cutoptim-configurator> z Twoim kluczem publicznym na stronę, na której ma się pojawić. Wybierz, czy ma się pokazywać na stronie, w oknie modalnym, w panelu bocznym czy jako osobna strona. Sklep demo pokazuje kod dla każdego z tych czterech trybów.
Czy działa z moją platformą sklepową?
Działa na każdej stronie, do której możesz dodać HTML i skrypt — w sklepie zbudowanym na popularnej platformie albo na własnym rozwiązaniu. Zamówienie trafia na Twoją stronę jako zdarzenie cutoptim:order, a w trybie osobnej strony jako powrót do koszyka. Dla WooCommerce jest wtyczka we wczesnym dostępie; własny sklep lub ERP weryfikuje podpisany webhook na swoim serwerze.
Czy mogę dopasować wygląd do mojego sklepu?
Tak. Ustawiasz kolory, czcionki, promień zaokrąglenia i jasny lub ciemny motyw, poprawiasz jego fragmenty z własnego arkusza stylów przez nazwane kotwice ::part i zmieniasz każdy tekst widoczny dla klienta w każdym z dziesięciu języków.
Czy spowolni moją stronę produktu?
Konfigurator startuje z jednego małego skryptu, a kod każdego kroku ładuje dopiero wtedy, gdy ten krok jest potrzebny. Strona, która pokazuje go w oknie modalnym lub panelu bocznym, wykonuje cięższe ładowanie tylko dla klientów, którzy klikną przycisk.
Czy ktoś inny może osadzić mój konfigurator?
Nie. Twój klucz publiczny działa tylko na adresach stron, które dla niego wymienisz, a każda cena jest podpisywana po naszej stronie. Inna witryna używająca Twojego klucza zostanie odrzucona, a cena zmieniona w przeglądarce nie przejdzie kontroli podpisu.

Więcej o konfiguratorze

Potrzebujesz tylko silnika rozkroju? Zobacz Engine API

Informacje prawneWarunki konfiguratora (EN) ·Umowa powierzenia przetwarzania danych (EN) ·Informacja o prywatności dla kupujących ·Licencje stron trzecich (EN)