Furni360
Umów prezentację

Dodaj konfigurator mebli 3D do strony produktu

Konfigurator mebli 3D działa z każdym CMS-em, platformą e-commerce i frameworkiem – wszędzie tam, gdzie strona może wyświetlić iframe. Bez wtyczek i bez zmian na serwerze; ta instrukcja opisuje osadzenie i testy.

  1. Otrzymujesz kod dostępu (token)

    Otwieramy licencję dla Twojego katalogu i dodajemy domeny, na których będzie działać konfigurator. Otrzymujesz token i nazwy modeli.

  2. Dodaj iframe do swojej strony

    Podmień token i nazwę modelu. Wysokość co najmniej 600 px zapewnia wystarczająco miejsca zarówno na model, jak i na wybór materiałów.

  3. Otwórz stronę i sprawdź

    Jeśli domena jest w licencji, konfigurator wczytuje się od razu. Do testów na własnym komputerze do licencji można dodać również localhost.

Kod do osadzenia
<iframe
  class="furni360"
  src="https://embed.furni360.com/embed?token=TWOJ_TOKEN&model=doha.glb&lang=pl"
  title="Konfigurator 3D"
  width="100%"
  height="640"
  style="border: 0"
  allow="fullscreen; xr-spatial-tracking"
  referrerpolicy="no-referrer-when-downgrade"
  loading="lazy">
</iframe>
<p class="furni360-credit">
  Konfigurator 3D: <a href="https://furni360.com/pl">Furni360</a>
</p>

Zastąp TWOJ_TOKEN i nazwę modelu wartościami z licencji. Konfigurator wyświetla się w języku Twojej strony; parametr lang (sr, en…) ustawia go jawnie, a języki, których jeszcze nie obsługujemy, wyświetlają się po angielsku.

Zasady, o których warto pamiętać

  • Domena Twojej strony musi być w licencji. Wpis „twojadomena.pl” obejmuje również www.twojadomena.pl i pozostałe subdomeny.
  • Nie ustawiaj referrerpolicy="no-referrer" w elemencie iframe ani na stronie – konfigurator sprawdza licencję na podstawie adresu strony.
  • Atrybut allow="fullscreen" umożliwia oglądanie modelu i zdjęć na pełnym ekranie.
  • Jeśli konfigurator znajduje się niżej na stronie lub w oknie modalnym, loading="lazy" albo wczytywanie po kliknięciu oszczędza transfer.
  • Prosimy o zachowanie wiersza z linkiem „Furni360” pod konfiguratorem. Jego wygląd możesz dopasować do swojej strony.

Działa z każdym CMS-em i frameworkiem

  • WordPress

    W edytorze bloków dodaj blok „Własny HTML” (Custom HTML) i wklej kod.

  • WooCommerce

    Wklej kod do opisu produktu (w trybie HTML) lub dodaj go jako osobną zakładkę na stronie produktu.

  • Shopify

    W edytorze motywu dodaj do szablonu produktu sekcję „Custom Liquid” i wklej kod.

  • PrestaShop, Magento i Shopware

    Użyj bloku CMS lub pola HTML w opisie produktu. Upewnij się, że edytor nie usuwa elementów iframe.

  • Wix, Squarespace i Webflow

    Dodaj do strony produktu element „Embed” lub „Custom code” i wklej kod.

  • React, Next.js, Vue, Angular

    Użyj tego samego elementu iframe w komponencie. Na stronach z wieloma produktami przekazuj token i model przez props.

  • Strona szyta na miarę

    PHP, .NET, Django, statyczny HTML lub cokolwiek innego: wklej iframe do szablonu strony produktu.

  • Okno modalne

    Ustaw src dopiero wtedy, gdy kupujący otworzy okno, i usuń go przy zamknięciu – tak jak w sklepie demo ARVO.

Dopasowanie do ekranu

Na telefonach konfigurator sprawdza się najlepiej, gdy zajmuje większą część ekranu. Ten kod CSS nadaje mu pełną szerokość i wysokość dopasowaną do urządzenia:

styles.css
.furni360 {
  display: block;
  width: 100%;
  height: min(85svh, 760px);
  min-height: 560px;
  border-radius: 16px;
}

.furni360-credit {
  margin: 8px 0 0;
  font-size: 13px;
  text-align: right;
  opacity: 0.7;
}

Potrzebujesz pomocy z wdrożeniem?

Wyślij nam link do swojej strony – pomożemy umieścić konfigurator we właściwym miejscu i we właściwym rozmiarze.

Kontakt

Pokaż kupującym każdą kombinację.

Krótka prezentacja online – 30 minut, bez zobowiązań. Nie masz czasu na rozmowę? Wyślij nam link do swojej strony i liczbę modeli, a odpowiemy e-mailem ze wstępną wyceną.

  1. Odpowiadamy z propozycją terminu
  2. Prezentacja i rozmowa o Twoim katalogu
  3. Wycena według liczby modeli i materiałów
Umów prezentacjęinfo@furni360.com