Jak zintegrować widget prostacena.pl z własną stroną?

Czym jest widget prostacena.pl?

Widget prostacena.pl to osadzona na stronie lista lokali z danej inwestycji. Może wyświetlać m.in.:

zdjęcie i dane inwestycji,
dane inwestora,
listę mieszkań lub lokali,
ceny i ceny za m²,

statusy dostępności,
zdjęcia lokali,
historię cen,
filtry i mapę inwestycji.

💡 Wskazówka: Widget możesz umieścić na stronie konkretnej inwestycji, stronie głównej firmy, landing page’u kampanii reklamowej, blogu, stronie statycznej lub stronie opartej o CMS.

1 Zaloguj się do panelu

Wejdź na stronę prostacena.pl/login i zaloguj się do swojego konta. Jeśli nie masz jeszcze konta, możesz założyć je bezpłatnie pod adresem prostacena.pl/register.

2 Otwórz inwestycję

Przejdź do wybranej inwestycji, którą chcesz umieścić na swojej stronie. Upewnij się, że inwestycja ma dodane lokale oraz uzupełnione podstawowe dane — wtedy widget będzie wyglądał kompletnie i profesjonalnie.

3 Wejdź w „Konfigurację widgetu”

W panelu inwestycji znajdź zakładkę Konfiguracja widgetu. To tam znajduje się gotowy kod osadzenia oraz opcje personalizacji wyglądu.

4 Skopiuj kod widgetu

Kod wygląda podobnie do poniższego przykładu. W miejscu {uuid} system automatycznie umieszcza identyfikator Twojej inwestycji.

<script src="https://prostacena.pl/js/investment-embed.js"
        data-url="https://prostacena.pl/api/investments/{uuid}/cached-html"></script>
<script>
    initInvestmentEmbed(document.currentScript.previousElementSibling);
</script>

⚠️ Ważne: Wklejaj kod jako HTML, a nie jako zwykły tekst. Edytory wizualne niektórych CMS-ów mogą zamienić znaki < i > na tekst, przez co widget się nie załaduje.

5 Wklej kod na swojej stronie

Kod możesz wkleić w dowolnym miejscu, w którym ma się wyświetlać lista lokali:

w treści podstrony,
w edytorze HTML,
w module CMS,
w szablonie strony,
w komponencie frontendowym.

✅ Gotowe: Po zapisaniu strony wystarczy ją odświeżyć, aby zobaczyć aktualne dane inwestycji.

Integracja z WordPressem, Joomlą i Drupalem

Jeśli Twoja strona działa na jednym z popularnych systemów CMS, przygotowaliśmy dedykowane instrukcje wdrożenia widgetu. Znajdziesz w nich szczegółowe kroki dla konkretnej platformy, wskazówki dotyczące edytorów HTML oraz informacje o spełnianiu obowiązków wobec dane.gov.pl.

WordPress Joomla Drupal

Wskazówka: Kliknij powyższy przycisk, aby przejść do poradnika dostosowanego do Twojego CMS. Znajdziesz tam m.in. informacje o tym, gdzie wkleić kod widgetu oraz jak uniknąć typowych problemów z edytorami wizualnymi.

Strony statyczne, React i Vue

Na stronie statycznej kod widgetu możesz wkleić bezpośrednio w pliku HTML, w wybranym miejscu sekcji <body>.

W projektach opartych o React, Vue lub inne frameworki frontendowe najlepiej dodać skrypt w komponencie odpowiedzialnym za stronę inwestycji albo w głównym szablonie aplikacji.

💡 Pamiętaj: Widget działa na podstawie skryptu JavaScript, który dynamicznie pobiera aktualny HTML z API prostacena.pl.

Konfiguracja wyglądu widgetu

W zakładce Wygląd widgetu możesz dopasować widget do identyfikacji wizualnej swojej strony.

Kolory

Kolor podstawowy, kolor dodatkowy oraz tryb jednego koloru motywu.

Zaokrąglenie rogów

Suwak pozwala ustawić zaokrąglenie elementów od 0 do 30 px.

Widok listy

Wybór między widokiem siatki a listy lokali.

Nagłówek

Pokazanie lub ukrycie zdjęcia, nazwy, adresu, danych inwestora i opisu.

Filtry

Włączenie lub wyłączenie filtrów lokali.

Przezroczyste tło

Lepsze dopasowanie widgetu do tła Twojej strony.

🎁 Premium: W planie Premium możesz ukryć odnośnik do prostacena.pl, np. napis „Strona wygenerowana przez prostacena.pl”.

Co wyświetla widget?

Widget może prezentować następujące informacje:

nagłówek inwestycji ze zdjęciem, nazwą i adresem,
dane inwestora: firma, NIP, REGON, KRS, kontakt,
przycisk pobierania prospektu,
opis inwestycji,
listę lokali z numerem, powierzchnią i ceną,
statusy, zdjęcia i historię cen,
filtry i interaktywną mapę,
link do pełnej strony inwestycji.

✅ Najważniejsze: Po zmianie danych w panelu prostacena.pl widget aktualizuje się automatycznie. Nie musisz ręcznie poprawiać kodu na swojej stronie.

Dobre praktyki techniczne

Widget jest responsywny i dopasowuje się do szerokości kontenera. Zalecamy osadzić go w dodatkowym kontenerze, np.:

<div style="max-width: 1200px; margin: 0 auto;">
    <!-- tutaj wklej kod widgetu -->
</div>

Dzięki temu widget będzie wyglądał dobrze zarówno na dużych ekranach, jak i na urządzeniach mobilnych.

Warto pamiętać:

nie wklejaj kodu w edytorze wizualnym, który może zamienić znaki HTML na tekst,
upewnij się, że Twoja strona nie blokuje zewnętrznych skryptów JavaScript,
po zmianie konfiguracji odśwież stronę i sprawdź efekt w trybie incognito,
przy jasnych kolorach rozważ włączenie trybu jednego koloru i przezroczystego tła.

Mini FAQ

Widget się nie wyświetla. Co zrobić?

Sprawdź, czy kod został wklejony jako HTML, a nie jako zwykły tekst. Upewnij się też, że Twoja strona nie blokuje skryptów z domeny prostacena.pl.

Style widgetu się „rozjeżdżają”. Jak to naprawić?

Sprawdź szerokość kontenera, w którym znajduje się widget. Możesz też włączyć przezroczyste tło albo dostosować kolory w konfiguracji widgetu.

Chcę usunąć napis „Strona wygenerowana przez prostacena.pl". Czy to możliwe?

Tak, ale wymaga planu Premium. W ustawieniach wyglądu widgetu możesz wtedy ukryć link referencyjny.

Czy widget wpływa na SEO?

Widget ładuje treść dynamicznie przez JavaScript. Jeśli zależy Ci przede wszystkim na SEO, lepszym rozwiązaniem jest pełna strona inwestycji we własnej domenie dostępna w planie Premium.

Przykłady wdrożeń

Demo widgetu Strona inwestycji Strona dewelopera