Cómo Insertar Reseñas en tu Sitio Web (3 Métodos)

¿Por qué Insertar Reseñas?

Los perfiles de reseñas externos (como G2 o directorios locales) son excelentes para el descubrimiento, pero insertar reseñas directamente en tu sitio web es crítico para la conversión.

• Mayores tasas de conversión: Las reseñas en las páginas de productos aumentan las conversiones entre un 18% y un 270%.
• Beneficios SEO: El contenido de las reseñas añade texto único y rico en palabras clave a tus páginas.
• Señales de confianza: Los visitantes ven pruebas sociales sin abandonar tu embudo de ventas.
• Propiedad de los Datos: A diferencia de otras plataformas, Reviewlee te da acceso total a la API en todos los planes, para que puedas construir visualizaciones personalizadas que realmente posees.

Exploremos tres métodos para obtener reseñas en tu sitio, desde "sin código" hasta "código profesional".

Método 1: El Widget de Copiar y Pegar (Sin Código)

La forma más rápida de mostrar reseñas. Funciona en cualquier constructor de sitios web: Wix, Squarespace, WordPress, Webflow o stacks personalizados.

¿Por qué usarlo?

Toma 5 minutos. El widget maneja el diseño, la capacidad de respuesta y se carga de forma asíncrona para no bloquear la renderización de tu página.

Implementación

1. Ve a tu Panel de Reviewlee → Widgets.
2. Elige un diseño (Cuadrícula, Carrusel o Lista).
3. Personaliza los colores para que coincidan con tu marca.
4. Pega este código donde quieras que aparezcan las reseñas:

<!-- Reviewlee Widget -->
<div 
  id="reviewlee-widget"
  data-form-id="TU_ID_DE_FORMULARIO"
  data-layout="grid"
  data-theme="light"
></div>
<script src="https://cdn.reviewlee.com/widget.js" async></script>

✅ Pros:

• Cero tiempo de desarrollo
• Actualizaciones automáticas (las reseñas aparecen al instante)
• Responsivo para móviles

❌ Contras:

• Personalización de diseño limitada
• Menor poder SEO (el contenido se renderiza vía JS)

Método 2: Renderizado del Lado del Servidor (Next.js / React)

Para desarrolladores que desean SEO perfecto y control de diseño pixel-perfect.

Dado que Reviewlee proporciona una API JSON robusta en todos los planes, puedes obtener reseñas en el servidor y renderizarlas como HTML estándar. Esto coloca el contenido directamente en el DOM para que los motores de búsqueda lo indexen.

¿Por qué usarlo?

Quieres que tus reseñas se vean exactamente como el resto de tu interfaz de usuario, y quieres que Google las trate como parte del contenido de tu página.

Implementación (Next.js App Router)

Primero, obtén los datos en un Componente de Servidor:

// app/page.tsx
import { ReviewCard } from "@/components/review-card";

async function getReviews() {
  const res = await fetch(
    `https://api.reviewlee.com/api/v1/reviews?formId=${process.env.REVIEWLEE_FORM_ID}&status=approved`,
    {
      headers: { Authorization: `Bearer ${process.env.REVIEWLEE_API_KEY}` },
      next: { revalidate: 3600 } // Revalidar cada hora
    }
  );
  
  if (!res.ok) throw new Error('Error al obtener reseñas');
  return res.json();
}

export default async function Page() {
  const { data: reviews } = await getReviews();

  return (
    <section aria-labelledby="reviews-title" className="py-12">
      <h2 id="reviews-title" className="text-2xl font-bold mb-8">
        Historias de Clientes
      </h2>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        {reviews.map((review) => (
          <ReviewCard key={review.id} review={review} />
        ))}
      </div>
      
      {/* Añadir Schema.org JSON-LD para Fragmentos Enriquecidos */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@type": "Product",
            "aggregateRating": {
              "@type": "AggregateRating",
              "ratingValue": "4.9",
              "reviewCount": reviews.length
            }
          })
        }}
      />
    </section>
  );
}

✅ Pros:

• 100% Indexable por SEO
• Cero desplazamiento de diseño (CLS)
• Control visual completo
• Ligero (sin scripts externos)

❌ Contras:

• Requiere esfuerzo de desarrollo
• Las actualizaciones dependen de tu estrategia de revalidación de caché

Método 3: Híbrido (Estático + Tiempo Real)

Lo mejor de ambos mundos: pre-renderizar reseñas en tiempo de construcción para SEO y velocidad, luego "idratar" o verificar nuevas reseñas del lado del cliente para mantener el contenido fresco.

¿Por qué usarlo?

Estás utilizando un generador de sitios estáticos (SSG) o deseas la velocidad del HTML estático pero la frescura de un widget.

Implementación

1. Tiempo de Construcción: Obtener reseñas existentes e integrarlas en el HTML (como el Método 2).
2. Tiempo de Ejecución: Usar SWR o React Query para verificar actualizaciones en segundo plano.

"use client";

import useSWR from 'swr';
import { ReviewCard } from "./review-card";

// Función de obtención
const fetcher = (url) => fetch(url).then((res) => res.json());

export function HybridReviews({ initialReviews }) {
  // Usar initialReviews como datos de respaldo específicos
  const { data } = useSWR('/api/reviews/latest', fetcher, { 
    fallbackData: initialReviews,
    refreshInterval: 60000 
  });

  const reviews = data?.reviews || initialReviews;

  return (
    <div className="grid gap-4">
      {reviews.map((review) => (
        <ReviewCard key={review.id} review={review} />
      ))}
    </div>
  );
}

✅ Pros:

• Carga inicial rápida (LCP)
• Siempre actualizado
• Amigable con el SEO

❌ Contras:

• Implementación más compleja
• Dos fuentes de datos para gestionar

Matriz de Comparación

Consejo final: No olvides el Schema

Independientemente del método que elijas, generar Datos Estructurados (JSON-LD) es el ingrediente secreto para obtener esas calificaciones de estrellas doradas en los resultados de búsqueda de Google.

Si usas el Método 1 (Widget), Reviewlee intenta inyectar esto por ti. Si usas el Método 2 o 3 (API), tienes control total para construir el marcado de esquema perfecto para tu producto o servicio específico.

¿Listo para construir? Lee nuestra Documentación de API o regístrate para una cuenta gratuita para obtener tus claves API.