Viewer – branding i personalizacja

Logo i przekierowanie

Viewer obsługuje personalizację wizualną — możesz dodać własne logo firmy oraz dopasować tło sceny. Każdy Viewer może wyświetlać Twoje logo, a po kliknięciu użytkownik zostanie przekierowany pod zdefiniowany adres URL. Funkcja dostępna tylko w planach Business i Business PRO. Jak ustawić logo:

  1. Przejdź do sekcji Ustawienia e-commerce w aplikacji.
  2. W sekcji Personalizacja wgraj:
    • logo poziome (do górnego paska nawigacji)
    • logo kwadratowe (np. do ekranu ładowania lub menu)
    • adres URL przekierowania po kliknięciu logo
  3. Zapisz zmiany — nowe logo pojawi się we wszystkich Viewerach. (Upewnij się, że parametr nav=1 jest ustawiony, aby pokazać górny pasek i logo poziome.)

Tło Viewera

Możesz ustawić dowolny obraz tła w edytorze Viewera w aplikacji. Jak zmienić tło:

  1. Po zalogowaniu otwórz Viewer produktu w przeglądarce
  2. W menu > przycisk Scena > Obrazy
    • Dodaj i zapisz własny obraz, który będzie wyświetlany w tle
Otwórz w nowej karcie
Docs Viewer - Branding i personalizacja — Podgląd na żywo / demo osadzania (Vanilla JS).
index.html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>Viewer - Branding</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 Viewer"
31      src="https://alterproduct.com/app/viewer/12?add_to_cart=1&bcg=theme"
32      width="100%"
33      height="100%"
34      frameBorder="0"
35      allowFullScreen
36    ></iframe>
37  </body>
38</html>
Zobacz projekt na GitHub Github Logo