Dokumentacja widgetu wyceny Rentier.io

Widget wyceny Rentier.io to formularz osadzany na stronie biura nieruchomości. Klient podaje dane nieruchomości i otrzymuje e-mailem raport szacunkowej wyceny, a biuro dostaje kontakt do klienta (lead). Widget konfigurujesz w panelu widget-panel.rentier.io, a na stronę wklejasz krótki kod.

Wdrożenie

Przed osadzeniem

1. Konfiguracja. W panelu otwórz zakładkę „Konfiguracja” i przejdź kreator (opis kroków w sekcji Customizacja). Szkic możesz w każdej chwili zapisać i wrócić do niego później.
2. Weryfikacja. Nową konfigurację i każdą zmianę zatwierdza zespół Rentier.io, zwykle w ciągu ok. 1 dnia roboczego. Status widzisz w zakładkach „Konfiguracja” i „Start”, a o decyzji informujemy e-mailem.
3. Adres widgetu. Po zatwierdzeniu widget dostaje stały adres. Znajdziesz go w zakładce „Przewodnik wdrożenia” (krok „Link do widgetu”).
4. Kod. Gotowy kod z adresem Twojego widgetu skopiujesz w „Przewodniku wdrożenia” (krok „Kod do osadzenia”) albo w zakładce „Konfiguracja” (przycisk „Kod do osadzenia”).

W przykładach poniżej w miejscu adresu stoi symbol WIDGET_URL, a w miejscu nazwy firmy „Twoja Firma”. Panel wstawia w ich miejsce dane Twojego widgetu. Dopóki widget nie jest zatwierdzony, kod w panelu też zawiera WIDGET_URL, a po wdrożeniu panel podmienia go automatycznie.

Rozmiar widgetu

O wielkości widgetu decyduje ramka (iframe) na Twojej stronie, czyli szerokość i wysokość w kodzie. Sam widget jest responsywny i dopasowuje układ pól do przestrzeni, którą mu dasz.

• Szerokość. Ustaw width: 100% i nie wymuszaj min-width na ramce. To kontener (karta, kolumna), w którym osadzasz widget, powinien dać mu co najmniej ok. 360 px. Od tej szerokości formularz układa się w dwóch kolumnach. Poniżej przechodzi w jedną kolumnę i potrzebuje ok. 880 px wysokości. Powyżej ok. 600 px widget nie rozciąga się dalej i zostaje wyśrodkowany.
• Wysokość. Ustaw tyle, ile potrzebuje najdłuższy krok formularza (ok. 760 px), z ograniczeniem max-height: 100svh. Dzięki temu na telefonie ramka nigdy nie będzie wyższa niż ekran. Przy mniejszej wysokości wewnątrz ramki pojawi się suwak.

Zalecany wariant „Responsywny iframe” ustawia to wszystko za Ciebie.

Responsywny iframe

Wariant zalecany. Wklej go w miejscu strony, w którym ma się pojawić widget.

<iframe
  id="rentier-widget-iframe"
  src="WIDGET_URL"
  title="Wycena nieruchomości — Twoja Firma"
  style="border:0; display:block; width:100%; max-width:600px; min-width:0; height:760px; max-height:100svh;"
></iframe>

Podstawowy iframe

Jak wariant responsywny, ale bez ograniczenia szerokości do 600 px. Ramka zajmuje całą szerokość kontenera.

<iframe
  id="rentier-widget-iframe"
  src="WIDGET_URL"
  title="Wycena nieruchomości — Twoja Firma"
  style="border:0; display:block; width:100%; min-width:0; height:760px; max-height:100svh;"
></iframe>

JavaScript

Ramka tworzona skryptem, przydatna w systemach CMS, które nie przyjmują znacznika iframe.

<div id="widget-container"></div>
<script>
  (function () {
    var container = document.getElementById("widget-container");
    var iframe = document.createElement("iframe");
    iframe.id = "rentier-widget-iframe";
    iframe.src = "WIDGET_URL";
    iframe.title = "Wycena nieruchomości — Twoja Firma";
    iframe.style.border = "0";
    iframe.style.display = "block";
    iframe.style.width = "100%";
    iframe.style.maxWidth = "600px";
    iframe.style.minWidth = "0";
    iframe.style.height = "760px";
    iframe.style.maxHeight = "100svh";
    container.appendChild(iframe);

    var widgetOrigin = new URL(iframe.src).origin;
    window.addEventListener("message", function (event) {
      if (event.origin !== widgetOrigin) return;
      var data = event.data || {};
      if (data.event === "resize" && data.height) {
        iframe.style.maxHeight = "none";
        iframe.style.height = data.height + "px";
      }
      if (data.event === "scrollToWidget" || data.event === "stepChange") {
        iframe.scrollIntoView({ block: "start" });
      }
    });
  })();
