Rechat SDK
    Preparing search index...

    Class Listings

    Web Components - Quick Start

    Embed a property search map on any website with HTML custom elements. No framework required.

    <link rel="stylesheet" href="https://unpkg.com/@rechat/sdk/dist/rechat.min.css">
    <script src="https://unpkg.com/@rechat/sdk/dist/rechat.min.js"></script>

    <rechat-root brand_id="YOUR_BRAND_ID">
      <rechat-listings filter_listing_statuses="Active">
        <rechat-map-filter></rechat-map-filter>
        <div style="display:flex; height:100vh">
          <div style="flex:1">
            <rechat-map default_center="32.7767, -96.797"></rechat-map>
          </div>
          <div style="flex:1; overflow:auto">
            <rechat-listings-count></rechat-listings-count>
            <rechat-map-listings-grid></rechat-map-listings-grid>
            <rechat-listings-pagination></rechat-listings-pagination>
          </div>
        </div>
      </rechat-listings>
    </rechat-root>

    Open the Widget Builder

    <rechat-root> - outermost wrapper. Handles auth and brand config. One per page.

    <rechat-listings> - listing context. Owns filter state and API calls. All listing components must be inside it.

    Element Description
    <rechat-root> Brand and auth context
    <rechat-listings> Listing context (filter + map state)
    <rechat-map> MapLibre + OpenFreeMap map with listing pins
    <rechat-map-filter> All-in-one filter bar
    <rechat-map-listings-grid> Listing card grid
    <rechat-listings-list> Flat listing card list
    <rechat-listing-card> Single listing card
    <rechat-listings-sort> Sort dropdown
    <rechat-listings-count> Result count display
    <rechat-listings-pagination> Page navigation
    <rechat-property-search-form> Standalone search form

    Use these instead of <rechat-map-filter> for custom layouts:

    <rechat-filter-search> <rechat-filter-property-type> <rechat-filter-price> <rechat-filter-beds> <rechat-filter-baths> <rechat-filter-advanced> <rechat-filter-reset> <rechat-filter-loading>

    Attributes

    All custom-element attributes are HTML strings. Numbers as "10", booleans as "true" / "false", lists as "Active,Sold" or a JSON array literal.

    Every filter value (and every per-sub-filter disable flag) lives on <rechat-listings> under its filter_* / disable_filter_* name. <rechat-map-filter> and the individual <rechat-filter-*> tags only carry their local UI flag (disabled).

    <rechat-root>

    The outermost wrapper. One per page. Handles brand context and theme activation.

    Attribute Default Description
    brand_id - Rechat brand identifier
    authorization - Auth token for authenticated requests
    api_url "https://api.rechat.com" API base URL override
    data-theme "rechat" Name of the CSS theme block to activate ("rechat" or "compact" ship by default; custom themes are authored as [data-theme="..."] CSS blocks). See Theming.md.

    <rechat-listings>

    The listing context wrapper. Owns filter / map / listing state. Required around any of the listing components. Every filter value the SDK supports is set here.

    Attribute Default Description
    listings - JSON string of pre-hydrated IListing[] for SSR-style hydration
    disabled "false" Suspend all listing fetches
    filter_brand_id - Brand to scope listings to
    filter_search_limit - Maximum total listings the search may return
    Attribute Default Description
    filter_boundary_ids - Comma-separated boundary UUIDs to seed selected places. Loaded on mount regardless of which filter UI tags are rendered.

    filter_address, filter_boundary_state, filter_boundary_country, filter_suggestions_limit no longer belong on <rechat-listings> — they only take effect when a search UI is mounted. Set them on <rechat-map-filter> or <rechat-filter-search> instead. They still work on the parent for now but emit a deprecation warning and will be removed in a future release.

    Attribute Default Description
    filter_listing_statuses "Active" Comma-separated statuses (Active, Sold, Pending, Leased, …)
    filter_property_types all Comma-separated property types
    filter_property_subtypes - Comma-separated subtypes
    filter_architectural_styles - Comma-separated styles
    filter_list_agents - Comma-separated agent MUIs (listing-side only)
    filter_list_offices - Comma-separated office IDs
    filter_agents - Comma-separated agent MUIs (any role)
    filter_mlses - Comma-separated MLS names. Brokerage-side scope: always sent on every API call when set, even when other filters are absent or the map/filter UI is hidden.
    filter_minimum_sold_date - Earliest sold date (Unix epoch seconds)
    Attribute Default Description
    filter_minimum_price - Minimum price
    filter_maximum_price - Maximum price
    filter_minimum_bedrooms - Minimum bedrooms
    filter_maximum_bedrooms - Maximum bedrooms
    filter_minimum_bathrooms - Minimum bathrooms
    filter_baths - Exact bath count
    filter_minimum_parking_spaces - Minimum parking spaces
    filter_minimum_square_feet - Minimum square feet
    filter_maximum_square_feet - Maximum square feet
    filter_minimum_lot_square_feet - Minimum lot square feet
    filter_maximum_lot_square_feet - Maximum lot square feet
    filter_minimum_year_built - Minimum year built
    filter_maximum_year_built - Maximum year built
    Attribute Default Description
    filter_pool - "true" = require a pool
    filter_open_houses - "true" = require open house. Omit or "false" = no filter applied.
    filter_office_exclusives - "true" = office-exclusive only. Omit or "false" = no filter applied.

    Deprecated. These flags continue to work but emit a one-time console.warn per attribute. They will be removed in a future release. Move each one to the matching individual <rechat-filter-*> tag's disabled attribute.

    Attribute Hides Move to
    disable_filter_address Address search box disabled on <rechat-filter-search>
    disable_filter_price Price control disabled on <rechat-filter-price>
    disable_filter_beds Beds control disabled on <rechat-filter-beds>
    disable_filter_baths Baths control disabled on <rechat-filter-baths>
    disable_filter_property_types Property types control disabled on <rechat-filter-property-type>
    disable_filter_advanced Advanced filters control disabled on <rechat-filter-advanced>
    disable_filter_loading_indicator Loading indicator disabled on <rechat-filter-loading>

    <rechat-map>

    The MapLibre + OpenFreeMap map.

    Attribute Default Description
    preset "liberty" Built-in style preset: liberty, bright, positron, dark
    style_url - Full URL to any MapLibre-compatible style JSON (wins over preset)
    zoom "10" Initial zoom level
    default_center - "lat, lng" initial map center (does not affect the search filter - only the camera)

    <rechat-map-filter>

    The all-in-one filter bar. Most filter values live on the parent <rechat-listings>; the four search-related attrs live here because they only take effect when a search UI is mounted.

    Attribute Default Description
    address - Initial free-text address query
    boundary_state - Restrict autocomplete suggestions to a state (e.g. "TX")
    boundary_country - Restrict autocomplete suggestions to a country (e.g. "US")
    suggestions_limit "5" Max autocomplete suggestions

    Sub-filter visibility is controlled via the disable_filter_* flags on <rechat-listings> (deprecated) or by composing individual <rechat-filter-*> tags with disabled="true".

    Use these when composing filters one-by-one instead of <rechat-map-filter>. Each carries only its local UI flag, except <rechat-filter-search>, which also accepts the four search-config attrs.

    Tag Attributes
    <rechat-filter-search> disabled, address, boundary_state, boundary_country, suggestions_limit
    <rechat-filter-property-type> disabled
    <rechat-filter-price> disabled
    <rechat-filter-beds> disabled
    <rechat-filter-baths> disabled
    <rechat-filter-advanced> disabled
    <rechat-filter-reset> -
    <rechat-filter-loading> disabled

    disabled="true" hides the control without removing it from the DOM; the underlying filter state (seeded by <rechat-listings>) still applies.

    <rechat-listings-sort>

    Attribute Default Description
    value "-price" Sort order. - prefix = descending.

    The sort order applies to every API call regardless of whether this tag is rendered. To set the default without showing the dropdown, set filter_sort_by on <rechat-listings> instead.

    <rechat-listings-pagination>

    Attribute Default Description
    limit "20" Listings per page
    offset "0" Initial offset

    Pagination affects the API request whether or not this tag is rendered. To configure page size/offset without showing the navigator, set filter_pagination_limit / filter_pagination_offset on <rechat-listings>.

    <rechat-listing-card>

    Attribute Default Description
    id - Fetch a single listing by id
    listing - JSON string of a pre-hydrated listing
    skeleton "false" Force the loading-skeleton state
    compact "false" Use the compact layout
    hyperlink_href - URL template with {id} placeholder for the whole card
    hyperlink_target - Link target (e.g. "_blank")

    <rechat-map-listings-grid> and <rechat-listings-list> render cards internally with no slot to set the hyperlink. Configure card-level link behaviour at the parent via listing_hyperlink_href / listing_hyperlink_target on <rechat-listings>.

    DOM Events

    Custom events dispatched on window. Access data via event.detail.

    Event Detail When
    rechat-listings:fetched IListing[] Listings loaded/reloaded from API
    rechat-listing-filters:change Filter state object Any filter or map position changes
    rechat-listing-card:click { listing: IListing } Listing card clicked — fires for cards inside the grid/list and for listings picked from the address-search autocomplete's "Listings" section
    rechat-listings-pagination:change { page: number } Page changed
    rechat-error { source: string, error: string } API request failed 
    window.addEventListener('rechat-listings:fetched', (e) => {
      console.log(`${e.detail.length} listings loaded`)
    })

    window.addEventListener('rechat-listing-card:click', (e) => {
      // Fires for listing-grid clicks AND for picks from the address-search
      // autocomplete's "Listings" section.
      window.location.href = `/properties/${e.detail.listing.id}`
    })

    window.addEventListener('rechat-error', (e) => {
      console.error(`[${e.detail.source}]:`, e.detail.error)
    })

    Theming

    The SDK exposes its visual surface as CSS custom properties. You can restyle individual values in place, or activate a complete named theme via the data-theme HTML attribute. Either approach is pure CSS - nothing to register from JavaScript.

    The SDK ships two themes:

    Name What it does
    rechat Default look. Applied implicitly to :root.
    compact Reduced scaling (0.8), sharper corners, tighter spacing.

    Activate one by setting data-theme on <rechat-root> (or any ancestor such as <body> - CSS custom properties inherit through Shadow DOM):

    <rechat-root data-theme="compact">
      <rechat-listings>…</rechat-listings>
    </rechat-root>

    A brokerage adds a custom theme by writing one CSS block on their site - no SDK build step:

    [data-theme="compass"] {
      --rechat-theme-secondary-9: #1a73e8;
      --rechat-theme-radius-factor: 0.5;
      --rechat-theme-status-active: #2e7d32;
    }

    <rechat-root data-theme="compass">…</rechat-root>

    Only the variables you redeclare differ from the rechat defaults; every other token inherits.

    To tweak a few values without declaring a named theme, set them on :root (or any ancestor of <rechat-root>):

    :root {
      --rechat-theme-secondary-9: #e63946;
      --rechat-theme-text-font-family: "Georgia";
    }

    The reference tables below list every variable, its default, and what it controls.

    Variable Default Description
    --rechat-theme-secondary-9 #0b73da Primary interactive color
    --rechat-theme-secondary-10 #0065cb Hover state
    --rechat-theme-secondary-11 #0671d8 Link/text variant
    --rechat-theme-secondary-12 #0c3361 Dark variant
    Variable Default
    --rechat-theme-status-active #008b46
    --rechat-theme-status-pending #e78700
    --rechat-theme-status-sold #e33104
    --rechat-theme-status-leased #64B5F6
    --rechat-theme-status-other #8e8e8e
    Variable Default
    --rechat-theme-pin-color #e3001b
    Variable Default
    --rechat-theme-text-font-family "Lato"
    --rechat-theme-text-primary var(--rechat-theme-gray-12)
    --rechat-theme-text-secondary var(--rechat-theme-gray-a10)
    --rechat-theme-text-error #ff0033
    Variable Default Description
    --rechat-theme-scaling 1 Global spacing/size multiplier
    --rechat-theme-radius-factor 1 Border radius multiplier (0 = sharp)
    --rechat-theme-background-color white Panel/card background
    Variable Default
    --rechat-theme-skeleton-base-color #ebebeb
    --rechat-theme-skeleton-highlight-color #f5f5f5
    --rechat-theme-skeleton-animation-duration 1.5s
    Variable Default
    --rechat-theme-listing-card-box-shadow 0px 4px 4px var(--rechat-theme-accent-a3)
    --rechat-theme-listing-card-highlighted-box-shadow 0px 2px 4px var(--rechat-theme-accent-a8)
    Index

    Constructors

    constructor

    Methods

    count search

    Constructors

    Methods

    Settings

    Member Visibility

    On This Page

    Web Components - Quick StartAttributesDOM EventsTheming
    Constructors
    Methods