Documentation

<script src="https://astrowidgets.dev/widgets/testimonials.js"></script>

<testimonial-widget layout="grid" theme="light"></testimonial-widget>

<!-- Add meta tags for Supabase config (once per page) -->
<meta name="supabase-url" content="https://your-project.supabase.co" />
<meta name="supabase-key" content="your-publishable-key" />

<script src="https://astrowidgets.dev/widgets/testimonials.js"></script>

<!-- The widget fetches its config and reviews automatically -->
<testimonial-widget widget-id="your-widget-uuid"></testimonial-widget>

<!-- Override Supabase config per widget (no meta tags needed) -->
<testimonial-widget
  widget-id="your-widget-uuid"
  supabase-url="https://your-project.supabase.co"
  supabase-key="your-publishable-key"
></testimonial-widget>

<testimonial-widget
  layout="grid"
  theme="dark"
  columns="2"
  max-reviews="4"
  show-rating="true"
  show-date="false"
  show-source="true"
  show-avatar="true"
  autoplay="false"
></testimonial-widget>

<testimonial-widget
  layout="grid"
  style="
    --tw-accent: #e74c3c;
    --tw-star-color: #e74c3c;
    --tw-card-bg: #fef9f8;
    --tw-border-radius: 20px;
    --tw-font-family: Georgia, serif;
  "
></testimonial-widget>

<testimonial-widget
  layout="grid"
  custom-css=".tw-card { border: 2px solid #e74c3c; } .tw-name { color: #e74c3c; }"
></testimonial-widget>

// Get the widget element
const widget = document.querySelector('testimonial-widget');

// Set reviews programmatically
widget.setReviews([
  {
    name: 'Jane Doe',
    avatar: 'https://example.com/avatar.jpg',
    rating: 5,
    text: 'Amazing product!',
    date: '2026-03-01',
    source: 'google'
  }
]);

// Or use the reviews property
widget.reviews = myReviewsArray;

// Change attributes dynamically
widget.setAttribute('layout', 'slider');
widget.setAttribute('theme', 'dark');

{
  "name": "Sarah Chen",        // Required. Reviewer name.
  "avatar": "",                // Optional. URL to avatar image.
                               // If empty, initials are shown.
  "rating": 5,                 // Required. 1-5 star rating.
  "text": "Great service!",    // Required. Review text.
  "date": "2026-02-18",       // Optional. ISO date string.
  "source": "google"           // Optional. One of: google, yelp,
                               //   facebook, trustpilot
}

<testimonial-widget
  layout="grid"
  data='[{"name":"Jane","rating":5,"text":"Wonderful!","source":"google"}]'
></testimonial-widget>

---
// src/pages/index.astro
import Layout from '../layouts/Layout.astro';

const reviews = await fetch('/api/reviews').then(r => r.json());
---
<Layout>
  <script src="/widgets/testimonials.js" is:inline></script>

  <testimonial-widget
    layout="masonry"
    columns="3"
    theme="light"
    data={JSON.stringify(reviews)}
  ></testimonial-widget>
</Layout>

<testimonial-widget id="reviews" layout="grid"></testimonial-widget>

<script is:inline>
  fetch('/api/reviews')
    .then(r => r.json())
    .then(data => {
      document.getElementById('reviews').setReviews(data);
    });
</script>