Rentier.io property valuation widget documentation

The Rentier.io valuation widget is a form embedded on a real estate agency's website. The client enters the property details and receives an estimated valuation report by email, and the agency receives the client's contact details (a lead). You configure the widget in the panel at widget-panel.rentier.io, then paste a short snippet on the page.

Embedding

Before you embed

1. Configuration. In the panel, open the “Configuration” tab and go through the wizard (the steps are described in Customization). You can save a draft at any time and come back to it later.
2. Review. Rentier.io reviews a new configuration and every later change, usually within about one business day. You can see the status in the “Configuration” and “Start” tabs, and we email you the decision.
3. Widget address. Once approved, the widget gets a stable address. You will find it in the “Implementation guide” tab (the “Widget link” step).
4. Code. Copy the ready-made snippet, with your widget's address filled in, from the “Implementation guide” (the “Widget embed code” step) or from the “Configuration” tab (the “Get code” button).

In the examples below, WIDGET_URL stands in for the address and “Your company” stands in for the company name. The panel replaces both with your widget's data. Until the widget is approved, the code in the panel also contains WIDGET_URL. After deployment the panel substitutes it automatically.

Widget size

The frame (iframe) on your page decides how big the widget is: the width and height in the code. The widget itself is responsive and lays out its fields to fit the space you give it.

• Width. Set width: 100% and do not force min-width on the frame. The container (card, column) you embed the widget in should give it at least about 360 px. From that width the form uses two columns. Below that it uses one column and needs about 880 px of height. Above about 600 px the widget stops stretching and stays centered.
• Height. Set enough for the longest form step (about 760 px), capped with max-height: 100svh. On a phone the frame is then never taller than the screen. A smaller height shows a scrollbar inside the frame.

The recommended “Responsive iframe” variant sets all of this for you.

Responsive iframe

The recommended variant. Paste it where the widget should appear on the page.

<iframe
  id="rentier-widget-iframe"
  src="WIDGET_URL"
  title="Property valuation — Your company"
  style="border:0; display:block; width:100%; max-width:600px; min-width:0; height:760px; max-height:100svh;"
></iframe>

Basic iframe

The same as the responsive variant, without the 600 px width cap. The frame takes the full width of its container.

<iframe
  id="rentier-widget-iframe"
  src="WIDGET_URL"
  title="Property valuation — Your company"
  style="border:0; display:block; width:100%; min-width:0; height:760px; max-height:100svh;"
></iframe>

JavaScript

A frame created by a script, useful in CMS platforms that do not accept an iframe tag.

<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 = "Property valuation — Your company";
    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>

This variant listens for resize and scrollToWidget messages from the widget. They fit the height to the content and scroll the frame to the top when the step changes. The widget will start sending them in a later version. Until then the listener does nothing, and the height value in the code controls the height.

Full HTML page

Use this when the widget is the only content of a separate page. This is the only variant that sets the height in screen units (vh).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Property valuation — Your company</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="Property valuation — Your company"
  ></iframe>
</body>
</html>

CSS and responsiveness

You can style the frame however you like. The best values are width: 100%; max-width: 600px; min-width: 0; height: 760px; max-height: 100svh;.

A border and rounded corners:

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

Centering the widget in its container:

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

The recommended code is responsive on its own: width: 100% follows the container, and max-height: 100svh keeps the height in check on a phone. Do not set the frame's width or height in vw or vh inside media queries. On narrow screens it is enough to let the frame take the full width of the card:

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

CSS units

The vh unit causes problems on mobile devices, because the screen height changes while scrolling and when the keyboard opens. When the widget sits in the page content, do not set its height in vh. Use max-height: 100svh to cap the height.

Fallback

If the variants above fail because of CSS conflicts or platform limits, use the minimal version. It is not responsive, but it works in every environment.

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

Customization

You configure the widget in the wizard on the “Configuration” tab. The wizard has seven steps, and the preview on the right shows the effect live. The “Appearance”, “Texts” and “Emails” steps have ready-made defaults and can be skipped. Some options depend on the plan or an add-on. The wizard marks them and explains where they come from.

Basics

• Domain. The address of the page where you will embed the widget, for example yourcompany.pl. Pick it from the account's domain list or type a new one.
• Company name. Shown in the widget, in the consents and in messages to the client.
• Email for receiving valuations. The agency's email address for incoming valuations.

Consents

The widget ships with GDPR-compliant consent texts. You can keep them or edit them.

