Web Components — Quick Start

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

Loading the SDK

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

Minimal Example

<rechat-root brand_id="YOUR_BRAND_ID">
  <rechat-listings
    map_api_key="YOUR_GOOGLE_MAPS_KEY"
    map_default_center="32.7767, -96.797"
    filter_listing_statuses="Active"
  >
    <rechat-map-filter></rechat-map-filter>
    <div style="display:flex; height:100vh">
      <div style="flex:1"><rechat-map></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>
Copy

View Examples

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

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>

Attributes

All attributes are HTML strings. Numbers as "10", booleans as "true"/"false", lists as "Active,Sold".

<rechat-root>

Attribute	Default	Description
brand_id	—	Rechat brand identifier
authorization	—	Auth token for authenticated requests
api_url	"https://api.rechat.com"	API base URL override

<rechat-listings> — Map

Attribute	Default	Description
map_api_key	—	Required. Google Maps API key
map_default_center	—	"lat, lng" initial center
map_zoom	"10"	Initial zoom level
map_id	—	Cloud map styling ID

<rechat-listings> — Filters

Attribute	Default	Description
filter_listing_statuses	"Active"	Comma-separated: Active, Sold, Leased, Pending, etc.
filter_property_types	all	Comma-separated property types
filter_property_subtypes	—	Comma-separated subtypes
filter_architectural_styles	—	Comma-separated styles
filter_sort_by	"-price"	Sort order. - prefix = descending
filter_address	""	Initial address for boundary search on mount
filter_search_limit	—	Max results
filter_suggestions_limit	"5"	Max search suggestions
filter_minimum_price	—	Min price (dollars)
filter_maximum_price	—	Max price (dollars)
filter_minimum_bedrooms	—	Min bedrooms
filter_maximum_bedrooms	—	Max bedrooms
filter_minimum_bathrooms	—	Min bathrooms
filter_baths	—	Exact bath count
filter_minimum_parking_spaces	—	Min parking spaces
filter_minimum_square_feet	—	Min sqft
filter_maximum_square_feet	—	Max sqft
filter_minimum_lot_square_feet	—	Min lot sqft
filter_maximum_lot_square_feet	—	Max lot sqft
filter_minimum_year_built	—	Min year built
filter_maximum_year_built	—	Max year built
filter_minimum_sold_date	—	Min sold date (Unix ms)
filter_pool	—	"true" = pool only
filter_open_houses	"false"	"true" = open house only
filter_office_exclusives	"false"	"true" = office exclusive only
filter_agents	—	Comma-separated agent IDs
filter_list_offices	—	Comma-separated office IDs
filter_brand_id	—	Override brand ID

<rechat-listings> — Disable Filters

Set to "true" to hide the control. The filter value still applies via attributes.

disable_filter_price disable_filter_address disable_filter_beds disable_filter_baths disable_filter_property_types disable_filter_advanced disable_filter_loading_indicator

<rechat-listings> — Links & Pagination

Attribute	Default	Description
listing_hyperlink_href	—	URL template with {id} placeholder
listing_hyperlink_target	—	Link target (e.g. "_blank")
filter_pagination_limit	"20"	Listings per page
filter_pagination_offset	"0"	Initial offset

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
rechat-listings-pagination:change	{ page: number }	Page changed
rechat-error	{ source: string, error: string }	API request failed

Examples

window.addEventListener('rechat-listings:fetched', (e) => {
  console.log(`${e.detail.length} listings loaded`)
})

window.addEventListener('rechat-listing-card:click', (e) => {
  window.location.href = `/properties/${e.detail.listing.id}`
})

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

Theming — CSS Variables

Override variables on :root or on the rechat-root element.

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

Brand Color

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

Status Colors

Variable	Default
--rechat-theme-status-active	#32B86D
--rechat-theme-status-pending	#FFB74D
--rechat-theme-status-sold	#F44336
--rechat-theme-status-leased	#64B5F6
--rechat-theme-status-other	#949598

Map

Variable	Default
--rechat-theme-pin-color	#e3001b

Typography

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

Layout

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

Skeleton Loading

Variable	Default
--rechat-theme-skeleton-base-color	#ebebeb
--rechat-theme-skeleton-highlight-color	#f5f5f5
--rechat-theme-skeleton-animation-duration	1.5s

Listing Card

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)