Agents

Embed the brokerage's agent roster ("Meet our agents") with custom elements. Like sdk.Agents, these are portal-only: the brand is resolved from the current domain.

Roster

<rechat-agents> owns the roster state; compose the sub-elements you need inside it:

<rechat-root>
  <rechat-agents limit="12">
    <rechat-agents-search placeholder="Find an agent…"></rechat-agents-search>
    <rechat-agents-count></rechat-agents-count>
    <rechat-agents-grid></rechat-agents-grid>
    <rechat-agents-pagination></rechat-agents-pagination>
  </rechat-agents>
</rechat-root>
Copy

Custom agent cards

Put a <template rechat-each="agents"> inside the grid to render your own markup. See Custom Markup (Templates):

<rechat-agents-grid>
  <template rechat-each="agents">
    <a class="agent" href="/agents/{{ id }}">
      <img src="{{ profile_image_url }}" alt="{{ display_name }}">
      <h3>{{ display_name }}</h3>
      <p data-if="designation">{{ designation }}</p>
      <a href="tel:{{ phone_number }}" data-if="phone_number">{{ formatted.phone.text }}</a>
    </a>
  </template>
  <template rechat-state="empty"><p>No agents found.</p></template>
</rechat-agents-grid>
Copy

Useful agent fields: id, display_name, first_name, last_name, email, phone_number, profile_image_url, user_type, designation, website, instagram, facebook, twitter, linkedin, youtube, plus the computed formatted.phone.text (pretty-printed phone) and formatted.initials.text (avatar fallback). Each item is also available under agent, e.g. {{ agent.email }}.

Single agent

<rechat-agent> renders one roster member by user id, e.g. "your agent" on a landing page:

<rechat-agent id="3f9c8d2a-…"></rechat-agent>
Copy

It accepts an optional <template rechat-bind> child bound against the same agent view-model (the agent is under agent, with its fields also at top level):

<rechat-agent id="3f9c8d2a-…">
  <template rechat-bind>
    <div class="hero-agent">
      <h2>{{ agent.display_name }}</h2>
      <a href="mailto:{{ agent.email }}">{{ agent.email }}</a>
    </div>
  </template>
</rechat-agent>
Copy

Attributes

Events

Dispatched on window; access data via event.detail.