Testimonials

Embed the brand's client testimonials with a single custom element. Like sdk.Testimonials, it is portal-only: the brand is resolved from the current domain.

<rechat-testimonials> is self-contained: one tag fetches and renders the testimonials as cards (star rating, text, attribution), with a built-in "Load more" button while more remain:

<rechat-root>
  <rechat-testimonials limit="6"></rechat-testimonials>
</rechat-root>
Copy

Load the script and stylesheet first. See Installation.

Structure

<rechat-testimonials> goes directly inside <rechat-root>. It does not need <rechat-listings> and has no child elements of its own: the tag owns its data, renders the cards and the "Load more" button itself. It can share a <rechat-root> with a listings or agents widget.

What it shows

Each card shows, top to bottom:

• the star rating (★★★★☆), only when the testimonial has one,
• the testimonial text,
• the author: first and last name ("Jane Doe"). A missing part is skipped, and a testimonial with no name at all reads "Anonymous". The email address is never shown.

While the first page loads, three placeholder cards are shown.

Paging

The list pages with a Load more button rather than numbered pages:

• limit is the page size (default 20).
• "Load more" fetches the next page and appends it below the cards already on screen. It is disabled while a page is loading.
• The button disappears once every testimonial is shown.
• load_more="false" hides the button, so only the first limit testimonials show, which is useful for a "latest reviews" strip.

<rechat-testimonials limit="3" load_more="false"></rechat-testimonials>
Copy

Empty state

When the brand has no testimonials the tag does not stay blank. Once the first fetch has settled with nothing, it renders a centred "No testimonials yet" message in place of the cards, and no "Load more" button. A fetch that fails is treated the same way.

• empty_message changes the text of that message.
• empty="hide" removes the element from the page instead, so a section that would only hold the message collapses. The tag stays in the DOM (it is hidden with an inline display: none) and reappears if testimonials arrive later.
• A <template rechat-state="empty"> child always wins over the built-in message, so a page that has made its own decision about the empty state is left alone. See Custom testimonial markup.

<rechat-testimonials empty_message="Reviews are on their way."></rechat-testimonials>

<rechat-testimonials empty="hide"></rechat-testimonials>
Copy

While the first page loads nothing empty-related shows; the three placeholder cards do.

Custom testimonial markup

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

<rechat-testimonials limit="6">
  <template rechat-each="testimonials">
    <blockquote>
      <span data-if="rating" data-format="stars">{{ rating }}</span>
      <p>{{ content }}</p>
      <cite>{{ formatted.author.text }}</cite>
    </blockquote>
  </template>
  <template rechat-state="loading"><p>Loading reviews…</p></template>
  <template rechat-state="empty"><p>No reviews yet.</p></template>
</rechat-testimonials>
Copy

Testimonial fields: content, rating (1–5 or absent), contact (first_name / last_name / email, or null), plus the computed formatted.author.text ("Jane Doe", or "Anonymous") and formatted.rating.text (pre-rendered stars). The stars formatter turns a numeric rating into ★★★★☆. Each item is also available under testimonial, e.g. {{ testimonial.content }}.

With templates the SDK still renders the "Load more" button below your markup; load_more="false" removes it. The same goes for the empty state: without a <template rechat-state="empty"> the built-in message (or empty_message) still appears when there is nothing to list, and empty="hide" still removes the element. Give the tag an empty-state template to take over that state yourself.

A <template rechat-bind> inside the tag can show the totals: {{ count }} is the number of testimonials on screen and {{ total }} the number available.

<rechat-testimonials limit="6">
  <template rechat-bind>
    <p>Showing {{ count }} of {{ total }} reviews</p>
  </template>
  <template rechat-each="testimonials">
    <blockquote>{{ content }}</blockquote>
  </template>
</rechat-testimonials>
Copy

Styling

The cards render in the light DOM, follow the active theme, and can be restyled with plain CSS through their class names. See Theming → Testimonial Card for the class list.

rechat-testimonials .testimonials__list {
  grid-template-columns: repeat(3, 1fr);
}
Copy

The host element gets a data-rechat-loaded attribute once testimonials have loaded, for styling the first paint differently from later loads. The built-in empty message is .testimonials__empty-state.

Attributes

Attribute	Default	Description
limit	"20"	Testimonials fetched per page ("Load more" appends another page)
load_more	"true"	Set "false" to hide the "Load more" button
empty	"show"	What to do when the brand has no testimonials: "show" renders the empty message, "hide" removes the element from the page entirely. A <template rechat-state="empty"> child replaces the built-in message.
empty_message	"No testimonials yet"	The text of the built-in empty message

Events

Dispatched on window; access data via event.detail.

Event	Detail	When
rechat-testimonials:fetched	ITestimonial[]	Testimonials page loaded. The detail is that page only, not the testimonials already on screen
rechat-error	{ source: 'testimonials', error }	A fetch failed

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