# Rechat SDK

The Rechat SDK lets you add Rechat real-estate features (listing search, an
interactive map, listing cards, and lead capture) to any website.

There are two ways to use it, and you can mix them:

- **Web Components**: drop-in HTML tags (`<rechat-listings>`, `<rechat-map>`, …) that
  render a full listing search experience. No framework required.
- **JavaScript SDK**: a small `Rechat.Sdk()` class for lead capture, activity tracking,
  and read access to listings, agents, and testimonials from your own code.

Both ship in one file loaded from a CDN:

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

That's it. The custom elements register themselves and `Rechat` is available globally.

## Documentation

- [Installation](./public/docs/installation.md): loading the SDK, pinning versions.

**Web Components**

- [Overview](./public/docs/web-components/index.md): structure and the component catalog.
- [Attribute Reference](./public/docs/web-components/attributes.md): every attribute on every element.
- [Custom Markup (Templates)](./public/docs/web-components/templates.md): render your own HTML with `{{ … }}` placeholders.
- [Theming](./public/docs/web-components/theming.md): named themes and CSS variables.
- [Events](./public/docs/web-components/events.md): DOM events for fetches, clicks, and errors.
- [Sign-in & Saved Searches](./public/docs/web-components/sign-in-saved-searches.md): visitor accounts on portal sites.

**JavaScript SDK**

- [Overview](./public/docs/javascript-sdk/index.md): settings, portals, offline sync.
- [Lead Capture](./public/docs/javascript-sdk/lead-capture.md): create leads directly or bind an HTML form.
- [Lead Tracker](./public/docs/javascript-sdk/lead-tracker.md): record visitor activity on a lead's timeline.
- [Listings](./public/docs/javascript-sdk/listings.md): listing search and counts.
- [Agents](./public/docs/javascript-sdk/agents.md): the brand's agent roster.
- [Testimonials](./public/docs/javascript-sdk/testimonials.md): the brand's testimonials.

## The Widget Builder

Prefer not to hand-write tags? Use the <a href="./builder/">**Widget Builder**</a> bundled
with these docs. It's a visual tool where you pick a widget (Listings, or a standalone
Search Form), adjust filters and theme, preview it live, and **copy the ready-to-paste
embed code**.

## At a glance

A listing-search widget:

```html
<rechat-root brand_id="YOUR_BRAND_ID">
  <rechat-listings>
    <rechat-listing-details></rechat-listing-details>

    <rechat-map-filter></rechat-map-filter>
    <rechat-map></rechat-map>
    <rechat-map-listings-grid></rechat-map-listings-grid>
    <rechat-listings-pagination></rechat-listings-pagination>
  </rechat-listings>
</rechat-root>
```

Lead capture from code:

```js
const sdk = new Rechat.Sdk()

sdk.Leads.capture(
  { lead_channel: '2c55e69d-adbe-42d9-97a5-bedb43783b80' },
  { first_name: 'John', last_name: 'Doe', email: 'john@rechat.com' },
)
```