</script>

Ten wariant nasłuchuje komunikatów resize i scrollToWidget z widgetu. Służą one do dopasowania wysokości do treści i przewinięcia do góry ramki po zmianie kroku. Widget zacznie je wysyłać w jednej z kolejnych wersji. Do tego czasu nasłuch nic nie robi, a wysokość pilnuje wartość height z kodu.

Pełna strona HTML

Gdy widget ma być jedyną treścią osobnej podstrony. Tylko w tym wariancie wysokość ustawiamy w jednostkach ekranu (vh).

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wycena nieruchomości — Twoja Firma</title>
  <style>
    html, body { margin: 0; height: 100%; }
    iframe { border: 0; display: block; width: 100%;
             height: 100%; min-height: 100vh; }
  </style>
</head>
<body>
  <iframe
    id="rentier-widget-iframe"
    src="WIDGET_URL"
    title="Wycena nieruchomości — Twoja Firma"
  ></iframe>
</body>
</html>

CSS i responsywność

Ramkę możesz dowolnie stylować. Optymalne parametry: width: 100%; max-width: 600px; min-width: 0; height: 760px; max-height: 100svh;.

Ramka i zaokrąglenie:

iframe {
  border: 2px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

Centrowanie widgetu w kontenerze:

#widget-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

Zalecany kod jest responsywny sam z siebie: width: 100% podąża za kontenerem, a max-height: 100svh pilnuje wysokości na telefonie. Nie ustawiaj szerokości ani wysokości ramki w vw lub vh w media queries. Na wąskich ekranach warto tylko pozwolić ramce zająć pełną szerokość karty:

@media (max-width: 700px) {
  #rentier-widget-iframe {
    max-width: 100%;
  }
}

Jednostki CSS

Jednostka vh sprawia problemy na urządzeniach mobilnych, bo wysokość ekranu zmienia się podczas przewijania i otwierania klawiatury. Przy osadzeniu widgetu w treści strony nie ustawiaj jego wysokości w vh. Do ograniczenia wysokości użyj max-height: 100svh.

Wersja awaryjna

Jeśli powyższe warianty nie działają z powodu konfliktów CSS albo ograniczeń platformy, użyj wersji minimalnej. Nie jest responsywna, ale działa w każdym środowisku.

<iframe src="WIDGET_URL" width="100%" height="760" style="border:0"></iframe>

Customizacja

Widget konfigurujesz w kreatorze w zakładce „Konfiguracja”. Kreator ma siedem kroków, a podgląd po prawej stronie pokazuje efekt zmian na żywo. Kroki „Wygląd”, „Teksty” i „E-maile” mają gotowe ustawienia domyślne i można je pominąć. Niektóre opcje zależą od planu albo dodatku. Kreator oznacza je i wyjaśnia, skąd są dostępne.

Podstawy

• Domena. Adres strony, na której osadzisz widget, np. twojafirma.pl. Wybierasz ją z listy domen konta albo wpisujesz nową.
• Nazwa firmy. Pojawia się w widgecie, w zgodach i w wiadomościach do klienta.
• E-mail do odbioru wycen. Adres e-mail biura do odbioru wycen.

Zgody

Widget ma gotowe teksty zgód zgodne z RODO, które możesz zostawić albo edytować.

• Link do Polityki prywatności i link do Regulaminu. Adres strony albo pliku PDF. Po ich wpisaniu słowa „Regulaminem” i „Polityką prywatności” w treści zgód podlinkowują się automatycznie. Link możesz też dodać ręcznie w edytorze.
• Zgoda 1, przetwarzanie danych. Zawsze widoczna i wymagana.
• Zgoda 2, komunikacja marketingowa. Opcjonalna, włączasz ją przełącznikiem „Pokaż drugą zgodę marketingową”. Po wyłączeniu znika z formularza, a jej treść zostaje zachowana.
• Znacznik {{company_name}} w treści zgód zastępowany jest nazwą firmy z kroku „Podstawy”.

Klient musi zaznaczyć wszystkie zgody wyświetlane w formularzu, aby go wysłać.