• Privacy policy link and terms link. A page address or a PDF file. Once you enter them, the words “Terms of Service” and “Privacy Policy” in the consent text become links automatically. You can also add a link by hand in the editor.
• Consent 1, data processing. Always visible and required.
• Consent 2, marketing communication. Optional. Turn it on with “Show the second marketing consent”. Turning it off removes it from the form and keeps its text.
• The {{company_name}} token in the consent text is replaced with the company name from the “Basics” step.

The client must tick every consent shown in the form in order to submit it.

Valuation model

You choose the automated valuation model (AVM). The model is saved with the widget version and does not change during review. The models available depend on the account settings.

You choose which property types the client can value in the widget on the Texts step. Sample reports are in the wizard (the “See a sample PDF report” link) and on rentier.io/for-agent.

Appearance

• Themes. Ready-made color sets, chosen with one click.
• Colors. Form background, buttons, field background, field text and checkbox labels. Pick a color with the picker or type a 6-character HEX code.
• Font. A choice from the Google Fonts library, with search. Advanced option: your own Google Fonts address.
• Logo in the PDF report. An uploaded file or a URL, in .jpg, .png, .svg or .webp. Required proportions: 174.22 × 32 px. The logo must stay readable when printed.
• Logo in emails. An uploaded file or a URL, in the same formats. The recommended size is at most 200 × 60 px, and you set the size in the message with a slider.

Texts

• Widget texts. The heading and button on pages 1 and 2 of the form, and the confirmation text and button on page 3, after the form is submitted. Each field has a default, for example “Estimate property value” and “Value the property”.
• Company name in communication. An empty field means the name from the “Basics” step.
• PDF valuation report header. Text shown in the report header, for example contact details or a slogan. A counter shows characters and lines. A header that is too long is printed in the report's smallest font, so it is worth shortening. “Hide the name in the PDF report header” removes the company name from the header.
• Property types. Apartment, house, plot, commercial. At least one is required. The range depends on the plan and the chosen valuation model. On the Free plan, valuations cover apartments only.

Emails

The client receives one of two messages:

• Success. A message with the valuation report.
• No valuation. Confirmation of the submission when an automated valuation was not possible.

The templates are ready and tested. You can send them unchanged or edit them.

• Email subject.

• Email font. A system font, the same font as the widget, or your own from Google Fonts. Some inboxes (for example Gmail and Outlook) do not display Google Fonts and fall back to a system font.

• Template personalization. Choose one of:

  • one shared template for every property type,
  • separate templates for apartments and a shared one for the other types (“Apartments + Other”),
  • a separate template for each property type (full personalization).

  Separate templates per property type are on the paid plans.

• Variables. Clicking a variable inserts it into the content, for example {{company_name}}, {{logo_agenta}}, {{dane_nieruchomosci}} or the report download button. In the sent message the variables are replaced with the client's and the valuation's data. The message preview shows the result.

Advanced

