Cómo mostrar reseñas de Trustpilot en las páginas de productos de Webflow

Las páginas de producto convierten gracias a la confianza. Un comprador que compara dos artículos similares suele elegir el que tiene valoraciones visibles y verificables, y Trustpilot es una plataforma de reseñas que la mayoría de los compradores reconoce al instante. Lo difícil es llevar esos datos de reseñas a una página de producto de Webflow sin tener que copiar y pegar citas que quedan obsoletas en cuanto llega una nueva reseña.

Trustpilot ofrece dos formas de mostrar reseñas. Sus widgets TrustBox alojados se renderizan dentro de un iframe, y sus API REST devuelven datos de reseñas en bruto que puedes diseñar a tu gusto. Cada opción tiene su lugar, y la elección correcta depende de cuánto control de diseño quieras y de si puedes ejecutar código del lado del servidor.

Esta guía construye la ruta de la API en Webflow Cloud. Un controlador de rutas de Next.js almacena tu clave API de Trustpilot, obtiene las reseñas de productos por SKU y las almacena en caché, para que tu página de producto muestre un marcado de reseñas nativo y acorde a tu marca. También cubre el widget TrustBox como alternativa si no quieres usar backend.

¿Qué necesitas para mostrar reseñas de Trustpilot en las páginas de producto de Webflow?

Necesitas una aplicación de Webflow Cloud, una cuenta de Trustpilot for Business con el complemento de reseñas de productos y el módulo API, tu ID de unidad de negocio, una clave API y los SKU que identifican cada producto.

Trustpilot restringe el acceso a los datos de reseñas según el nivel de cuenta, así que asegúrate de tener todo listo antes de escribir una sola línea de código.

Prepara estos elementos primero:

• Proyecto de Webflow Cloud: Una aplicación de Next.js, desplegada o ejecutándose en desarrollo local, ya que la clave API debe residir en el código del lado del servidor.
• Cuenta de Trustpilot for Business: Las reseñas de productos requieren el complemento de reseñas de productos en un plan Starter, Plus, Premium o Enterprise.
• Acceso al módulo API: El complemento de pago que abre las API REST, vendido en niveles según el límite de llamadas anuales.
• ID de unidad de negocio: El identificador de tu perfil de Trustpilot, devuelto por la API de unidades de negocio o que aparece en tu panel de control empresarial.
• Clave API (ID de cliente): La credencial de la API pública que incluyes como apikey encabezado en cada solicitud.
• SKU de productos: Los identificadores de inventario que vinculan cada producto de Webflow con sus reseñas de Trustpilot.

Una vez confirmados el nivel de cuenta, las credenciales y los SKU, la construcción comienza localizando tu ID de unidad de negocio y generando una clave.

5 pasos para mostrar reseñas de Trustpilot en las páginas de producto de Webflow

La construcción integra una clave API de Trustpilot en un controlador de rutas de Webflow Cloud, obtiene las reseñas de productos por SKU, las almacena en caché dentro del periodo de actualización de Trustpilot y muestra los resultados en la página.

El paso final añade el widget TrustBox alojado para aquellos equipos que prefieren no gestionar ningún backend.

1. Obtén tu ID de unidad de negocio y tu clave de API de Trustpilot

Cada llamada a la API de Trustpilot está vinculada a una unidad de negocio, que es el identificador interno de tu perfil de empresa. Para leer los datos de las reseñas, necesitas una cuenta de Trustpilot for Business con el módulo de API de pago, el cual Trustpilot gestiona a través de su equipo de ventas y no mediante un registro de desarrollador autoservicio. Ese acceso incluye una clave de API (ID de cliente) que se envía como un apikey encabezado. Como los endpoints de esta guía son públicos, la clave por sí sola es suficiente, por lo que no necesitas configurar OAuth. Para encontrar tu ID de unidad de negocio, llama al endpoint de API de unidades de negocio Buscar unidades de negocio (/v1/business-units/search?query=), que realiza búsquedas por nombre de empresa, o consulta el ID en tu panel de control. Guarda tanto la clave como el ID, ya que todas las solicitudes siguientes dependen de ellos.

Verifica la clave con una sola llamada al endpoint de información de perfil:

curl -X GET "https://api.trustpilot.com/v1/business-units/{businessUnitId}/profileinfo" \
  -H "apikey: YOUR-API-KEY-HERE"

Una respuesta 200 que devuelva el perfil de tu empresa, incluido el campo companyName que se muestra en la respuesta documentada de ese endpoint, confirma que la clave y el ID de la unidad de negocio son válidos y están listos para usarse.

