Embedding Testimonials

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

Widget Embed

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

Basic 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;
}

Performance Tips

• Lazy Loading: Use the lazy option to load testimonials only when they come into view
• Caching: Enable caching to reduce API calls
• Image Optimization: Testimonial avatars are automatically optimized
• CDN: Our widget is served from a global CDN for fast loading