Cómo añadir insignias de credibilidad de Trustpilot a un sitio de servicios en Webflow

La mayoría de las empresas de servicios venden algo que los compradores no pueden inspeccionar antes de pagar. Sin imágenes de producto, fichas técnicas o políticas de devolución que sirvan de garantía, los clientes potenciales confían en pruebas visibles de que otros compradores tuvieron experiencias positivas.

Eso es exactamente lo que hace una insignia de Trustpilot en una página de precios: sustituye lo que un comprador de comercio electrónico no puede inspeccionar.

Esta guía cubre qué insignia puedes mostrar realmente, lo cual depende más de tu plan de Trustpilot de lo que admiten la mayoría de los artículos, y cómo hacer que funcione en una aplicación de Webflow Cloud.

¿Qué necesitas para añadir insignias de Trustpilot a Webflow?

Necesitas una cuenta de empresa de Trustpilot con un plan que incluya el widget que deseas, tu ID de unidad de negocio y un lugar en Webflow donde colocar dos fragmentos de código. Primero, elige el plan.

Aquí tienes la lista completa antes de profundizar:

• Una cuenta de empresa de Trustpilot, en el plan Plus o superior si quieres una valoración por estrellas o TrustScore en lugar de solo el número de reseñas
• Tu ID de unidad de negocio y el ID de plantilla del widget que elegiste, ambos disponibles en Trustpilot Business bajo Compartir y promocionar, luego Widgets para sitios web
• Un sitio de Webflow con un plan que permita código personalizado si Webflow renderiza tus páginas, o una aplicación de Webflow Cloud cuyo diseño raíz puedas editar
• Para una aplicación de Webflow Cloud, Next.js 15 o superior y Node.js 22 o posterior de forma local

Una vez que el plan y las reseñas están listos, la implementación depende de incluir el cargador en el documento que renderiza tu sitio.

5 pasos para añadir una insignia de Trustpilot a un sitio de servicios en Webflow

La implementación incluye un ID de unidad de negocio, un script de arranque cargado una vez, un div de widget para la insignia, una decisión de ubicación y una solución para cuando la insignia se convierte en un enlace simple tras la navegación.

El script de arranque difiere entre un sitio renderizado por Webflow y una aplicación de Webflow Cloud, y el último paso solo se aplica a Cloud, por lo que vale la pena leer ambos aunque los cuatro primeros pasos salgan bien.

1. Encuentra tu ID de unidad de negocio y elige un widget

En Trustpilot Business, ve a Compartir y promocionar, luego Widgets para sitios web y después Todos los widgets. Explora la biblioteca, previsualiza los diseños y elige uno que incluya tu plan en lugar de uno que te guste visualmente, ya que el selector te mostrará diseños que no puedes usar.

Copia el fragmento generado en lugar de adaptar uno de una entrada de blog. Contiene dos valores específicos para ti: el ID de unidad de negocio que identifica a tu empresa y un ID de plantilla que identifica el diseño. Ninguno es secreto, así que ambos pueden estar en el código fuente de la página, razón por la cual esta integración no necesita una ruta de servidor.

Termina este paso con un fragmento que contenga tus IDs y un widget que tengas derecho a mostrar.

2. Coloca el script de arranque en el head del sitio

El marcado de Trustpilot viene en dos mitades que van en lugares distintos. El script de arranque es el cargador y debe ir una vez por sitio, no una vez por insignia.

El cargador va en el head de un sitio renderizado por Webflow:

<!-- Site settings > Custom code > Head code -->
<script
  type="text/javascript"
  src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js"
  async
></script>

Añádelo en la configuración del sitio (Site settings), luego en Código personalizado (Custom code) y después en Código del head (Head code). Aquí es donde los dos caminos se separan, y es el detalle que suele romper silenciosamente la compilación de Webflow Cloud.

El código del head en la configuración del sitio se inyecta en las páginas que renderiza el propio Webflow. Una aplicación de Webflow Cloud es tu propia aplicación Next.js, desplegada desde un repositorio, que renderiza su propio documento, por lo que nada de lo que pongas en la configuración del sitio llegará a ella.