Model wyceny

Wybierasz model automatycznej wyceny (AVM). Model zapisuje się razem z wersją widgetu i nie zmienia się podczas weryfikacji. Dostępne modele zależą od ustawień konta.

Typy nieruchomości, które klient może wycenić w widgecie, wybierasz w kroku Teksty. Przykładowe raporty obejrzysz w kreatorze (link „Zobacz przykładowy raport PDF”) i na stronie rentier.io/for-agent.

Wygląd

• Motywy. Gotowe zestawy kolorów wybierane jednym kliknięciem.
• Kolory. Tło formularza, przyciski, tło pól, tekst pól i etykiety checkboxów. Kolor wybierasz próbnikiem albo wpisujesz 6-znakowy kod HEX.
• Czcionka. Wybór z biblioteki Google Fonts z wyszukiwarką. Opcja zaawansowana: własny adres czcionki Google Fonts.
• Logo w raporcie PDF. Wgrany plik albo adres URL, w formacie .jpg, .png, .svg lub .webp. Wymagane proporcje: 174,22 × 32 px. Logo musi być czytelne po wydrukowaniu.
• Logo w e-mailach. Wgrany plik albo adres URL, w tych samych formatach. Zalecany rozmiar to maksymalnie 200 × 60 px, a wielkość w wiadomości ustawiasz suwakiem.

Teksty

• Teksty widgetu. Nagłówek i przycisk na stronie 1 i 2 formularza oraz tekst potwierdzenia i przycisk na stronie 3, po wysłaniu formularza. Każde pole ma domyślną treść, np. „Oszacuj wartość nieruchomości” i „Wyceń nieruchomość”.
• Nazwa firmy w komunikacji. Puste pole oznacza nazwę z kroku „Podstawy”.
• Nagłówek w raporcie wyceny PDF. Tekst, który pojawia się w nagłówku raportu, np. dane kontaktowe albo slogan. Licznik pokazuje znaki i linie. Zbyt długi nagłówek raport drukuje najmniejszą czcionką, więc warto go skrócić. Opcja „Ukryj nazwę w nagłówku raportu PDF” usuwa nazwę firmy z nagłówka.
• Typy nieruchomości. Mieszkanie, dom, działka, lokal komercyjny. Trzeba wybrać co najmniej jeden. Zakres zależy od planu i wybranego modelu wyceny. W planie Free wyceny obejmują tylko mieszkania.

E-maile

Klient dostaje jedną z dwóch wiadomości:

• Sukces. Wiadomość z raportem wyceny.
• Brak wyceny. Potwierdzenie zgłoszenia, gdy automatyczna wycena nie była możliwa.

Szablony są gotowe i przetestowane. Możesz je wysłać bez zmian albo edytować.

• Tytuł e-maila.

• Czcionka e-maili. Czcionka systemowa, taka sama jak w widgecie albo własna z Google Fonts. Część skrzynek pocztowych (np. Gmail, Outlook) nie wyświetla czcionek Google Fonts i pokazuje wtedy czcionkę systemową.

• Personalizacja szablonów. Do wyboru:

  • jeden wspólny szablon dla wszystkich typów nieruchomości,
  • osobne szablony dla mieszkań i wspólny dla pozostałych typów („Mieszkania + Inne”),
  • osobny szablon dla każdego typu nieruchomości (pełna personalizacja).

  Osobne szablony dla typów nieruchomości są w planach płatnych.

• Zmienne. Kliknięcie zmiennej wstawia ją do treści, np. {{company_name}}, {{logo_agenta}}, {{dane_nieruchomosci}} albo przycisk pobrania raportu. W wysłanej wiadomości zmienne zastępowane są danymi klienta i wyceny. Efekt widać w podglądzie wiadomości.

Zaawansowane

• Obszar wycen. Ograniczenie zgłoszeń do wybranych miast, powiatów albo województw. Wymaga dodatku Ograniczenie geograficzne.
• Rodzaj wyceny. Typ ceny pokazywany w panelu i w raportach: ofertowa, transakcyjna albo obie. Wycena transakcyjna jest obliczana na podstawie cen ofertowych, obniżonych za pomocą korelacji cen ofertowych i transakcyjnych. W raporcie AVM Advanced wybór określa cenę wyróżnioną, a raport zachowuje obie ceny. Opcja dostępna w planach płatnych.
• Pokaż logo Rentier.io. Wyłączenie wymaga dodatku Ukrycie logo Rentier.io.
• Weryfikacja numeru telefonu przez SMS i dozwolone kraje. Wymaga dodatku Weryfikacja SMS.
• Google Tag Manager. Włączenie i ID kontenera. Wymaga dodatku Google Tag Manager i Meta Pixel.

