Web Components

Embed a property search map on any website with HTML custom elements. No framework required. Load the script and stylesheet first. See Installation.

Minimal example

<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>

Or skip the hand-writing and generate this with the Widget Builder.

Structure

<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.

Available components

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-listing-details>`	Details modal, opened when a card is clicked
`<rechat-listings-sort>`	Sort dropdown
`<rechat-listings-count>`	Result count display
`<rechat-listings-pagination>`	Page navigation
`<rechat-listings-disclaimer>`	Optional manual position for the MLS disclaimers (shown automatically otherwise)
`<rechat-property-search-form>`	Standalone search form

Add <rechat-listing-details> once inside <rechat-listings> to enable the details modal on card clicks.

Search widgets (any embed with <rechat-map-filter> or a <rechat-filter-*> tag) show the MLS-required disclaimers automatically for the listings on screen: after the results in a map and list layout, below the pagination otherwise, and in the details modal footer. Listings-only embeds stay quiet. Override either default with disclaimer="full|modal|off" on <rechat-listings>; see the attribute reference.

Individual filter components

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>

Agents and testimonials

These are independent of <rechat-listings>: they sit directly inside <rechat-root> and work on brokerage portal sites.

Element	Description
`<rechat-agents>`	Agent roster context; holds `<rechat-agents-search>`, `<rechat-agents-count>`, `<rechat-agents-grid>` and `<rechat-agents-pagination>`. See Agents
`<rechat-agent>`	A single roster member by user id. See Agents
`<rechat-testimonials>`	Client testimonials as cards with a "Load more" button, in one tag. See Testimonials

Going further

Attribute Reference: every attribute on every element.
Custom Markup (Templates): render your own HTML instead of the built-in layouts.
Theming: named themes and CSS variables.
Events: DOM events for reacting to clicks, fetches, and errors.
Sign-in & Saved Searches: visitor accounts on brokerage portal sites.
Agents: the brokerage's agent roster and single-agent cards.
Testimonials: client testimonials.