Embed a property search map on any website with HTML custom elements. No framework required. Load the script and stylesheet first — see Installation.
<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.
<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-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-property-search-form> |
Standalone search form |
Add <rechat-listing-details> once inside <rechat-listings> to enable the details
modal on card clicks.
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>