• Valuation area. Limit valuations to selected cities, counties or voivodeships. The area boundary is not exact; the details are in Geographic restriction, which this option requires.
• Valuation type. The price shown in the panel and in reports: listing, transaction, or both. The transaction valuation is calculated from listing prices, reduced using the correlation between listing and transaction prices. In the AVM Advanced report the choice sets which price is emphasized, and the report keeps both prices. Available on paid plans.
• Show rentier.io logo. Turning it off requires the Hide the Rentier.io logo add-on.
• Phone number SMS verification and allowed countries. Requires the SMS verification add-on.
• SMS alerts for completed valuations. Company accounts (yours or an employee's) with a phone number confirmed in the panel, which should receive an SMS about a new valuation. Requires the SMS alerts for a new valuation add-on.
• Google Tag Manager. The switch and the container ID. Requires the Google Tag Manager and Meta Pixel add-on.

On the Free plan the widget uses this step's default settings.

Paid add-ons

You buy add-ons in the panel on the “Subscription” tab and turn them on in the wizard's “Advanced” step. A configuration change goes through the usual review. Add-ons work together with a paid plan. When an add-on ends, the widget is published again automatically without it.

Hide the Rentier.io logo

Hides the Rentier.io logo in the widget and in valuation reports. Text mentions of Rentier.io can remain, for example the report signature “Opracowano przez Rentier Advanced Valuation”. After you buy it, turn off “Show rentier.io logo” in the wizard.

Google Tag Manager and Meta Pixel

Lets you measure submitted forms in Google Tag Manager and connect the widget to Meta Pixel, Google Analytics 4 and Google Ads. You can then compare which campaigns bring enquiries, not only visits.

1. In Google Tag Manager, copy the web container ID, for example GTM-ABC1234. In the wizard, on the “Advanced” step, turn on Google Tag Manager, enter the ID and submit the change. Use the GTM container ID, not a Pixel or GA4 identifier.

2. After every accepted form the widget pushes a formSent event to dataLayer. In GTM create a “Custom event” trigger whose event name is exactly formSent.

3. Add the base Meta Pixel code in a “Custom HTML” tag. Then create a second tag with the formSent trigger that sends Meta a widgetFormSent event with no form data:

   fbq('trackCustom', 'widgetFormSent');
   

   In GTM, paste this code in a “Custom HTML” tag, inside a script tag.

4. Test it in GTM preview mode, check that it works without a required consent, and publish the container.

Entering a GTM ID on its own does not start measurement in Meta or Google. You configure the tags in your own GTM account, and you can hand that to a webmaster or an agency. A guide with screenshots is in the panel, on the “Implementation guide” tab.

SMS verification

Verification happens after the form is submitted, when the report is opened. The client submits the form without a code, and the submission reaches the panel with the status “Verified: No”. The client receives an email with a link to the report. After opening the link they enter the SMS code sent to the number from the form. A correct code unlocks the report, and the submission's verification status in the panel changes to “Yes”. You can then see which leads have a confirmed phone number. In the wizard you turn on “Phone number SMS verification” and choose the countries whose numbers are accepted. By default those are the EU countries plus the United Kingdom, Ukraine, Switzerland, Norway and Iceland. If the add-on is not on the “Subscription” tab yet, it appears once sending through the SMS provider is switched on.

Geographic restriction

Limits valuations to selected cities, counties or voivodeships. It is useful for agencies that work locally. You pick the area in the wizard, on the “Advanced” step, in the “Valuation area” section: one area type (City, County or Voivodeship) and one or more areas.

In the widget the client picks an area from your list, and address suggestions are limited to a rectangle around each selected area. The rectangle is larger than the administrative boundary, so suggestions can include addresses from neighbouring cities, counties or voivodeships. The area boundary and the rectangle are shown on the map in the wizard.

SMS alerts for a new valuation

The agent receives an SMS when a client completes a new valuation in the widget. The SMS goes out after the client is emailed the report, or the “No valuation” message. Each number receives one SMS per valuation.

The SMS contains:

• the client's phone number from the form,
• a link to the valuations list in the panel, where the rest of the client's and the valuation's data is,
• the widget's domain, only when the account has more than one deployed domain,
• the note “bez ceny” (no price), when an automated valuation was not possible.

The SMS does not contain the client's first name. Polish characters in a name would make the message two SMS segments. The message itself is sent in Polish.

Example: Nowa wycena. Tel. +48 600 100 200. https://widget-panel.rentier.io/dashboard/estimations

Numbers are no longer typed in. In the wizard, on the “Advanced” step, you turn on “SMS alerts for completed valuations” and tick the accounts that should receive the SMS: yourself, employees, or both. Only an account with a phone number confirmed by an SMS code in the panel can be ticked. Each configuration (domain) has its own list. Saving goes through the usual configuration-change review, and the alerts start after it is deployed. Configurations where numbers were typed in by hand before this change keep sending SMS until you save a choice of accounts.

We send the SMS through our provider, and they are included in the add-on's price. The add-on is available on the Start, Growth and Scale plans. When the add-on ends, the SMS stop. The numbers stay in the configuration and work again after the add-on is bought once more.

How it works

1. Form. The client fills in the widget form on your page: the property type and details, contact details and consents.
2. Valuation. The valuation is calculated automatically with the model chosen in the configuration.
3. Report by email. The client receives a message with the valuation report as a PDF, with your logo and header. If an automated valuation is not possible, they receive a “No valuation” message confirming the submission.
4. Lead in the panel. The submission, with the client's data, reaches the panel, in the “Estimations” and “Leads” tabs. In “Leads” you follow up with the client, for example with statuses and notes. With the SMS alerts for a new valuation add-on the agent also receives an SMS with the client's phone number.

With SMS verification turned on, the client opens the report from the link in the email after entering the SMS code, and the submission's verification status in the panel changes from “No” to “Yes”.

Sample valuation reports are on rentier.io/for-agent.

Changelog