Smart Property Widget Documentation

Complete reference for building property listing websites with RealtySoft components

Welcome,

This guide covers all components, templates, and configuration options. Use the sidebar to navigate, or search for specific components.

What You'll Build

Search pages - Filter properties by location, price, type, and more
Listing pages - Display properties in grids, lists, or carousels
Detail pages - Full property information with galleries and forms
Wishlist pages - Let users save and compare favorites

Getting Started

Quick Setup

Add the RealtySoft loader script to your page. It automatically loads all required CSS and JavaScript files.

HTML

<!-- Add before closing </body> tag -->
<script src="https://smartpropertywidget.com/spw/dist/realtysoft-loader.min.js"></script>

The loader script:

Automatically loads both CSS and JS files
Uses hourly cache busting for updates
Prevents double-loading if already included

Alternative: Direct Include

If you prefer manual control over file loading:

HTML

<!-- In <head> -->
<link rel="stylesheet" href="https://smartpropertywidget.com/spw/dist/realtysoft.min.css">

<!-- Before </body> -->
<script src="https://smartpropertywidget.com/spw/dist/realtysoft.min.js"></script>

Your First Page

Here's a complete example showing a search form and property listings:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Property Search</title>
</head>
<body>
    <!-- Search Form -->
    <div class="rs-search-template-01"></div>

    <!-- Property Listings -->
    <div class="rs-listing-template-01"></div>

    <script src="https://smartpropertywidget.com/spw/dist/realtysoft-loader.min.js"></script>
</body>
</html>

That's it!

The widget auto-initializes when it detects any rs_ or rs- containers on the page.

Configuration

Customize the widget using the global configuration object. Add this before including the widget script:

JavaScript

<script>
window.RealtySoftConfig = {
    // Owner settings
    ownerEmail: 'agent@example.com',
    privacyPolicyUrl: '/privacy-policy',

    // Language settings
    language: 'en_US',

    // URL structure
    propertyPageSlug: 'property',
    resultsPage: '/properties',

    // Display settings
    perPage: 12,
    enableMapView: true
};
</script>

Labels Mode

The widget uses static labels mode, which loads hardcoded labels for the fastest performance.

Supported Languages

The widget supports 16 languages:

en_US English es_ES Spanish de_DE German fr_FR French nl_NL Dutch pt_PT Portuguese it_IT Italian ru_RU Russian sv_SE Swedish no_NO Norwegian da_DK Danish fi_FI Finnish pl_PL Polish cs_CZ Czech ar_SA Arabic zh_CN Chinese

Label Overrides

Override specific labels without changing the language:

JavaScript

window.RealtySoftConfig = {
    labelOverrides: {
        _default: {
            search_button: 'Find Properties',
            reset_button: 'Clear All',
            detail_back: 'Go Back'
        },
        es_ES: {
            search_button: 'Buscar Propiedades',
            detail_back: 'Volver'
        }
    }
};

Branding (Emails & PDF)

Customize the appearance of inquiry emails, wishlist emails, and PDF exports:

JavaScript

window.RealtySoftConfig = {
    branding: {
        companyName: 'Your Company Name',
        logoUrl: 'https://yoursite.com/logo.png',
        websiteUrl: 'https://yoursite.com',
        primaryColor: '#0066cc',      // Used in PDF exports
        emailHeaderColor: '#333333'   // Email header background
    }
};

Tip: Email Header Color

