Embedding Testimonials

Learn how to embed and display testimonials on your website

NowStack provides multiple ways to embed and display your testimonials on your website or application.

The easiest way to display testimonials is using our JavaScript widget:

<div id="nowts-testimonials"></div>
<script>
  (function (w, d, s, o, f, js, fjs) {
    w["NowtsTesmonials"] = o;
    w[o] =
      w[o] ||
      function () {
        (w[o].q = w[o].q || []).push(arguments);
      };
    ((js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]));
    js.id = o;
    js.src = f;
    js.async = 1;
    fjs.parentNode.insertBefore(js, fjs);
  })(
    window,
    document,
    "script",
    "nowts",
    "https://widget.nowts.com/testimonials.js",
  );

  nowts("init", "YOUR_WIDGET_ID");
  nowts("embed", "#nowts-testimonials");
</script>

Customization Options

nowts("embed", "#nowts-testimonials", {
  layout: "grid", // 'grid', 'carousel', 'masonry'
  columns: 3, // Number of columns (grid layout)
  theme: "light", // 'light', 'dark', 'auto'
  showRating: true, // Show star ratings
  showCompany: true, // Show company names
  maxTestimonials: 12, // Maximum testimonials to display
  autoplay: false, // Auto-rotate testimonials (carousel)
  interval: 5000, // Rotation interval in ms (carousel)
});

React Component

For React applications, use our official React component:

Installation

npm install @nowts/react-testimonials

Usage

import { Testimonials } from "@nowts/react-testimonials";

function App() {
  return (
    <div>
      <h1>Customer Testimonials</h1>
      <Testimonials
        widgetId="YOUR_WIDGET_ID"
        layout="grid"
        columns={3}
        theme="light"
        showRating={true}
        maxTestimonials={12}
      />
    </div>
  );
}

API Integration

For custom implementations, use our REST API to fetch testimonials:

Fetch Testimonials

const response = await fetch("https://api.nowts.com/v1/testimonials", {
  headers: {
    Authorization: "Bearer YOUR_API_TOKEN",
  },
});

const { testimonials } = await response.json();

Custom Display

testimonials.forEach((testimonial) => {
  const element = document.createElement("div");
  element.className = "testimonial";
  element.innerHTML = `
    <blockquote>${testimonial.content}</blockquote>
    <cite>
      <strong>${testimonial.author.name}</strong>
      ${testimonial.author.company ? `, ${testimonial.author.company}` : ""}
    </cite>
    ${testimonial.rating ? `<div class="rating">${"★".repeat(testimonial.rating)}</div>` : ""}
  `;

  document.getElementById("testimonials-container").appendChild(element);
});

Styling Guidelines

CSS Classes

Our widget adds these CSS classes for custom styling:

.nowts-testimonials - Main container
.nowts-testimonial - Individual testimonial
.nowts-content - Testimonial content
.nowts-author - Author information
.nowts-rating - Star rating
.nowts-company - Company name

Custom CSS Example

.nowts-testimonials {
  font-family: "Your Brand Font", sans-serif;
}

.nowts-testimonial {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1.5rem;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.nowts-content {
  font-style: italic;
  margin-bottom: 1rem;
  color: #374151;
}

.nowts-author {
  font-weight: 600;
  color: #1f2937;
}

.nowts-rating {
  color: #fbbf24;
  margin-top: 0.5rem;
}