Cargar el script en tu diseño raíz

En ese caso, el script debe ir en tu diseño raíz:

// app/layout.tsx — Webflow Cloud apps render their own document,
// so the script has to be loaded here rather than in Site settings.
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>
  )
}

Si lo configuras mal, el fallo es sutil: no hay advertencias en la consola ni errores visuales, pero la insignia simplemente no aparece porque la variable global esperada permanece indefinida.

La segunda mitad es el marcado del widget, y va en el body donde quieras que aparezca la insignia, no en el head:

<!-- A Code Embed element in the body, where the badge should sit -->
<div
  id="trustbox"
  class="trustpilot-widget"
  data-locale="en-GB"
  data-template-id="YOUR_TEMPLATE_ID"
  data-businessunit-id="YOUR_BUSINESS_UNIT_ID"
  data-style-height="24px"
  data-style-width="100%"
>
  <!-- The fallback link Trustpilot ships in every snippet. Keep it:
       it is what a visitor sees if the script is blocked, and the
       bootstrap uses it to tell an unrendered widget from a rendered
       one. -->
  <a
    href="https://www.trustpilot.com/review/example.com"
    target="_blank"
    rel="noopener"
  >Trustpilot</a>
</div>

Mantener esas dos mitades en lugares separados es importante. Webflow advierte contra poner marcado a nivel de documento en el código del head, y un div de widget colocado allí no renderiza nada, aunque parezca que se instaló correctamente.

Trustpilot recomienda el head y ofrece la colocación en el body justo antes del widget como alternativa cuando no tienes acceso al head. En un sitio renderizado por Webflow, el código del head requiere un espacio de trabajo Core, Growth, Agency o Freelancer, o un plan de sitio activo en el propio sitio.

El ancla dentro del div del widget no es una decoración opcional. Es lo que ve el visitante si el script está bloqueado por una extensión o un bloqueador de contenido estricto, y el script de arranque lo interpreta como una señal de que este elemento aún no se ha renderizado.

Trustpilot lo incluye en cada fragmento sin decir explícitamente que es obligatorio, así que considera eliminarlo como un cambio con consecuencias, no como una limpieza. Terminas este paso con una insignia apareciendo en una página publicada.

3. Coloca la insignia donde surja la duda

La ubicación de la insignia en un sitio de servicios es una decisión sobre dónde surge la duda, no sobre dónde hay espacio en el diseño.

Los tres lugares que mejor funcionan son la página de precios cerca del momento de la decisión, el formulario de contacto o reserva donde alguien está decidiendo si facilitar sus datos, y el pie de página como señal persistente.

Poner una insignia en el encabezado de todas las páginas es el instinto común y la posición más débil, porque se convierte en parte del mobiliario tras un solo scroll y deja de leerse.

Adapta el widget al momento. Una Micro Star junto a un botón de "Solicitar presupuesto" hace un trabajo enfocado; una lista completa de reseñas en el mismo lugar le pide a alguien que lea testimonios después de que ya ha decidido actuar. Terminas este paso con la insignia en las dos o tres páginas donde el visitante realmente te está evaluando.

4. Vuelve a renderizar la insignia tras la navegación del lado del cliente

Este paso marca la diferencia entre una aplicación de Webflow Cloud y un sitio estándar de Webflow, y genera un síntoma fácil de malinterpretar: el distintivo funciona en la primera carga, pero en cada navegación posterior del lado del cliente, el visitante solo ve el enlace de respaldo de Trustpilot.

El script de arranque busca widgets una sola vez, durante el evento de carga de la ventana. Una aplicación de Next.js que cambia de ruta en el cliente nunca vuelve a activar ese evento, por lo que nunca detecta el nuevo div y solo queda el enlace de respaldo. Parece un error de estilo, pero no lo es.

La respuesta de Trustpilot es pedirle al widget que se cargue a sí mismo:

// app/components/TrustBadge.tsx
'use client'

import { useEffect, useRef } from 'react'

declare global {
  interface Window {
    Trustpilot?: {
      loadFromElement: (el: HTMLElement, reload?: boolean) => void
    }
  }
}

export default function TrustBadge() {
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    // The bootstrap script only scans on first load. After a
    // client-side navigation the badge is an empty div until
    // something asks Trustpilot to render it again.
    if (ref.current && window.Trustpilot) {
      window.Trustpilot.loadFromElement(ref.current, true)
    }
  }, [])

  return (
    <div
      ref={ref}
      className="trustpilot-widget"
      data-locale="en-GB"
      data-template-id="YOUR_TEMPLATE_ID"
      data-businessunit-id="YOUR_BUSINESS_UNIT_ID"
      data-style-height="24px"
      data-style-width="100%"
    >
      <a
        href="https://www.trustpilot.com/review/example.com"
        target="_blank"
        rel="noopener"
      >Trustpilot</a>
    </div>
  )
}

La llamada es el método documentado por Trustpilot para aplicaciones de una sola página, y la referencia le indica un elemento específico en lugar de realizar un escaneo global. El segundo argumento le ordena recargarse; sin él, no hay garantía de que un elemento que ya contiene un widget renderizado se actualice, que es precisamente el caso para el que existe este componente.loadFromElement

Ten cuidado con la protección. Comprobar evita un bloqueo cuando el script asíncrono aún no ha llegado, pero no hace nada para recuperarse después. En la carga inicial de la página, esto está bien, porque el propio escaneo del script detecta el widget cuando se activa.window.Trustpilot

Después de una navegación del lado del cliente, no hay un segundo escaneo, así que si el script llega tarde, el distintivo se queda sin renderizar y sin mostrar ningún error.

Si ves que esto sucede en la práctica, vuelve a intentarlo al cargar el script en lugar de añadir más protecciones.

Tras este paso, puedes navegar fuera de la página y volver a ella, y el distintivo seguirá ahí.

5. Sigue recopilando reseñas después de publicar el distintivo

Un distintivo de calificación es una afirmación con fecha, y un negocio de servicios que deja de pedir reseñas termina mostrando un promedio basado en un periodo que ya no refleja su realidad actual.

Review Collector es el widget para esto, y es la única opción disponible en el plan gratuito, por lo que puede colocarse en una página de agradecimiento o de confirmación de pedido, independientemente del plan que tenga el resto de tu configuración. Colocarlo donde el cliente acaba de tener una buena experiencia es lo que marca la diferencia; pedirlo en un momento aleatorio produce la tasa de respuesta que cabría esperar.

No funcionará en un correo electrónico. Review Collector es renderizado mediante JavaScript por el script de arranque, y los clientes de correo no ejecutan scripts, por lo que una copia incrustada simplemente no aparecerá. Los widgets de correo electrónico de Trustpilot son productos independientes del plan Plus, lo que significa que el correo de seguimiento que la mayoría de los negocios de servicios quieren enviar es una función de pago, no gratuita.

Resiste la tentación de solicitar reseñas solo a los clientes que esperas que estén satisfechos. Más allá del problema evidente, un promedio basado en una muestra filtrada es frágil justo cuando más necesitas que sea sólido. Terminarás este paso con un distintivo cuyo número sigue cambiando.

¿Qué hace que los distintivos de Trustpilot fallen en Webflow?

Casi todos los fallos aquí se manifiestan con el mismo síntoma: un espacio vacío o un enlace simple de Trustpilot donde debería estar el distintivo. Las causas no tienen nada en común, así que distinguirlas es la parte más difícil.

Cuatro causas cubren casi todo, y las dos primeras explican la mayoría de los casos.

El distintivo solo muestra un enlace simple de Trustpilot

Causa: El script de arranque no se ejecutó. O falta en el encabezado, o la página se previsualizó en lugar de publicarse, o un bloqueador de contenido lo detuvo. Lo que ves es el ancla de respaldo dentro del div del widget haciendo su trabajo, por eso parece un diseño deliberado pero roto en lugar de un error.

