craftgen · коробки Зібрати коробку

craftgen · коробки · код вставки

3D і AR на картці товару — двома рядками коду

Зберіть коробку під свій товар у конструкторі, скопіюйте код вставки й додайте його в Tilda, WordPress, Shopify чи свій HTML. Покупець крутить коробку, відкриває її і ставить на стіл в AR. Без 3D-дизайнера.

Зібрати коробку й узяти код

Конструктор — безкоштовно, бета. Код — кнопка «Код вставки» під готовою 3D-моделлю.

Складна коробка DEMO SHOP 70×40×120 мм, фіолетова — знімок 3D-моделі сервісу
код вставки · HTML
<script src="https://boxes.craftgen.app/embed.js" async></script>
<div data-showgen="b/ad41f49ae0b7fc89" data-state="closed" data-height="520"></div>
Справжня коробка з конструктора у вікні вставки. Обертайте мишею чи пальцем; внизу вікна — розгортка, відкрита, закрита.

Живий приклад

Змініть атрибут — і побачите, що отримає покупець

Праворуч — справжній embed.js сервісу на «вашій» сторінці. Ліворуч — його код: копіюйте й вставляйте, він робочий.

Коробка
Стан на старті
Як показати
Збирання при відкритті
код вставки · HTML 
<script src="https://boxes.craftgen.app/embed.js" async></script>
<div data-showgen="b/ad41f49ae0b7fc89" data-state="closed" data-height="520"></div>
  • тут з’являться події showgen:ready і showgen:state

Конструктор дає такий самий код для вашої коробки — з її номером замість цього.

Завантажуємо 3D…

У режимі «Кнопка» 3D не вантажиться, доки покупець не натисне, — сторінка лишається легкою.

Куди вставити

Один код — для будь-якого конструктора сайтів

  1. TildaБлок T123 «HTML-код»: вставте код у поле блоку й опублікуйте сторінку.
  2. WordPressБлок «Користувацький HTML» у редакторі сторінки чи товару.
  3. ShopifyСекція «Custom Liquid» у шаблоні сторінки товару.
  4. HTMLБудь-де в розмітці: скрипт і блок — там, де має стояти коробка.

Код не залежить від теми: вікно живе у власному shadow DOM і не бере ваших стилів.

AR

Коробка — на столі покупця, у натуральну величину

Кнопка AR уже є у вікні коробки. Покупцю нічого не треба встановлювати: на iPhone відкривається Quick Look, на Android — Scene Viewer.

На комп’ютері AR немає — відкрийте цю сторінку з телефона.

  • iPhone · iPadQuick Look. З вікна вставки відкривається сторінка коробки повністю — звідти AR запускається надійно.
  • AndroidScene Viewer одразу з вікна, масштаб 1:1.
  • Стан в ARРозгортка, відкрита чи закрита — AR бере той стан, що зараз на екрані.

Ролик · 12 с

Від порожньої картки до 3D — два рядки

Під капотом

Чому вікно не зламає ваш сайт

  • shadow DOMВікно живе у shadow DOM: стилі вашої теми його не чіпають, і навпаки.
  • loading="lazy"3D вантажиться ліниво, а в режимі кнопки — лише після натискання.
  • wheelКолесо миші гортає вашу сторінку, а не наближає коробку; наблизити — Ctrl + колесо або щипок.
  • langМова підписів — за <html lang> вашого сайту (українська чи англійська) або атрибутом data-lang.
  • b/<id>Одна коробка — одне посилання назавжди: ті самі параметри дають той самий номер.
  • showgen:readyПодії showgen:ready і showgen:state — для вашої аналітики.

Виробникам упаковки

3D на картку кожної позиції вашого ряду

Позиція з кодом FEFCO і розмірами збирається в конструкторі за кілька кліків і отримує свій код вставки. Покупець бачить коробку в 3D і AR, а не фото на білому тлі.

Підготовка всього ряду разом — умови пілоту обговоримо на дзвінку. Написати нам

Ваша коробка — наступна в цьому вікні

Розміри, картон, колір і напис — у конструкторі. Код вставки — під готовою 3D-моделлю.

Зібрати коробку й узяти код

Конструктор — безкоштовно, бета. Колір на екрані — орієнтир, не кольоропроба.

craftgen · коробки

craftgen · коробки · код вставки

3D і AR на картці товару — двома рядками коду

Зберіть коробку під свій товар у конструкторі, скопіюйте код вставки й додайте його в Tilda, WordPress, Shopify чи свій HTML. Покупець крутить коробку, відкриває її і ставить на стіл в AR. Без 3D-дизайнера.

Зібрати коробку й узяти код

Конструктор — безкоштовно, бета. Код — кнопка «Код вставки» під готовою 3D-моделлю.

Так це виглядає на картці

Складна коробка DEMO SHOP 70×40×120 мм, фіолетова — знімок 3D-моделі сервісу
DEMO SHOP Складна коробка з язичками навхрест 70×40×120 мм всередині · картон 350 г/м² · білий з двох боків, колір фіолетовий

Тап по кнопці вантажить живу 3D-модель — так працює режим «Кнопка».

А ось її код вставки

Оберіть коробку й режим — код зміниться. Копіюйте: він робочий.

Коробка
Як показати
код вставки · HTML 
<script src="https://boxes.craftgen.app/embed.js" async></script>
<button type="button" data-showgen-button="b/ad41f49ae0b7fc89" data-state="closed" data-height="420">Подивитися в 3D і AR</button>

Tilda, WordPress, Shopify чи свій HTML — код той самий.

Коробка — на столі покупця, у натуральну величину

Натисніть — і коробка стане на ваш стіл у натуральну величину. Те саме робить кнопка AR у вікні коробки на сайті.

AR відкривається на iPhone і Android-телефонах.

Один код — для будь-якого конструктора сайтів

Tilda

Блок T123 «HTML-код»: вставте код у поле блоку й опублікуйте сторінку.

WordPress

Блок «Користувацький HTML» у редакторі сторінки чи товару.

Shopify

Секція «Custom Liquid» у шаблоні сторінки товару.

HTML

Будь-де в розмітці: скрипт і блок — там, де має стояти коробка.

Код не залежить від теми: вікно живе у власному shadow DOM і не бере ваших стилів.

Від порожньої картки до 3D — два рядки

Чому вікно не зламає ваш сайт

  • Вікно живе у shadow DOM: стилі вашої теми його не чіпають, і навпаки.
  • 3D вантажиться ліниво, а в режимі кнопки — лише після натискання.
  • Повторний тап по кнопці ховає 3D, ще один — показує знову.
  • Мова підписів — за <html lang> вашого сайту (українська чи англійська) або атрибутом data-lang.
  • Одна коробка — одне посилання назавжди: ті самі параметри дають той самий номер.

3D на картку кожної позиції вашого ряду

Позиція з кодом FEFCO і розмірами збирається в конструкторі за кілька кліків і отримує свій код вставки. Покупець бачить коробку в 3D і AR, а не фото на білому тлі.

Підготовка всього ряду разом — умови пілоту обговоримо на дзвінку. Написати нам

Ваша коробка — наступна в цьому вікні

Зібрати коробку й узяти код

Конструктор — безкоштовно, бета. Колір на екрані — орієнтир, не кольоропроба.