Intégrer des témoignages

Découvrez comment intégrer et afficher des témoignages sur votre site.

NowStack propose plusieurs méthodes pour intégrer des témoignages à un site ou une application.

Le widget JavaScript constitue la méthode la plus simple :

<div id="nowstack-testimonials"></div>
<script>
  (function (w, d, s, o, f, js, fjs) {
    w["NowStackTestimonials"] = 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",
    "nowstack",
    "https://ndd-seo.fr/widget/testimonials.js",
  );

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

Options de personnalisation

nowstack("embed", "#nowstack-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)
});

Composant React

Dans une application React, utilisez le composant officiel :

Installation

npm install @nowstack/react-testimonials

Utilisation

import { Testimonials } from "@nowstack/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>
  );
}

Intégration par API

Pour une intégration sur mesure, récupérez les témoignages avec l’API REST :

Charger les témoignages

const response = await fetch("https://ndd-seo.fr/api/v1/testimonials", {
  headers: {
    Authorization: "Bearer YOUR_API_TOKEN",
  },
});

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

Affichage personnalisé

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

Personnalisation visuelle

Classes CSS

Le widget expose les classes suivantes :

.nowstack-testimonials — conteneur principal
.nowstack-testimonial — témoignage
.nowstack-content — contenu
.nowstack-author — auteur
.nowstack-rating — note
.nowstack-company — entreprise

Exemple CSS

.nowstack-testimonials {
  font-family: "Police de votre marque", sans-serif;
}

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

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

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

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