2. Almacena la clave de API como un secreto de entorno en Webflow Cloud

La clave de API nunca debe llegar al navegador, por lo que debe guardarse en las variables de entorno de Webflow Cloud en lugar de en tu repositorio. En el panel de control de Webflow Cloud, abre tu aplicación, selecciona el entorno y ve a Variables de entorno. Añade la clave y tu ID de unidad de negocio, luego marca la clave como "Secreto" para que se cifre en reposo y se oculte en el panel. Cada entorno admite hasta 110 variables, y tanto los valores secretos como los públicos están disponibles durante la compilación y en tiempo de ejecución, que es exactamente lo que necesita un gestor de rutas.

Añade estas dos variables al entorno:

TRUSTPILOT_API_KEY=your_trustpilot_api_key
TRUSTPILOT_BUSINESS_UNIT_ID=your_business_unit_id

Haz referencia a ellas en el código con process.env, nunca importando un archivo de configuración, para que el secreto permanezca en el servidor. Envía un nuevo commit después, ya que las variables solo surten efecto en el siguiente despliegue; la documentación de entornos de Webflow Cloud explica cómo marcar valores como secretos.

3. Crea una capa de datos que obtenga las reseñas de productos de Trustpilot

Un pequeño módulo exclusivo para el servidor mantiene todas las llamadas a Trustpilot en un solo lugar y fuera de tus paquetes de cliente. Lee la clave de API desde process.env, apunta a los endpoints de la API de reseñas de productos y establece una ventana de revalidación para que el mismo SKU no se vuelva a consultar en cada vista de página. La guía del módulo de API de Trustpilot establece una directriz de actualización de contenido de al menos una vez cada 24 horas para los datos mostrados, por lo que cualquier ventana de caché desde unos minutos hasta un día cumple con la norma. Este ejemplo utiliza una hora.

Tres endpoints cubren los datos que necesita una página de producto:

El resumen alimenta la calificación de estrellas y el recuento de reseñas, mientras que el endpoint de reseñas completa la lista debajo.

Crea lib/trustpilot.ts con un asistente tipado para cada llamada:

// lib/trustpilot.ts
const BASE = "https://api.trustpilot.com/v1/product-reviews/business-units";

export type ProductReview = {
  id: string;
  stars: number;
  content: string;
  createdAt: string;
  consumer: { displayName: string };
};

export type ReviewSummary = {
  starsAverage: number;
  numberOfReviews: { total: number };
};

const apiKey = () => process.env.TRUSTPILOT_API_KEY as string;
const unitId = () => process.env.TRUSTPILOT_BUSINESS_UNIT_ID as string;

export async function getProductSummary(sku: string): Promise<ReviewSummary> {
  const url = `${BASE}/${unitId()}?sku=${encodeURIComponent(sku)}`;
  const res = await fetch(url, {
    headers: { apikey: apiKey() },
    next: { revalidate: 3600 }, // refresh at most once an hour
  });
  if (!res.ok) throw new Error(`Trustpilot summary ${res.status}`);
  return res.json();
}

export async function getProductReviews(sku: string): Promise<ProductReview[]> {
  const url = `${BASE}/${unitId()}/reviews?sku=${encodeURIComponent(sku)}&perPage=10`;
  const res = await fetch(url, {
    headers: { apikey: apiKey() },
    next: { revalidate: 3600 },
  });
  if (!res.ok) throw new Error(`Trustpilot reviews ${res.status}`);
  const data = (await res.json()) as { productReviews: ProductReview[] };
  return data.productReviews ?? [];
}

Debido a que el módulo se ejecuta solo en el servidor, la clave permanece oculta para los visitantes, y la opción revalidate permite que Webflow Cloud sirva datos en caché entre actualizaciones en lugar de consultar a Trustpilot en cada solicitud.

4. Renderiza el resumen de valoraciones y las reseñas en la página de producto

Con la capa de datos lista, un Server Component puede llamarla directamente y devolver el marcado que tú controles por completo, sin necesidad de iframes. El componente espera el resumen y la lista de reseñas, y luego asigna cada reseña a tu propio diseño para que herede tu sistema visual. Como la obtención de datos se ejecuta en el servidor, tanto la solicitud como la clave de API permanecen en el lado del servidor, y el navegador solo recibe el HTML final que los motores de búsqueda pueden rastrear.

Obtén ambas llamadas en el componente de la página de producto:

// app/products/[sku]/page.tsx
import { getProductReviews, getProductSummary } from "@/lib/trustpilot";