Solución: Confirma que el cargador esté en el lugar correcto para tu compilación, es decir, en el código del encabezado de la configuración del sitio para un sitio renderizado en Webflow y en el diseño raíz para una aplicación de Webflow Cloud. Ten en cuenta que los modos de vista previa y comentarios sí renderizan los efectos del código personalizado, por lo que si falta un distintivo en la vista previa, es una señal real y no algo que debas esperar hasta publicar.

Luego, carga la página con los bloqueadores desactivados para descartar la tercera causa. Si el enlace se renderiza pero el widget nunca lo reemplaza, revisa el script en lugar del marcado del widget.

El distintivo desaparece al navegar entre páginas

Causa: Navegación del lado del cliente en una aplicación de Webflow Cloud. El script de arranque escaneó el documento en la primera carga y no tiene motivos para volver a hacerlo, por lo que el div del widget permanece vacío en la segunda página.

Solución: Llama a con una referencia al elemento del widget después de que el componente se monte, como en el paso 4. Asegúrate de verificar que el objeto global exista, ya que el script se carga de forma asíncrona y la navegación rápida puede ocurrir antes de que esté listo.loadFromElement

Este fallo es específico de la navegación tipo aplicación y no se reproducirá en un sitio estándar de Webflow, por lo que es fácil pasarlo por alto si solo realizas pruebas en el Diseñador.

El widget que buscas no aparece en el selector

Causa: Tu plan de Trustpilot no lo incluye. La biblioteca muestra widgets de todos los niveles; las valoraciones por estrellas o el TrustScore comienzan en el plan Plus, mientras que el plan gratuito solo ofrece el Recolector de opiniones.

Solución: Revisa tu plan antes de diseñar una página en torno a un distintivo, ya que el selector previsualizará alegremente diseños que tu cuenta no puede publicar. Si tienes el plan gratuito y quieres un distintivo de valoración, lo más lógico es recopilar opiniones primero con el Recolector y luego actualizar tu plan cuando tengas una valoración que valga la pena mostrar.

Construir el diseño alrededor de un widget que no puedes usar es una forma común de descubrir esto tarde, generalmente después de que el diseño ha sido aprobado y el distintivo es un elemento fundamental de la composición.

El distintivo se renderiza pero no muestra opiniones

Causa: Por lo general, se debe al ID de la Unidad de Negocio, que identifica a la empresa equivocada o está mal formado tras haberlo copiado a mano. A veces es un caso real: un perfil nuevo con muy pocas opiniones para mostrar, especialmente en widgets que solo muestran un recuento una vez que superas un umbral establecido.

Solución: Genera de nuevo el fragmento desde Trustpilot en lugar de editar el ID manualmente, ya que eso elimina la posibilidad de errores de transcripción. Luego, abre tu perfil directamente en Trustpilot para confirmar que las opiniones existen y están publicadas, porque un widget que muestra fielmente un perfil vacío parece idéntico a uno que no funciona.

Si el perfil tiene opiniones y el widget sigue sin mostrar ninguna, comprueba si el diseño que elegiste solo muestra un recuento por encima de un umbral que hayas configurado; esto es una configuración, no un fallo.

Qué puedes construir a continuación con Trustpilot y Webflow

Una vez que el distintivo esté activo, el siguiente paso suele ser profundizar en lugar de añadir más distintivos: mostrar opiniones individuales en las páginas relacionadas, un resumen de valoración que alimente datos estructurados o invitaciones automáticas para dejar opiniones cuando se marca un trabajo como completado.

Si prefieres mostrar el contenido de las opiniones en lugar de un distintivo, y estás dispuesto a ejecutar una ruta de servidor para obtenerlo, nuestra guía de visualización de opiniones de Trustpilot cubre la ruta de la API, incluyendo el almacenamiento en caché y la alternativa TrustBox. Para conocer los detalles de la conexión, consulta la integración de Webflow y Trustpilot.