AwenVIS Widget - Demo & Dokumentacja

🚀 Szybki Start

Integracja AwenVIS z Twoją stroną wymaga tylko dwóch linii kodu:

<!-- 1. Dodaj kontener gdzie ma się pojawić wizualizator -->
<div id="awenvis-container"></div>

<!-- 2. Załaduj widget podając swój token -->
<script src="https://awenvis.abdeo.pl/awenvis-widget.js" 
        data-token="TWOJ-TOKEN"></script>

✨ To wszystko! Widget automatycznie załaduje konfigurację, style i całą aplikację.

⚙️ Konfiguracja

Atrybut data-token

Token identyfikuje Twój projekt i musi odpowiadać nazwie pliku JSON w katalogu projects/.

Token	Plik projektu	Opis
`demo-project`	`projects/demo-project.json`	Projekt demonstracyjny
`klient-abc-2024`	`projects/klient-abc-2024.json`	Projekt dla klienta ABC

Opcjonalny kontener

Domyślnie widget szuka kontenera o ID awenvis-container. Jeśli nie istnieje, zostanie utworzony automatycznie na końcu strony.

📋 Format pliku projektu (JSON)

Każdy projekt to plik JSON w katalogu projects/ o następującej strukturze:

{
  "projectName": "Nazwa projektu",
  "token": "identyfikator-projektu",
  "inquiryEmail": "kontakt@deweloper.pl",
  "videoPath": "public/images/",
  
  "data": [
    {
      "video": "URL do filmu głównego",
      "transform": [
        {
          "video": "URL do następnego filmu",
          "transform_by": "URL do animacji przejścia",
          "clickable": "ikona-przycisku.png",
          "clickable_positions": "0% 48%",
          "clickable_size": "4vw 4vw",
          "direction": "left|right|up|down"
        }
      ]
    }
  ],
  
  "svgOverlays": {
    "URL filmu": "ścieżka/do/overlay.svg"
  },
  
  "floorData": [
    {
      "id": "A0-01",
      "name": "A0-01",
      "floor": 0,
      "rooms": 2,
      "area": 45.6,
      "dir": "public/floorplan/",
      "filemask": "floorplan__%05u.jpg",
      "filecount": 54,
      "availability": "available|reserved|sold"
    }
  ],
  
  "popups": [
    {
      "video": "URL do filmu w popup"
    }
  ]
}

Wyjaśnienie pól:

projectName - nazwa projektu wyświetlana w konsoli
token - identyfikator (musi być taki sam jak nazwa pliku)
inquiryEmail - adres email do zapytań o mieszkania
videoPath - ścieżka bazowa do obrazków i ikon
data - dane wideo i nawigacji 3D
svgOverlays - mapowanie filmów do nakładek SVG z mieszkaniami
floorData - dane mieszkań (lista, filtry)
popups - filmy w modal popup

🔌 API Endpoint

GET /api/get-project.php

Zwraca konfigurację projektu na podstawie tokena.

Parametry:

token (wymagany) - identyfikator projektu

Przykład wywołania:

GET https://awenvis.abdeo.pl/api/get-project.php?token=demo-project

Odpowiedź (sukces):

{
  "projectName": "Demo Project",
  "token": "demo-project",
  ...
  "_metadata": {
    "token": "demo-project",
    "timestamp": 1730000000,
    "loaded_at": "2025-10-27 12:00:00"
  }
}

Odpowiedź (błąd):

{
  "error": "Project not found",
  "message": "Projekt o podanym tokenie nie został znaleziony",
  "token": "nieistniejacy-token"
}

🚢 Deployment

Wymagania serwera:

PHP 7.0 lub nowszy
Apache/Nginx z obsługą .htaccess (opcjonalnie)
Dostęp do zapisywania plików JSON

Struktura katalogów na serwerze:

awenvis/
├── api/
│   └── get-project.php
├── projects/
│   ├── demo-project.json
│   ├── klient-1.json
│   └── klient-2.json
├── public/
│   ├── css/
│   ├── js/
│   ├── images/
│   ├── floorplan/
├── awenvis-widget.js
├── .htaccess
└── index.html (ta strona)

⚠️ Bezpieczeństwo: Upewnij się, że katalog projects/ nie jest bezpośrednio dostępny przez przeglądarkę. Dostęp do projektów powinien być tylko przez API.

➕ Jak dodać nowy projekt?

Utwórz nowy plik JSON w katalogu projects/, np. projects/moj-projekt.json
Wypełnij go danymi według schematu (patrz sekcja "Format pliku projektu")
Dodaj filmy wideo (Vimeo lub lokalnie w public/video/)
Dodaj obrazki mieszkań do public/floorplan/
Dodaj nakładki SVG do public/images/
Podaj token moj-projekt klientowi do integracji

Klient integruje widget na swojej stronie:

<div id="awenvis-container"></div>
<script src="https://awenvis.abdeo.pl/awenvis-widget.js" 
        data-token="moj-projekt"></script>

🎯 JavaScript Events

Widget emituje eventy, które możesz obsłużyć w swojej aplikacji:

// Event wywoływany po pełnej inicjalizacji widgetu
window.addEventListener('awenvis:initialized', (event) => {
  console.log('AwenVIS załadowany!');
  console.log('Konfiguracja:', event.detail.config);
  console.log('Nazwa projektu:', event.detail.config.projectName);
});

Dostęp do API widgetu:

// Sprawdź czy widget jest zainicjalizowany
if (window.AwenVIS && window.AwenVIS.initialized) {
  console.log('Widget gotowy!');
  console.log('Konfiguracja:', window.AwenVIS.config);
  console.log('Ścieżka bazowa:', window.AwenVIS.basePath);
}

📝 Historia Zmian

Ładowanie historii zmian...