export default async function ProductPage({
  params,
}: {
  params: Promise<{ sku: string }>;
}) {
  const { sku } = await params;
  const [summary, reviews] = await Promise.all([
    getProductSummary(sku),
    getProductReviews(sku),
  ]);

  return (
    <section>
      <p>
        {summary.starsAverage.toFixed(1)} out of 5 based on{" "}
        {summary.numberOfReviews.total} reviews
      </p>
      <ul>
        {reviews.map((review) => (
          <li key={review.id}>
            <strong>{review.stars} out of 5</strong>
            <p>{review.content}</p>
            <span>{review.consumer.displayName}</span>
          </li>
        ))}
      </ul>
    </section>
  );
}

Si una parte de la página necesita responder a la interacción del usuario, como un botón de "Cargar más", expón un Route Handler ligero y llámalo desde un Client Component.

Este Route Handler utiliza el mismo asistente para las solicitudes del lado del cliente:

// app/api/reviews/route.ts
import { NextResponse, type NextRequest } from "next/server";
import { getProductReviews } from "@/lib/trustpilot";

export async function GET(request: NextRequest) {
  const sku = new URL(request.url).searchParams.get("sku");
  if (!sku) {
    return NextResponse.json({ error: "Missing sku parameter" }, { status: 400 });
  }

  const reviews = await getProductReviews(sku);
  return NextResponse.json({ reviews });
}

De cualquier forma, la clave de API reside solo en el código del servidor, y el SKU en la cadena de consulta determina qué reseñas de producto se devuelven.

5. Añade un widget TrustBox de producto como alternativa sin backend

Cuando la velocidad de implementación es más importante que el control del diseño, el widget TrustBox de reseñas de producto de Trustpilot renderiza las reseñas dentro de un iframe sin necesidad de código de servidor. Añades un script de arranque una vez y luego colocas un elemento de widget vinculado al SKU del producto. El inconveniente en una aplicación Next.js es el enrutamiento del lado del cliente: el script de arranque se ejecuta en la primera carga de página y no detecta los cambios de ruta, por lo que un widget en una página navegada por el cliente podría no inicializarse nunca. La solución es llamar a dentro de un efecto cada vez que cambie el SKU, tal como recomienda la window.Trustpilot.loadFromElementguía de aplicaciones de una sola página.

Carga el script de arranque desde tu diseño raíz con next/script:

// app/layout.tsx
import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Luego, renderiza un componente de cliente que reinicialice el widget al navegar:

// components/trustbox.tsx
"use client";
import { useEffect, useRef } from "react";

declare global {
  interface Window {
    Trustpilot?: {
      loadFromElement: (el: HTMLElement | null, force?: boolean) => void;
    };
  }
}

export default function TrustBox({ sku }: { sku: string }) {
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Re-initialize the widget after each client-side route change.
    if (window.Trustpilot) {
      window.Trustpilot.loadFromElement(ref.current, true);
    }
  }, [sku]);

  return (
    <div
      ref={ref}
      className="trustpilot-widget"
      data-locale="en-US"
      data-template-id="YOUR-TEMPLATE-ID"
      data-businessunit-id="YOUR-BUSINESS-UNIT-ID"
      data-sku={sku}
      data-style-height="400px"
      data-style-width="100%"
      data-theme="light"
    >
      <a
        href="https://www.trustpilot.com/review/example.com"
        target="_blank"
        rel="noopener noreferrer"
      >
        Trustpilot
      </a>
    </div>
  );
}

Ahora, cada página de producto muestra sus propias reseñas específicas por SKU, y al cambiar de producto, el widget se recarga en lugar de dejar un enlace vacío de Trustpilot.

¿Qué causa que las visualizaciones de reseñas de Trustpilot fallen? Consejos para solucionar problemas

La mayoría de los fallos de visualización de Trustpilot se deben a una de estas cuatro causas: una clave de API enviada incorrectamente, un SKU que no coincide con los registros de Trustpilot, un script de widget que nunca se ejecutó o datos en caché que han quedado obsoletos.

Revisa los síntomas a continuación en el orden en que viaja la solicitud, desde las credenciales hasta la caché.

Trustpilot devuelve un error 401 o 403 a tu Route Handler