W planie Free widget działa z ustawieniami domyślnymi tego kroku.

Dodatki płatne

Dodatki kupujesz w panelu w zakładce „Subskrypcja” i włączasz w kroku „Zaawansowane” kreatora. Zmiana konfiguracji przechodzi zwykłą weryfikację. Dodatki działają razem z płatnym planem. Gdy dodatek się kończy, widget jest automatycznie publikowany bez niego.

Ukrycie logo Rentier.io

Ukrywa logo Rentier.io w widgecie i w wiadomościach e-mail, tak aby klient widział tylko Twoją markę. Po zakupie wyłącz w kreatorze opcję „Pokaż logo Rentier.io”.

Google Tag Manager i Meta Pixel

Pozwala mierzyć wysłane formularze w Google Tag Manager i połączyć widget z Meta Pixel, Google Analytics 4 i Google Ads. Dzięki temu możesz porównać, które kampanie przynoszą zapytania, a nie tylko wejścia na stronę.

1. W Google Tag Manager skopiuj ID kontenera internetowego, np. GTM-ABC1234. W kreatorze, w kroku „Zaawansowane”, włącz Google Tag Manager, wpisz ID i zgłoś zmianę. Użyj ID kontenera GTM, nie identyfikatora Pixela ani GA4.

2. Po każdym przyjętym formularzu widget wysyła do dataLayer zdarzenie formSent. W GTM utwórz regułę „Zdarzenie niestandardowe” o nazwie zdarzenia dokładnie formSent.

3. Dodaj podstawowy kod Meta Pixel w tagu „Niestandardowy HTML”. Następnie utwórz drugi tag z regułą formSent, który wysyła do Meta zdarzenie widgetFormSent bez danych formularza:

   fbq('trackCustom', 'widgetFormSent');
   

   W GTM wklej ten kod w tagu „Niestandardowy HTML”, w znaczniku script.

4. Przetestuj w trybie podglądu GTM, sprawdź działanie bez wymaganej zgody i opublikuj kontener.

Samo wpisanie ID GTM nie uruchamia pomiaru w Meta ani w Google. Tagi konfigurujesz na swoim koncie GTM i możesz to zlecić webmasterowi lub agencji. Instrukcję ze zrzutami ekranu znajdziesz w panelu, w zakładce „Przewodnik wdrożenia”.

Weryfikacja SMS

Przed wysłaniem formularza klient potwierdza numer telefonu kodem SMS, więc do biura trafiają leady ze sprawdzonym numerem. W kreatorze włączasz „Weryfikację numeru telefonu przez SMS” i wybierasz kraje, z których numery są akceptowane. Domyślnie są to kraje UE oraz Wielka Brytania, Ukraina, Szwajcaria, Norwegia i Islandia. Jeśli dodatku nie ma jeszcze w zakładce „Subskrypcja”, pojawi się po uruchomieniu wysyłki przez dostawcę SMS.

Ograniczenie geograficzne

Widget przyjmuje zgłoszenia tylko z wybranego obszaru, czyli z określonych miast, powiatów albo województw. Przydaje się biurom działającym lokalnie. Obszar wybierasz w kreatorze, w kroku „Zaawansowane”, w sekcji „Obszar wycen”.

Jak to działa

1. Formularz. Klient wypełnia formularz widgetu na Twojej stronie: rodzaj i dane nieruchomości, dane kontaktowe i zgody.
2. Wycena. Wycena jest liczona automatycznie modelem wybranym w konfiguracji.
3. Raport e-mailem. Klient dostaje wiadomość z raportem wyceny w PDF, z Twoim logo i nagłówkiem. Jeśli wycena automatyczna nie jest możliwa, dostaje wiadomość „Brak wyceny” z potwierdzeniem zgłoszenia.
4. Lead w panelu. Zgłoszenie z danymi klienta trafia do panelu, do zakładek „Wyceny” i „Leady”. W „Leadach” prowadzisz kontakt z klientem, np. statusy i notatki.

Przykładowe raporty wyceny zobaczysz na stronie rentier.io/for-agent.

Historia zmian