If your logo is light/white, use a dark emailHeaderColor (e.g., #1a1a1a) so the logo is visible. If your logo is dark, you can use your brand color or leave it as the default.

Property	Description
`companyName`	Your company name shown in email headers and PDF title
`logoUrl`	URL to your logo (recommended: 200x60px, PNG with transparency)
`websiteUrl`	Website URL displayed in email footers
`primaryColor`	Hex color for PDF branding (buttons, accent lines, header)
`emailHeaderColor`	Hex color for email header background (falls back to primaryColor)

WordPress Integration

Smart Property Widget has a dedicated WordPress plugin for easy integration.

Installation

Install the Smart Property Widget plugin
Activate the plugin
Start adding components to your pages

Adding Components

Once the plugin is activated, you can add components using:

Gutenberg blocks - Use Custom HTML or Shortcode blocks
Classic Editor - Switch to Text mode and paste HTML
Elementor/Divi - Use HTML/Code widgets

Example: Gutenberg Custom HTML Block

HTML

<!-- Gutenberg Custom HTML Block -->
<div class="rs-search-template-01"></div>
<div class="rs-listing-template-01" data-rs-columns="3"></div>

Search Components

Build custom search forms using these 12 modular components. Each can be placed independently and styled as needed.

rs_location

Filter by location/area

4 variations

rs_listing_type

Sale, Rent, Holiday, New

3 variations

rs_property_type

Villa, Apartment, Plot...

4 variations

rs_bedrooms

Bedroom count filter

3 variations

rs_bathrooms

Bathroom count filter

3 variations

rs_price

Price range filter

3 variations

rs_built_area

Built size in m²

2 variations

rs_plot_size

Plot size in m²

2 variations

rs_features

Pool, garage, views...

3 variations

rs_reference

Search by property ref

1 variation

rs_search_button

Trigger search

1 variation

rs_reset_button

Clear all filters

1 variation

Location Component

Filter properties by geographic location. Supports 4 different interaction patterns.

Variation	Type	Description
`1`	Typeahead	Autocomplete search input
`2`	Cascading	Parent → Child dropdowns (e.g., Municipality → City)
`3`	Hierarchical	Tree structure with checkboxes for multi-select
`4`	Dropdown	Traditional select dropdown

HTML

<!-- Typeahead autocomplete -->
<div class="rs_location" data-rs-variation="1"></div>

<!-- Cascading dropdowns (Municipality → City) -->
<div class="rs_location" data-rs-variation="2"
     data-rs-parent-type="municipality"
     data-rs-child-type="city"></div>

<!-- Hierarchical multi-select -->
<div class="rs_location" data-rs-variation="3"></div>

<!-- Simple dropdown -->
<div class="rs_location" data-rs-variation="4"></div>

Attributes

Attribute	Values	Description
`data-rs-variation`	1, 2, 3, 4	Which variation to use
`data-rs-parent-type`	municipality, region, province	Parent level (variation 2 only)
`data-rs-child-type`	city, area, neighborhood	Child level (variation 2 only)

Listing Type Component

Toggle between Sale, Rent, Holiday Rental, or New Development properties.

Variation	Type	Description
`1`	Buttons	Horizontal button group
`2`	Dropdown	Select dropdown
`3`	Tabs	Tab-style navigation

HTML

<!-- Button group -->
<div class="rs_listing_type" data-rs-variation="1"></div>

<!-- Dropdown -->
<div class="rs_listing_type" data-rs-variation="2"></div>

<!-- Tabs -->
<div class="rs_listing_type" data-rs-variation="3"></div>

Property Type Component

Filter by property type (Villa, Apartment, Townhouse, Plot, etc.).

Variation	Type	Description
`1`	Typeahead	Autocomplete search
`2`	Dropdown	Simple select
`3`	Multi-select	Checkboxes for multiple types
`4`	Icons	Visual icon buttons

HTML

<div class="rs_property_type" data-rs-variation="2"></div>

Bedrooms Component

Filter by bedroom count.

Variation	Type	Description
`1`	Dropdown	Min/max select dropdown
`2`	Button boxes	0, 1, 2, 3, 4, 5+ buttons
`3`	Free input	Number input field

HTML

<!-- Button boxes with "minimum" style (1+, 2+, 3+) -->
<div class="rs_bedrooms" data-rs-variation="2" data-rs-style="minimum"></div>

<!-- Button boxes with "exact" style (1, 2, 3) -->
<div class="rs_bedrooms" data-rs-variation="2" data-rs-style="exact"></div>

<!-- Dropdown -->
<div class="rs_bedrooms" data-rs-variation="1"></div>

Bathrooms Component

Filter by bathroom count. Same variations as bedrooms (1=Dropdown, 2=Button boxes, 3=Free input).

HTML

<div class="rs_bathrooms" data-rs-variation="1"></div>

Price Component

Filter by price range. Supports separate min/max inputs or combined range.

Variation	Type	Description
`1`	Input fields	Separate min/max number inputs
`2`	Range slider	Dual-handle slider
`3`	Dropdown	Select dropdown for min or max

HTML

<!-- Separate min/max inputs -->
<div class="rs_price" data-rs-variation="1" data-rs-type="min"></div>
<div class="rs_price" data-rs-variation="1" data-rs-type="max"></div>

<!-- Range slider (both min/max) -->
<div class="rs_price" data-rs-variation="2"></div>

<!-- Dropdown -->
<div class="rs_price" data-rs-variation="3" data-rs-type="min"></div>
<div class="rs_price" data-rs-variation="3" data-rs-type="max"></div>

Built Area Component

Filter by built/living area in square meters.

HTML

<!-- Min/max inputs -->
<div class="rs_built_area" data-rs-variation="1"></div>

<!-- Range slider -->
<div class="rs_built_area" data-rs-variation="2"></div>

Plot Size Component

Filter by plot/land size in square meters.

HTML

<div class="rs_plot_size" data-rs-variation="1"></div>

Features Component

Filter by property features like pool, garage, sea views, etc.

Variation	Type	Description
`1`	Popup modal	Click to open categorized feature list
`2`	Inline checkboxes	All features visible as checkboxes
`3`	Tags/chips	Clickable tag badges

HTML

<div class="rs_features" data-rs-variation="1"></div>

Reference Component

Search by property reference number (e.g., R123456).

HTML

<div class="rs_reference"></div>

Search & Reset Buttons

HTML

<!-- Search button - triggers search -->
<div class="rs_search_button"></div>

<!-- Reset button - clears all filters -->
<div class="rs_reset_button"></div>

Complete Custom Search Example

Here's a complete working example showing all search components together. Copy this code and modify it to fit your design.

How it works

All search components must be inside a container with id="rs_search". The widget automatically connects all components and handles the search logic.

HTML

<!-- Search Container - All components must be inside this -->
<div id="rs_search">

    <!-- Row 1: Location and Listing Type -->
    <div class="search-row">
        <div class="rs_location" data-rs-variation="1"></div>
        <div class="rs_listing_type" data-rs-variation="1"></div>
    </div>

    <!-- Row 2: Property Type and Bedrooms -->
    <div class="search-row">
        <div class="rs_property_type" data-rs-variation="2"></div>
        <div class="rs_bedrooms" data-rs-variation="1"></div>
        <div class="rs_bathrooms" data-rs-variation="1"></div>
    </div>

    <!-- Row 3: Price Range -->
    <div class="search-row">
        <div class="rs_price" data-rs-variation="1" data-rs-type="min"></div>
        <div class="rs_price" data-rs-variation="1" data-rs-type="max"></div>
    </div>

    <!-- Row 4: Additional Filters (optional) -->
    <div class="search-row">
        <div class="rs_built_area" data-rs-variation="1"></div>
        <div class="rs_plot_size" data-rs-variation="1"></div>
        <div class="rs_features" data-rs-variation="1"></div>
    </div>

    <!-- Row 5: Reference Search (optional) -->
    <div class="search-row">
        <div class="rs_reference"></div>
    </div>

    <!-- Row 6: Buttons -->
    <div class="search-row">
        <div class="rs_search_button"></div>
        <div class="rs_reset_button"></div>
    </div>

</div>

Minimal Search Example

A simpler version with just the essential filters:

HTML

<div id="rs_search">
    <div class="rs_location" data-rs-variation="1"></div>
    <div class="rs_listing_type" data-rs-variation="1"></div>
    <div class="rs_property_type" data-rs-variation="2"></div>
    <div class="rs_bedrooms" data-rs-variation="2"></div>
    <div class="rs_price" data-rs-variation="1" data-rs-type="min"></div>
    <div class="rs_price" data-rs-variation="1" data-rs-type="max"></div>
    <div class="rs_search_button"></div>
</div>

Search with Locked Filters

Pre-filter results by adding data attributes to the container:

HTML

<!-- Only show villas for sale in Marbella -->
<div id="rs_search"
     data-rs-location="505"
     data-rs-property-type="76"
     data-rs-listing-type="resale">

    <div class="rs_bedrooms" data-rs-variation="2"></div>
    <div class="rs_price" data-rs-variation="1" data-rs-type="min"></div>
    <div class="rs_price" data-rs-variation="1" data-rs-type="max"></div>
    <div class="rs_features" data-rs-variation="1"></div>
    <div class="rs_search_button"></div>

</div>

Tip: Mix and Match

You can use any combination of components. Only include the filters relevant to your use case. The widget handles all the connections automatically.

Search Templates

Pre-built search form layouts. Just add a single div and the template renders automatically.

rs-search-template-01

Compact 2-row horizontal

rs-search-template-02

Single-row search bar

rs-search-template-03

Tab-based with listing type tabs

rs-search-template-04

Dark horizontal bar

rs-search-template-05

Vertical card/sidebar

rs-search-template-06

Minimal single row

Usage

HTML

<!-- Basic usage -->
<div class="rs-search-template-01"></div>

<!-- With locked filters -->
<div class="rs-search-template-01"
     data-rs-location="505"
     data-rs-listing-type="resale"></div>

Listing Components

Display search results using these components.

rs_property_grid

Grid/list view of properties

rs_property_carousel

Sliding property carousel

rs_pagination

Page navigation

rs_sort

Sort dropdown

rs_results_count

"X properties found"

rs_active_filters

Removable filter tags

rs_view_toggle

Grid/List/Map buttons

rs_map_view

Interactive property map

Property Grid

Displays search results as property cards in a responsive grid layout.

HTML

<!-- Basic grid -->
<div class="rs_property_grid"></div>

<!-- Grid with column control -->
<div class="rs_property_grid" data-rs-columns="3"></div>

<!-- Grid with card template -->
<div class="rs_property_grid" data-rs-template="2"></div>

Grid Columns

Attribute Value	Desktop	Tablet	Mobile
`data-rs-columns="2"`	2 cards	2 cards	1 card
`data-rs-columns="3"`	3 cards	2 cards	1 card
`data-rs-columns="4"`	4 cards	2 cards	1 card

Standalone Grid

Create a grid that fetches its own data, independent from search filters:

HTML

<!-- Featured properties section -->
<div class="rs_property_grid"
     data-rs-standalone
     data-rs-featured="true"
     data-rs-limit="6"
     data-rs-columns="3"></div>

<!-- Own properties first, then others -->
<div class="rs_property_grid"
     data-rs-standalone
     data-rs-own-first="true"
     data-rs-limit="12"></div>

Standalone Grid Attributes

Attribute	Description	Example
`data-rs-standalone`	Makes grid independent from page filters	(no value)
`data-rs-limit`	Number of properties to show	"6", "12"
`data-rs-columns`	Number of columns (1-4)	"2", "3", "4"
`data-rs-template`	Card template style (1-12)	"1", "6"
`data-rs-sort`	Sort order for properties	"create_date_desc", "list_price"
Property Source
`data-rs-own`	Show only own properties	"true"
`data-rs-own-first`	Show own properties first, then others	"true"
`data-rs-featured`	Show only featured properties	"true"
Location & Type Filters
`data-rs-location`	Filter by location ID	"505"
`data-rs-listing-type`	Filter by listing type	"resale", "long_rental", "short_rental", "development"
`data-rs-property-type`	Filter by property type ID	"76"
Bedroom & Bathroom Filters
`data-rs-beds-min`	Minimum bedrooms	"2", "3"
`data-rs-beds-max`	Maximum bedrooms	"4", "5"
`data-rs-baths-min`	Minimum bathrooms	"1", "2"
`data-rs-baths-max`	Maximum bathrooms	"2", "3"
Price Filters
`data-rs-price-min`	Minimum price	"100000", "250000"
`data-rs-price-max`	Maximum price	"500000", "1000000"
Size Filters
`data-rs-built-min`	Minimum built area (m²)	"50", "100"
`data-rs-built-max`	Maximum built area (m²)	"200", "500"
`data-rs-plot-min`	Minimum plot size (m²)	"200", "500"
`data-rs-plot-max`	Maximum plot size (m²)	"1000", "5000"
Other Filters
`data-rs-ref`	Filter by property reference	"R123456"
`data-rs-features`	Filter by feature IDs (comma-separated)	"1,5,12"

Sort Values Reference

Available values for data-rs-sort:

Value	Description
`create_date_desc`	Newest listings first (default)
`create_date`	Oldest listings first
`last_date_desc`	Recently updated first
`last_date`	Oldest updated first
`list_price`	Price: Low to High
`list_price_desc`	Price: High to Low
`is_featured_desc`	Featured properties first
`location_id`	Sort by location

Property Carousel

Sliding carousel for showcasing properties. 6 visual templates available.

HTML

<!-- Basic carousel -->
<div class="rs_property_carousel"></div>

<!-- With template and filters -->
<div class="rs_property_carousel"
     data-rs-template="6"
     data-rs-limit="8"
     data-rs-autoplay="true"></div>

<!-- Own properties carousel -->
<div class="rs_property_carousel"
     data-rs-own="true"
     data-rs-limit="6"></div>

Carousel Templates

Template	Style	Description
`1`	Standard	Horizontal sliding carousel
`2`	3D Stacked	Cards with perspective effect
`3`	Coverflow	Grayscale inactive cards
`4`	Hero	Full-width hero cards
`5`	Overlay	Info always visible on overlay
`6`	Dark Numbered	Dark cards with large numbers

Carousel Attributes

Attribute	Description	Example
`data-rs-template`	Visual template (1-6)	"6"
`data-rs-limit`	Number of properties	"8"
`data-rs-autoplay`	Auto-rotate slides	"true"
`data-rs-interval`	Autoplay interval (ms)	"5000"

Pagination

Page navigation for results.

HTML

<div class="rs_pagination"></div>

Sort, Count, Toggle, Active Filters

HTML

<!-- Sort dropdown -->
<div class="rs_sort"></div>

<!-- "X properties found" -->
<div class="rs_results_count"></div>

<!-- Grid/List/Map toggle buttons -->
<div class="rs_view_toggle"></div>

<!-- Active filter tags (removable) -->
<div class="rs_active_filters"></div>

Sort Options

create_date_desc - Newest Listings
create_date - Oldest Listings
last_date_desc - Recently Updated
list_price - Price: Low to High
list_price_desc - Price: High to Low
is_featured_desc - Featured First

Map View

Interactive Leaflet map with property markers and clustering.

HTML

<div class="rs_map_view"></div>

Features

OpenStreetMap tiles
Property markers with price labels
Marker clustering when zoomed out
Popups with property info on click
Pan/zoom to filter visible properties
Responsive design

Configuration

JavaScript

window.RealtySoftConfig = {
    enableMapView: true,   // Show map toggle button
    perPage: 12,           // Items per page for grid/list
    mapPerPage: 50         // Items per page for map view
};

Listing Templates

12 pre-designed property card styles. Use with grids or carousels.

rs-listing-template-01

Location-first cards

rs-listing-template-02

Price on image overlay

rs-listing-template-03

Tag + icon specs

rs-listing-template-04

Airbnb style

rs-listing-template-05

Hover overlay

rs-listing-template-06

Gradient overlay

rs-listing-template-07

Dark overlay badges

rs-listing-template-08

Minimal card

rs-listing-template-09

Modern with accent

rs-listing-template-10

Compact list-style

rs-listing-template-11

Full-featured + tags

rs-listing-template-12

Magazine layout

rs-listing-template-13

2-col centered + ref badge

Usage

HTML

<!-- Basic template -->
<div class="rs-listing-template-01"></div>

<!-- With column control -->
<div class="rs-listing-template-03" data-rs-columns="4"></div>

<!-- With locked filters -->
<div class="rs-listing-template-01"
     data-rs-location="505"
     data-rs-property-type="76"
     data-rs-listing-type="resale"></div>

Property Detail Components

Components for building property detail pages. All must be inside a rs_detail container.

HTML

<div class="rs_detail" data-property-id="R5251381">
    <!-- Components go here -->
</div>

Property ID Sources (in priority order)

data-property-id="R123456" on container
data-property-ref="ABC-123" on container
URL path: /property/123
URL path: /property/title-slug-R123456
URL param: ?id=123 or ?property_id=123
URL param: ?ref=ABC-123

Gallery Component

Image gallery with thumbnails and lightbox.

HTML

<div class="rs_detail_gallery"></div>

Info Components

Text containers that auto-populate with property data.

Class	Content
`rs_detail_title`	Property title
`rs_detail_price`	Formatted price
`rs_detail_ref`	Reference number
`rs_detail_location`	Location name
`rs_detail_address`	Street address
`rs_detail_type`	Property type
`rs_detail_status`	Listing status
`rs_detail_beds`	Bedrooms count
`rs_detail_baths`	Bathrooms count
`rs_detail_built`	Built area (m²)
`rs_detail_plot`	Plot size (m²)
`rs_detail_description`	Full description
`rs_detail_features`	Features list
`rs_detail_specs`	Key specs grid

Additional Detail Classes

Class	Content
`rs_detail_terrace`	Terrace size (m²)
`rs_detail_garden`	Garden size (m²)
`rs_detail_year`	Year built
`rs_detail_floor`	Floor number
`rs_detail_orientation`	Orientation
`rs_detail_parking`	Parking spaces
`rs_detail_energy_rating`	Energy rating
`rs_detail_community_fees`	Community fees/month

Component Containers

Class	Description	Options
`rs_detail_map`	Location map	`data-variation="0\|1\|2\|3"`
`rs_detail_related`	Similar properties (see Similar Properties section)	`data-limit="6"`, `data-min-results="3"`, `data-price-range="0.3"`
`rs_detail_resources`	All resources combined (video, tour, PDF buttons)
`rs_detail_video_embed`	Embedded video player (YouTube/Vimeo)
`rs_detail_video_link`	Link/button to open video in new tab
`rs_detail_tour_link`	Link/button to open virtual tour in new tab
`rs_detail_pdf`	PDF download button
`rs_detail_wishlist`	Wishlist button
`rs_detail_share`	Share buttons
`rs_detail_back`	Back button - navigates to previous page	Label: `detail_back`
`rs_mortgage_calculator`	Mortgage calculator button	Requires `enableMortgageCalculator: true`

Mortgage Calculator

The mortgage calculator displays a button that opens a popup modal for calculating monthly mortgage payments. Property price is pre-filled automatically.

Enable in Configuration

Add enableMortgageCalculator: true to your RealtySoftConfig to activate this feature.

JavaScript

window.RealtySoftConfig = {
  // ... other settings
  enableMortgageCalculator: true
};

HTML

<!-- Place anywhere on detail page -->
<div class="rs_mortgage_calculator"></div>

Features:

Pre-fills property price from current property
Down payment input (amount or percentage, auto-synced)
Interest rate configuration (default 3.5%)
Loan term selection (1-40 years, default 25)
Shows monthly payment, loan amount, total interest, total payment
Responsive design (slides up from bottom on mobile)
Keyboard accessible (ESC to close)

Auto-included: When using <div class="property-detail-container"></div>, the mortgage calculator is automatically added below the social share section (if enabled in config).

Currency Support: When the currency converter is enabled, the mortgage calculator opens with the property price converted to the user's selected currency. Currency symbols and values update automatically.

Map Variations

HTML

<!-- Auto-detect (best available: pinpoint > zipcode > municipality) -->
<div class="rs_detail_map" data-variation="0"></div>

<!-- Municipality level (default) -->
<div class="rs_detail_map" data-variation="1"></div>

<!-- Pinpoint (exact coordinates) -->
<div class="rs_detail_map" data-variation="2"></div>

<!-- Zipcode level -->
<div class="rs_detail_map" data-variation="3"></div>

Video & Virtual Tour

Multiple options for displaying video and virtual tour content:

Component	What it does
`rs_detail_resources`	Shows all available resources (Video, Virtual Tour, PDF) as styled buttons. Opens in modal or new tab. Auto-hides if no resources available.
`rs_detail_video_embed`	Embeds the video directly on the page. Supports YouTube and Vimeo. Auto-hides if no video.
`rs_detail_video_link`	Standalone link/button that opens video in new tab. Use with `<a>` tag.
`rs_detail_tour_link`	Standalone link/button that opens virtual tour in new tab. Use with `<a>` tag.

HTML

<!-- Option 1: All resources as buttons (recommended) -->
<div class="rs_detail_resources"></div>

<!-- Option 2: Embed video directly on page -->
<div class="rs_detail_video_embed"></div>

<!-- Option 3: Custom video link -->
<a class="rs_detail_video_link" href="#">Watch Video</a>

<!-- Option 4: Custom virtual tour link -->
<a class="rs_detail_tour_link" href="#">Take Virtual Tour</a>

<!-- Option 5: PDF download only -->
<div class="rs_detail_pdf"></div>

Auto-hide behavior

All video/tour components automatically hide themselves if the property doesn't have the corresponding URL (video_url, virtual_tour_url, or pdf_url).

Agent Card

Display agent/contact information.

HTML

<div class="rs_detail_agent">
    <div class="rs_detail_agent_photo"></div>
    <div class="rs_detail_agent_name"></div>
    <a class="rs_detail_agent_phone"></a>
    <a class="rs_detail_agent_email"></a>
</div>

Inquiry Form

Contact form for property inquiries.

HTML

<div class="rs_detail_inquiry_form"></div>

Complete Detail Page Example

HTML

<div class="rs_detail">
    <!-- Gallery -->
    <div class="rs_detail_gallery"></div>

    <!-- Two Column Layout -->
    <div class="rs_detail_layout">
        <!-- Main Content -->
        <div class="rs_detail_main">
            <h1 class="rs_detail_title"></h1>
            <div class="rs_detail_price"></div>
            <div class="rs_detail_location"></div>
            <div class="rs_detail_specs"></div>
            <div class="rs_detail_description"></div>
            <div class="rs_detail_features"></div>
            <div class="rs_detail_map" data-variation="1"></div>
        </div>

        <!-- Sidebar -->
        <div class="rs_detail_sidebar">
            <div class="rs_detail_agent"></div>
            <div class="rs_detail_inquiry_form"></div>
        </div>
    </div>

    <!-- Related Properties -->
    <div class="rs_detail_related" data-limit="6" data-min-results="3"></div>
</div>

Similar Properties

The Similar Properties component displays related properties on detail pages. It uses a smart fallback system:

How it works:

Priority 1: If the CRM provides similar_property_ids (manually curated), those are shown first
Priority 2: Otherwise, automatically searches for similar properties based on location, type, and price range

Basic Usage

HTML

<div class="rs_detail_related"></div>

Data Attributes

Attribute	Default	Description
`data-limit`	6	Maximum number of properties to display
`data-min-results`	3	Minimum required to show section (hides if fewer found)
`data-price-range`	0.3	Price range for fallback search (0.3 = ±30% of current property price)

Examples

HTML

<!-- Default: max 6, min 3 required -->
<div class="rs_detail_related"></div>

<!-- Custom: max 8, min 4 required, wider price range -->
<div class="rs_detail_related"
     data-limit="8"
     data-min-results="4"
     data-price-range="0.5"></div>

Global Configuration

Set defaults via the init config (data attributes override these):

JavaScript

window.RealtySoftConfig = {
    // ... other config

    similarProperties: {
        limit: 6,        // Max properties to show
        minResults: 3,   // Min required to show section
        priceRange: 0.3  // ±30% price range
    }
};

Fallback Search Strategy

When no CRM-curated similar properties exist, the widget searches using progressive relaxation:

Strategy 1: Same location + type + listing type + price range (most specific)
Strategy 2: Same location + listing type + price range
Strategy 3: Same location + listing type
Strategy 4: Same type + listing type + price range
Strategy 5: Same listing type + price range
Strategy 6: Same listing type only (broadest)

The search continues through strategies until it finds at least minResults properties.

Styling

The component uses these CSS classes:

CSS

.rs-detail-related { }
.rs-detail-related__title { }
.rs-detail-related__loader { }
.rs-detail-related__grid { }
.rs-detail-related__card { }
.rs-detail-related__card-image { }
.rs-detail-related__card-content { }
.rs-detail-related__card-price { }
.rs-detail-related__card-title { }
.rs-detail-related__card-location { }
.rs-detail-related__card-specs { }

Wishlist System

Let users save, compare, share, and manage favorite properties.

Quick Start

For a standard wishlist page, use the combined component:

HTML

<div class="rs_wishlist_list"></div>

Modular Components

For custom layouts, use individual components:

Component	Class	Purpose
Header	`rs_wishlist_header`	Title + count
Actions	`rs_wishlist_actions`	PDF, Share, Email, Clear buttons
Sort	`rs_wishlist_sort`	Sort dropdown
Grid	`rs_wishlist_grid`	Property cards
Empty State	`rs_wishlist_empty`	Empty message
Compare Button	`rs_wishlist_compare_btn`	Floating compare button
Shared Banner	`rs_wishlist_shared_banner`	Banner for shared view
Modals	`rs_wishlist_modals`	All modals (required)

Custom Layout Example

HTML

<div class="my-wishlist-page">
    <div class="my-header-bar">
        <div class="rs_wishlist_header"></div>
        <div class="rs_wishlist_sort"></div>
    </div>

    <div class="rs_wishlist_shared_banner"></div>

    <div class="my-sidebar">
        <div class="rs_wishlist_actions"></div>
    </div>

    <div class="my-main">
        <div class="rs_wishlist_empty"></div>
        <div class="rs_wishlist_grid"></div>
    </div>

    <div class="rs_wishlist_compare_btn"></div>
    <div class="rs_wishlist_modals"></div>
</div>

Wishlist Counter

Badge showing wishlist count (for header/nav):

HTML

<div class="rs_wishlist_counter"></div>

Wishlist Counter in Menus: When placed inside a WordPress menu item (set the Navigation Label to <span class="rs_wishlist_counter"></span>), the counter detects the parent link and only renders the heart icon — the menu link handles navigation to the correct language-specific wishlist page.

Language Selector

Dropdown to change widget language.

HTML

<div class="rs_language_selector"></div>

Share Buttons

Social sharing buttons for properties.

HTML

<div class="rs_share_buttons" data-property-id="R123456"></div>

Currency Selector

Converts property prices to user's preferred currency using real-time exchange rates.

Requires Configuration

Currency converter must be enabled via enableCurrencyConverter: true in your config.

HTML

<!-- Place anywhere on the page - header, footer, sidebar -->
<div class="rs_currency_selector"></div>

Configuration

JavaScript

window.RealtySoftConfig = {
    // Enable currency converter (required)
    enableCurrencyConverter: true,

    // Base currency (what your prices are in)
    baseCurrency: 'EUR',

    // Currencies to show in dropdown
    availableCurrencies: ['EUR', 'GBP', 'USD', 'CHF', 'AED', 'SAR']
};

Features

Real-time exchange rates from free Frankfurter API (no API key needed)
45+ currencies supported
Rates cached for 6 hours to minimize API calls
User's currency preference saved across sessions
Automatically converts all property prices on page
Handles dynamically loaded prices (AJAX, SPA navigation)

Supported Currencies

EUR, GBP, USD, CHF, SEK, NOK, DKK, PLN, CZK, AED, SAR, RUB, CNY, JPY, AUD, CAD, INR, ZAR, BRL, MXN, TRY, MAD, QAR, KWD, BHD, OMR, SGD, HKD, NZD, THB, and more.

Map View Integration: Map markers automatically update with K/M suffixes when currency changes (e.g., "£ 377K"). No extra configuration needed.

Mortgage Calculator: When both currency converter and mortgage calculator are enabled, the mortgage modal automatically opens with the converted price in the selected currency.

Price Placeholders

Display dynamic price statistics from search results anywhere on your page. Perfect for intro text, marketing copy, or informational sections outside the widget.

How It Works

Add placeholder tokens to any text on your page. When the widget performs a search, it automatically calculates price statistics from the results and replaces the placeholders with formatted values.

Available Placeholders

Placeholder	Description
`#MINPRICE#`	Lowest price among filtered results
`#MAXPRICE#`	Highest price among filtered results
`#AVGPRICE#`	Average price of all filtered results

Basic Usage

Add the rs-price-stats class to any element containing placeholders:

HTML

<!-- Intro paragraph above the widget -->
<p class="rs-price-stats">
    We offer properties starting from #MINPRICE# up to #MAXPRICE#,
    with an average price of #AVGPRICE#.
</p>

<!-- Widget below -->
<div class="rs-search-template-01"></div>
<div class="rs-listing-template-01"></div>

Example Output

After search returns results, the placeholders are replaced:

We offer properties starting from €125,000 up to €2,500,000, with an average price of €450,000.

Custom Selector

To use a different class or multiple elements, configure the selector:

JavaScript

window.RealtySoftConfig = {
    // Use custom selector (default: '.rs-price-stats')
    pricePlaceholderSelector: '.intro-text, .price-summary, #hero-stats'
};

Behavior

Placeholders update automatically when filters change
Prices are formatted according to the current language/locale
"Price on Request" properties are excluded from calculations
If no valid prices found, original placeholder text is preserved

Tip: Place price statistics in your page's intro section to give visitors an immediate overview of the price range for their search criteria.

Pre-filled & Locked Filters

Pre-fill or lock filters using data-rs-* attributes. By default, pre-filled filters can be changed by visitors. Use data-rs-lock-* to create truly locked filters.

Finding Your Filter IDs

To set filters, you need the IDs for your locations, property types, and features.

WordPress Users

Admin → Settings → RealtySoft → Open Filter IDs Reference

Wix / Squarespace / Standalone

Open Filter IDs Tool →

Pre-filled Filter Attributes (Changeable)

These attributes set initial filter values that users can change:

Attribute	Description	Example Values
`data-rs-location`	Location ID (single or comma-separated)	"505", "505,506,507"
`data-rs-property-type`	Property type ID (single or comma-separated)	"76", "1,2,3,4"
`data-rs-listing-type`	Listing type	"resale", "development", "long_rental", "short_rental"
`data-rs-beds-min`	Minimum bedrooms	"1", "2", "3"
`data-rs-beds-max`	Maximum bedrooms	"3", "4", "5"
`data-rs-baths-min`	Minimum bathrooms	"1", "2"
`data-rs-baths-max`	Maximum bathrooms	"2", "3"
`data-rs-price-min`	Minimum price	"100000", "200000"
`data-rs-price-max`	Maximum price	"500000", "1000000"
`data-rs-built-min`	Minimum built area (m²)	"50", "100"
`data-rs-built-max`	Maximum built area (m²)	"200", "500"
`data-rs-plot-min`	Minimum plot size (m²)	"200", "500"
`data-rs-plot-max`	Maximum plot size (m²)	"1000", "5000"
`data-rs-features`	Feature IDs (comma-separated)	"1,5,12"
`data-rs-ref`	Property reference	"R123456"
`data-rs-columns`	Grid columns (1-4)	"2", "3", "4"

Default vs Locked Filters

By default, the data-rs-* attributes pre-fill filters but users can change them. This is ideal for landing pages like "Apartments in Costa del Sol" where you want to show a filtered view but allow users to refine their search.

For pages where users should not be able to change filters, use the data-rs-lock-* prefix instead:

Attribute Type	User Can Change?	Use Case
`data-rs-property-type="76"`	Yes (changeable)	Landing pages, pre-filtered searches
`data-rs-lock-property-type="76"`	No (locked)	Dedicated property type pages, embedded widgets

Locked Filter Attributes

All filter attributes have a locked version with the -lock- prefix:

Changeable (Default)	Locked
`data-rs-location`	`data-rs-lock-location`
`data-rs-property-type`	`data-rs-lock-property-type`
`data-rs-listing-type`	`data-rs-lock-listing-type`
`data-rs-beds-min`	`data-rs-lock-beds-min`
`data-rs-price-min`	`data-rs-lock-price-min`
...and all other filter attributes

Example: Changeable Pre-filled Filter (Landing Page)

HTML

<!-- Pre-filled with Apartments, but users can change to other types -->
<div class="rs-search-template-01"></div>

<div class="rs-listing-template-01"
     data-rs-property-type="1,2,3,4"
     data-rs-listing-type="resale"></div>

Example: Locked Filter (Dedicated Page)

HTML

<!-- Only Villas - users cannot change this filter -->
<div class="rs-search-template-01"></div>

<div class="rs-listing-template-01"
     data-rs-lock-property-type="76"
     data-rs-lock-listing-type="resale"></div>

Example: Luxury Villas Page

HTML

<!-- Only show villas, 3+ beds, over 500k -->
<div class="rs-search-template-01"
     data-rs-property-type="76"
     data-rs-beds-min="3"
     data-rs-price-min="500000"></div>

<div class="rs-listing-template-01"
     data-rs-property-type="76"
     data-rs-beds-min="3"
     data-rs-price-min="500000"></div>

Example: Location-Specific Rentals Page

HTML

<!-- Only show long-term rentals in Marbella (ID: 505) -->
<div class="rs-search-template-01"
     data-rs-location="505"
     data-rs-listing-type="long_rental"></div>

<div class="rs-listing-template-01"
     data-rs-location="505"
     data-rs-listing-type="long_rental"></div>

Configuration Reference

Complete list of RealtySoftConfig options:

Option	Type	Default	Description
`language`	string	"en_US"	Default language code
`ownerEmail`	string	""	Inquiry form recipient email
`privacyPolicyUrl`	string	""	Privacy policy page URL
`propertyPageSlug`	string	"property"	URL slug for property pages
`resultsPage`	string	"/properties"	Redirect URL for search-only mode
`perPage`	number	12	Items per page (grid/list)
`mapPerPage`	number	50	Items per page (map view)
`enableMapView`	boolean	true	Show map view toggle
`labelOverrides`	object	{}	Custom label overrides
`lockedFilters`	object	{}	Filters locked via config
`branding`	object	{}	Email and PDF branding options
`branding.companyName`	string	""	Company name in emails/PDF
`branding.logoUrl`	string	""	Logo URL for emails/PDF
`branding.websiteUrl`	string	""	Website URL in email footer
`branding.primaryColor`	string	"#667eea"	Brand color for PDF
`branding.emailHeaderColor`	string	(primaryColor)	Email header background color
`similarProperties`	object	{}	Similar properties configuration (see Similar Properties)
`similarProperties.limit`	number	6	Maximum number of similar properties to display
`similarProperties.minResults`	number	3	Minimum required to show section (hides if fewer found)
`similarProperties.priceRange`	number	0.3	Price range for fallback search (0.3 = ±30%)

Full Configuration Example

JavaScript

<script>
window.RealtySoftConfig = {
    // Language
    language: 'en_US',

    // Contact
    ownerEmail: 'info@myrealestate.com',
    privacyPolicyUrl: '/privacy-policy',

    // URLs
    propertyPageSlug: 'property',
    resultsPage: '/properties',

    // Display
    perPage: 12,
    mapPerPage: 50,
    enableMapView: true,

    // Custom labels
    labelOverrides: {
        _default: {
            search_button: 'Find My Home',
            reset_button: 'Start Over',
            no_results: 'No properties match your criteria'
        },
        es_ES: {
            search_button: 'Buscar Mi Casa'
        }
    },

    // Global filter locks
    lockedFilters: {
        listing_type: 'resale'
    },

    // Branding for emails and PDF
    branding: {
        companyName: 'My Real Estate',
        logoUrl: 'https://myrealestate.com/logo.png',
        websiteUrl: 'https://myrealestate.com',
        primaryColor: '#0066cc',
        emailHeaderColor: '#1a1a1a'
    },

    // Similar properties on detail page
    similarProperties: {
        limit: 6,        // Max properties to show
        minResults: 3,   // Min required to show section
        priceRange: 0.3  // ±30% price range for fallback search
    }
};
</script>

Troubleshooting

Widget not loading

Verify the loader script is included before </body>
Check browser console for errors (F12 → Console)
Ensure no JavaScript errors from other scripts are blocking execution
Confirm your domain is whitelisted in the widget configuration

Components not rendering

Verify class names are correct (e.g., rs_location not rs-location)
Check that data-rs-variation is a valid number for that component
Ensure parent containers are visible (not display: none)

No properties showing

Check if filters are too restrictive
Verify API connection in browser Network tab
Ensure locked filters have valid IDs
Check data-rs-standalone is set correctly for independent grids

Styling conflicts

Widget CSS uses rs_ and rs- prefixes to avoid conflicts
If your theme overrides widget styles, use more specific selectors
Check for !important rules in your theme

Property detail page not loading

Verify rs_detail container exists on the page
Check property ID is in the URL or set via data-property-id
Ensure propertyPageSlug matches your URL structure

Debug Mode

Enable debug mode to see detailed logs in the browser console:

JavaScript

window.RealtySoftConfig = {
    debug: true
};

Browser Console Commands

JavaScript

// Check widget mode
RealtySoft.getMode();

// Get current state
RealtySoft.State.getState();

// Get current filters
RealtySoft.State.get('filters');

// Manually trigger search
RealtySoft.search();

// Reset all filters
RealtySoft.reset();