Causa: La clave de API falta, está mal formada o se envía de forma incorrecta. Los endpoints públicos de Trustpilot esperan la clave en un encabezado de solicitud, no como un token Bearer ni como un parámetro de consulta, y los endpoints privados rechazan la clave directamente porque requieren un token de acceso OAuth. Solución: Confirma que el valor almacenado en Webflow Cloud coincida exactamente con el ID de cliente de tu aplicación de Trustpilot, sin espacios en blanco adicionales por copiar y pegar. Comprueba que tu asistente establezca el nombre del encabezado como , y que estés llamando a un endpoint público como en lugar de uno . La apikeyapikey/reviews/private/guía de autenticación enumera qué endpoints aceptan una clave frente a un token. Vuelve a desplegar después de editar la variable, ya que los cambios solo se aplican en la siguiente compilación.

Un SKU válido devuelve una matriz de reseñas vacía

Causa: El SKU que consultaste no coincide con el SKU asociado a las reseñas dentro de Trustpilot, o simplemente el producto aún no tiene reseñas. Trustpilot vincula cada reseña de producto a la cadena de SKU exacta enviada con la invitación a la reseña, por lo que una diferencia en mayúsculas, un prefijo o un carácter adicional no devuelve nada, incluso cuando la página de producto parece correcta. También puede significar que el complemento de Reseñas de Producto no está activo en la cuenta. Solución: Llama al endpoint de resumen para el mismo SKU y lee . Si es cero, verifica que el SKU en tus datos de producto de Webflow coincida con lo que almacenó Trustpilot y confirma que el complemento esté habilitado en tu plan. Recopila al menos una reseña de producto antes de esperar resultados.numberOfReviews.total

El widget TrustBox solo muestra un enlace de Trustpilot

Causa: El script de arranque no se ha ejecutado, o se ejecutó antes de que el elemento del widget existiera en el DOM. En una aplicación Next.js, el script se carga una vez, pero la navegación del lado del cliente cambia la página sin una recarga completa, por lo que el script de arranque nunca detecta el nuevo widget y deja el enlace de respaldo en su lugar. Solución: Confirma que el script de arranque esté presente en el encabezado del documento y que realmente se cargue en el sitio publicado, no solo en el entorno de desarrollo local. Para las páginas navegadas por el cliente, llama a dentro de un vinculado al SKU para que el widget se reinicialice después de cada cambio de ruta. El widget también se renderiza solo después de que la página termina de cargarse, así que previsualiza o publica en lugar de comprobarlo dentro del Diseñador.window.Trustpilot.loadFromElementuseEffect

Las reseñas se quedan obsoletas o empiezas a alcanzar los límites de velocidad

Causa: Cada vista de página llama a Trustpilot directamente sin caché, lo que muestra datos desactualizados lentamente y consume tu asignación anual de API en páginas con mucho tráfico. El módulo de API vende las llamadas por niveles según la asignación anual, y las llamadas fallidas causadas por errores en tu propia implementación también cuentan para el total. Solución: Almacena las respuestas en caché dentro de tu capa de datos usando la opción revalidate, de modo que cada SKU se obtenga como máximo una vez por ventana en lugar de una vez por visitante. Mantén esa ventana en 24 horas o menos para cumplir con la directriz de actualización de contenido de Trustpilot. Si almacenas los datos de las reseñas en lugar de hacer un proxy en tiempo real, llama también a la API de eliminaciones cada 28 días para que las reseñas eliminadas en Trustpilot desaparezcan también de tu sitio.

Qué puedes construir con Trustpilot y Webflow

Con las reseñas fluyendo a través de un Route Handler, tus páginas de producto en Webflow pueden mostrar una prueba social verificada que se mantiene actualizada por sí sola, con un diseño que combina con el resto de tu sitio.

Existen varias direcciones que se derivan naturalmente de la configuración de esta guía.

Considera estas próximas implementaciones:

• Insignias de calificación por SKU: Muestra el promedio de estrellas y el número de reseñas de cada producto en una cuadrícula de productos usando solo el endpoint de resumen.
• Listas de reseñas filtrables: Añade filtros de estrellas e idioma sobre el endpoint de reseñas para los compradores que quieran ver el panorama completo.
• Reseñas sincronizadas con el CMS: Escribe las reseñas obtenidas en una colección del CMS de Webflow para que una lista de colección las muestre con las herramientas de diseño nativas.
• Invitaciones post-compra: Activa una invitación de reseña de Trustpilot desde un evento de pedido de Webflow para seguir recibiendo reseñas frescas.

La página de integración de Trustpilot detalla más a fondo el widget, Zapier y las rutas de la API, incluyendo la sincronización con el CMS y las invitaciones automatizadas.

Para una personalización más profunda más allá de lo que devuelven estos endpoints, la documentación para desarrolladores de Webflow cubre los Route Handlers, los secretos de entorno y las opciones de almacenamiento para tu aplicación de Webflow Cloud.