Verificación de credenciales: página de verificación, compartir en redes e incrustación

Tiempo de lectura: 9 minutos

Descripción general

Cada organización de CertLister obtiene una página de verificación pública — una página web con su marca donde cualquiera puede confirmar que una credencial es genuina. Puede compartir esta página directamente o incrustarla en su propio sitio web.

Parte 1: su página de verificación

Qué es

Una página web pública donde empleadores, auditores y titulares de credenciales pueden verificar la autenticidad — sin cuenta de CertLister.

Formato de la URL predeterminada:

https://certlister.com/verify/{id-de-su-organizacion}

El ID de su organización es un identificador único (p. ej., a1b2c3d4-e5f6-7890-abcd-ef1234567890). Lo encuentra en la aplicación bajo Configuración del portal.

URL amigable (planes Basic y Pro):

https://certlister.com/verify/acme-corp

Consulte Establecer un slug de URL personalizado más abajo.

Cómo encontrar la URL de su página de verificación

1. Inicie sesión en CertLister
2. Haga clic en Configuración del portal en la navegación izquierda
3. Su URL se muestra en la parte superior de la página
4. Haga clic en el icono de copiar para copiarla, o en el de abrir para previsualizarla en una pestaña nueva

Qué pueden hacer los visitantes

Buscar una credencial:

• Ingresar un número de credencial (p. ej., "CERT-2025-001")
• O ingresar el nombre de un destinatario (p. ej., "Sarah Johnson") — si su organización lo habilitó

Opción de privacidad: puede ocultar el campo de búsqueda por nombre para que los visitantes solo busquen por número de credencial. Vaya a Configuración → Personalización → Búsqueda por nombre de destinatario y desactívela. Aplica tanto a su página pública como al widget incrustado.

Estados del resultado:

• Activa — la credencial es genuina y está actualmente vigente
• Vencida — la credencial fue válida pero ya venció
• Revocada — la credencial fue revocada y ya no es válida
• No encontrada — no existe una credencial coincidente

Compartir en LinkedIn: cuando un destinatario encuentra su credencial activa, ve un botón de Agregar al perfil de LinkedIn. Un clic rellena el formulario de certificaciones de LinkedIn con su nombre, la fecha de emisión y un enlace directo a la página de verificación.

Cómo compartir su página de verificación

En credenciales impresas o PDF:

Verifique esta credencial en:
https://certlister.com/verify/acme-corp

Número de credencial: CERT-2025-001

En firmas de correo:

Verifique nuestras credenciales:
https://certlister.com/verify/acme-corp

Como enlace en su sitio web:

<a href="https://certlister.com/verify/acme-corp">
  Verificar credenciales
</a>

Como código QR:

1. Genere un código QR para su URL de verificación (herramientas gratuitas: qr-code-generator.com, qrcode.com)
2. Incluya la imagen del código QR en los PDF de credencial
3. Los destinatarios escanean con su teléfono para verificar al instante

Parte 2: compartir en redes — tarjetas de vista previa enriquecidas

Cuando un destinatario comparte el enlace de verificación de su credencial en LinkedIn, Slack, WhatsApp, X (Twitter) o en un cliente de correo, CertLister genera automáticamente una tarjeta de vista previa enriquecida para ese enlace — sin configuración en ningún plan.

En lugar de una URL a secas, los contactos del destinatario ven una tarjeta de imagen con su marca que se ve profesional y comunica la credencial de inmediato.

Qué muestra la tarjeta de vista previa

La imagen de vista previa es de 1200×630 px y se genera dinámicamente para cada credencial. Incluye:

• Nombre del destinatario — grande y prominente
• Título de la credencial — debajo del nombre
• Nombre de la organización emisora
• Insignia de estado — codificada por color:
  • Verde — Credencial válida
  • Ámbar — Vencida
  • Rojo — Revocada
• El color de marca de su organización — usado como fondo de la tarjeta, para que la vista previa coincida con su identidad

Cómo funciona

La tarjeta de vista previa se genera automáticamente cada vez que una plataforma social, una aplicación de mensajería o un cliente de correo consulta su URL de verificación para generar la vista previa del enlace. No hay nada que configurar — cada enlace de verificación produce una vista previa enriquecida de fábrica.

Flujo de ejemplo:

1. Usted emite una credencial a Sarah Johnson por "Primeros auxilios nivel 2"
2. Sarah copia su enlace de verificación: https://certlister.com/verify/acme-corp/CERT-2025-042
3. Sarah pega el enlace en una publicación de LinkedIn o un mensaje de Slack
4. LinkedIn / Slack consulta la URL y muestra una tarjeta con la marca:
   • Sarah Johnson
   • Primeros auxilios nivel 2 — Acme Corp
   • ✓ Credencial válida (en verde, con el color de marca de Acme Corp)

Dónde funciona

Las tarjetas de vista previa enriquecidas son compatibles con las principales plataformas:

Consejos para los destinatarios

Comparta estos consejos con sus destinatarios para que aprovechen al máximo el uso en redes:

• Publicaciones de LinkedIn: pegue el enlace de verificación en una publicación. La tarjeta de vista previa aparece automáticamente. Agregue una breve descripción antes de publicar.
• Perfil de LinkedIn: use el botón Agregar al perfil de LinkedIn de la página de verificación para agregar la credencial directamente a la sección de Certificaciones — esto también incluye la URL de verificación para que sus contactos puedan hacer clic.
• Slack o Teams: pegue el enlace en cualquier mensaje. La vista previa se despliega automáticamente — sin agregar texto alrededor.
• Correo: incluya el enlace en el cuerpo del correo. Algunos clientes (Gmail, Outlook) mostrarán una tarjeta de vista previa; otros un enlace simple.

El color de marca en la tarjeta de vista previa

La tarjeta usa el color de marca de su organización como fondo. Si no hay color de marca, la tarjeta usa un verde predeterminado para credenciales activas, ámbar para vencidas y rojo para revocadas.

Para establecer su color de marca y que la tarjeta coincida con su identidad:

1. Vaya a Configuración → Personalización
2. Establezca el campo Color de marca (requiere Basic o Pro)
3. Haga clic en Guardar color

La próxima vez que alguien comparta un enlace de verificación, la tarjeta usará su color de marca.

Nota: las plataformas sociales almacenan en caché las imágenes de vista previa hasta por 24 horas. Si actualiza su color de marca, los enlaces ya compartidos pueden seguir mostrando el color anterior hasta que expire la caché.

Parte 3: personalizar su página de verificación (Basic y Pro)

En los planes Basic y Pro, puede personalizar cómo se ve su página de verificación para que coincida con la marca de su organización.

Logotipo de la organización

Cargue su logotipo y aparecerá en el encabezado de su página de verificación.

Para cargarlo:

1. Vaya a Configuración → Organización
2. Haga clic en Cargar logotipo
3. Use un PNG transparente en formato ancho (p. ej., 300×80 px) — máx. 2 MB

Color de marca

Establezca un color primario que se aplica al fondo de la sección principal de su página de verificación.

Para establecerlo:

1. Vaya a Configuración → Personalización
2. Use el selector de color o ingrese un código hex (p. ej., #2563eb) en el campo Color de marca
3. Haga clic en Guardar color

Establecer un slug de URL personalizado

Reemplace el UUID de su URL de verificación con un nombre legible.

Antes: https://certlister.com/verify/a1b2c3d4-e5f6-7890-abcd-ef1234567890 Después: https://certlister.com/verify/acme-corp

Para establecerlo:

1. Vaya a Configuración → Personalización
2. Encuentre el campo URL de la página de verificación
3. Ingrese su slug (p. ej., acme-corp)
4. Haga clic en Guardar URL

Reglas del slug:

• 3–30 caracteres
• Solo minúsculas, números y guiones
• Sin guiones al inicio ni al final
• Debe ser único en todo CertLister

La URL con UUID sigue funcionando después de establecer un slug — nada se rompe para los destinatarios que la guardaron.

Parte 4: opciones de diseño de la página de verificación (Pro)

En el plan Pro puede cambiar cómo se ve su página pública de verificación más allá del logotipo y el color de marca. Estas opciones se configuran en Configuración del portal. También puede servir toda la página de verificación desde su propio dominio — consulte Dominio personalizado: su página de verificación en su propio dominio.

Diseño general de la página

Tres diseños controlan la apariencia general de la página de verificación. Seleccione uno en Configuración del portal → Diseño de página — una vista previa en vivo se actualiza de inmediato.

Hacer clic en un diseño lo guarda automáticamente. La vista previa en vivo de Configuración del portal muestra un iframe de página completa de su página real — alterne entre las vistas de Escritorio y Móvil para revisar el resultado en ambas.

Diseño de la tarjeta de resultado

Controla el diseño de la tarjeta de resultado que aparece tras una verificación exitosa.

Seleccione un diseño en Configuración del portal → Diseño de la tarjeta de resultado. Use el icono de vista previa (↗) junto al selector para abrir su página de verificación en vivo con una credencial real precargada y ver el resultado de inmediato.

Sección de información del emisor

Controla si las señales de confianza de su organización (miembro desde, credenciales emitidas, verificaciones este año, industria, sitio web) aparecen en la página de verificación. Disponible en todos los planes.

Para alternarla:

1. Vaya a Configuración → Personalización
2. Encuentre la sección Información del emisor
3. Actívela o desactívela y guarde

Cuando está activada, los visitantes ven una sección debajo de la tarjeta de búsqueda que confirma la presencia y actividad de su organización. Cuando está desactivada, solo se muestran la búsqueda y la tarjeta de resultado.

Parte 5: incrustar en su sitio web

Incruste el widget de verificación directamente en su propio sitio para que los visitantes nunca tengan que salir de él para verificar una credencial.

Obtener el código de incrustación

1. Vaya a Configuración del portal en la navegación izquierda
2. Baje hasta Incrustar en su sitio web
3. Elija su tema y color de acento
4. Haga clic en Copiar código
5. Pegue el fragmento en su sitio

Opciones de estilo

Antes de copiar el código, personalice cómo se ve el widget con los controles de la sección de incrustación.

Tema

Al seleccionar Transparente, el widget no tiene fondo propio — hereda el color que esté detrás del iframe en su página.

Color de acento

Haga clic en la muestra de color o escriba un código hex para establecer el color de los botones y elementos interactivos. Es útil cuando quiere que el botón de verificación coincida con el color primario de su sitio.

Un botón de Restablecer aparece cuando cambia el valor predeterminado, para restaurarlo.

El código de incrustación se actualiza automáticamente según sus selecciones. La URL src codifica sus elecciones:

certlister.com/verify/{orgId}/?embed=1                          → tema claro, color predeterminado
certlister.com/verify/{orgId}/?embed=1&theme=dark               → tema oscuro
certlister.com/verify/{orgId}/?embed=1&theme=transparent        → transparente
certlister.com/verify/{orgId}/?embed=1&color=e63946             → color de acento personalizado
certlister.com/verify/{orgId}/?embed=1&theme=dark&color=e63946  → oscuro + acento personalizado

El fragmento de incrustación

<iframe
  src="https://certlister.com/verify/SU-ORG-ID/?embed=1"
  width="100%"
  height="600"
  frameborder="0"
  allowtransparency="true"
  title="Verificación de credenciales"
></iframe>

Consejos:

• Use width="100%" para hacerlo adaptable
• Ajuste height a su diseño — 600 px es un buen punto de partida
• No requiere JavaScript

Instrucciones por plataforma

WordPress

1. Edite la página donde quiere el widget
2. Agregue un bloque de HTML personalizado
3. Pegue el fragmento del iFrame
4. Publique

Wix

1. En el editor de Wix, agregue un elemento HTML iFrame
2. Haga clic en Ingresar código
3. Pegue el fragmento del iFrame
4. Ajuste el tamaño del elemento en el lienzo
5. Publique

Squarespace

1. Edite la página
2. Agregue un bloque de código
3. Pegue el fragmento del iFrame
4. Guarde y publique

Webflow

1. Agregue un elemento Embed a su página
2. Pegue el fragmento del iFrame
3. Publique el sitio

Parte 6: avanzado — variables CSS (para desarrolladores)

Si gestiona los colores de su sitio con una hoja de estilos o un sistema de diseño, puede controlar los colores del widget directamente desde sus propias variables CSS. Esto mantiene sus colores de marca en un solo lugar en vez de codificarlos en una URL.

Nota: este método requiere agregar un pequeño fragmento de JavaScript a su página. Si su plataforma no permite JavaScript personalizado (Wix, Squarespace), use la incrustación iFrame estándar de la Parte 3.

Cómo funciona

1. Usted define variables CSS en su hoja de estilos con los nombres que el widget espera
2. Un pequeño script puente lee esos valores y los envía al widget
3. El widget los aplica al cargar

Su CSS existente permanece exactamente donde está — solo le está diciendo al widget que lea de él.

Obtener el código avanzado

1. Vaya a Configuración del portal → Incrustar en su sitio web
2. Haga clic en Avanzado: variables CSS al final de la sección de incrustación
3. Haga clic en Copiar todo
4. Pegue el bloque completo en su HTML

El bloque contiene tres partes: una etiqueta <style>, la etiqueta <iframe> y un <script> puente. Las tres son necesarias.

Las variables CSS

Edite los valores del bloque <style> para que coincidan con su marca:

<style>
  :root {
    --cl-primary : #2563eb;  /* Botones y color de acento   */
    --cl-bg      : #ffffff;  /* Fondo del widget            */
    --cl-card    : #f9fafb;  /* Fondo de tarjetas y formularios */
    --cl-text    : #121828;  /* Color de texto principal    */
    --cl-radius  : 8px;      /* Radio de las esquinas       */
  }
</style>

Si ya tiene estos colores definidos en su CSS con otros nombres, puede referenciarlos:

:root {
  --cl-primary : var(--brand-blue);
  --cl-bg      : var(--surface-default);
  --cl-text    : var(--text-primary);
  --cl-radius  : var(--radius-md);
}

Ejemplo completo

<!-- 1. Establezca sus colores de marca — edite los valores de abajo -->
<style>
  :root {
    --cl-primary : #e63946;
    --cl-bg      : #f8f9fa;
    --cl-card    : #ffffff;
    --cl-text    : #212529;
    --cl-radius  : 12px;
  }
</style>

<!-- 2. El widget -->
<iframe
  id="cl-verify"
  src="https://certlister.com/verify/SU-ORG-ID/?embed=1"
  width="100%"
  height="600"
  frameborder="0"
  allowtransparency="true"
  title="Verificación de credenciales"
></iframe>

<!-- 3. Puente — lee sus variables CSS y las envía al widget -->
<script>
(function () {
  var f = document.getElementById('cl-verify');
  var s = getComputedStyle(document.documentElement);
  function send() {
    f.contentWindow.postMessage({
      type    : 'cl-theme',
      primary : s.getPropertyValue('--cl-primary').trim(),
      bg      : s.getPropertyValue('--cl-bg').trim(),
      card    : s.getPropertyValue('--cl-card').trim(),
      text    : s.getPropertyValue('--cl-text').trim(),
      radius  : s.getPropertyValue('--cl-radius').trim()
    }, 'https://app.certlister.com');
  }
  f.addEventListener('load', send);
  if (f.contentDocument && f.contentDocument.readyState === 'complete') send();
})();
</script>

Importante: el id="cl-verify" del iframe y el getElementById('cl-verify') del script deben coincidir. Si tiene varios widgets en la misma página, dele a cada uno un ID único y agregue un script puente separado para cada uno.

Parte 7: comparación

Solución de problemas

El iFrame muestra una página en blanco

• Verifique que la URL src termine en /?embed=1
• Asegúrese de que el ID de la organización sea correcto — cópielo directamente de Configuración del portal en la aplicación
• Revise que la política de seguridad de contenido (CSP) de su sitio permita iFrames desde certlister.com
• Intente abrir la URL src directamente en su navegador para confirmar que carga

El estilo del iFrame no se aplica

• Revise los parámetros de la URL en el src — los colores se pasan sin el símbolo # (p. ej., ?color=e63946, no ?color=#e63946)
• Si usa el método de variables CSS, confirme que el <script> puente está en la misma página que el <iframe> y que los valores de id coinciden
• El CSS de la hoja de estilos de su página no afecta el interior de un iFrame — debe usar los parámetros de URL o el puente de variables CSS

El método de variables CSS no funciona

• Asegúrese de que las tres partes estén presentes: el bloque <style>, el <iframe> y el <script>
• El puente de variables CSS requiere JavaScript habilitado — no funcionará en plataformas que bloquean scripts personalizados (Wix, Squarespace). Use la incrustación iFrame estándar en su lugar
• Abra la consola del navegador (F12 → Console) y revise los errores
• Confirme que los nombres de sus variables CSS coincidan exactamente con los que lee el puente (p. ej., --cl-primary, no --cl-primary-color)

El iFrame no se redimensiona en el móvil

• Establezca width="100%" en el elemento iframe
• No use un ancho fijo en píxeles
• Ajuste el valor de height si el contenido se corta — puede necesitar 700 px en el móvil cuando se muestran resultados

El widget muestra colores incorrectos tras una actualización

• El widget lee las variables CSS una vez al cargar. Si actualiza una variable dinámicamente después de cargar la página, el widget no la vuelve a leer automáticamente
• Para forzar una actualización, recargue la página

Preguntas frecuentes

P: ¿Debo hacer algo para habilitar la tarjeta de vista previa social?

R: No. Cada enlace de verificación genera automáticamente una tarjeta de vista previa enriquecida al compartirse en plataformas sociales. No hay nada que configurar — funciona en todos los planes de fábrica. Si quiere que la tarjeta use su color de marca, establézcalo en Configuración → Personalización (Basic o Pro).

P: ¿Puedo usar un dominio personalizado (p. ej., verify.acme.com)?

R: Sí — en el plan Pro puede servir su página de verificación desde su propio dominio. Consulte Dominio personalizado: su página de verificación en su propio dominio.

P: ¿Qué pasa si cambio mi slug — los URL antiguos se rompen?

R: No. La URL con UUID siempre funciona. Al establecer o cambiar un slug, el slug anterior deja de funcionar pero la URL con UUID sigue activa. Avise a los destinatarios si cambia un slug publicado.

P: ¿Puedo establecer un tema y variables CSS al mismo tiempo?

R: Sí — funcionan juntos. El parámetro de tema de la URL (?theme=dark) establece el modo base (claro u oscuro), y las variables CSS anulan colores individuales encima. Si establece --cl-bg con variables CSS mientras usa ?theme=transparent, el color CSS explícito tiene prioridad.

P: ¿Puedo incrustar varios widgets de verificación en una página?

R: Sí. Dele a cada iframe un id distinto y agregue un script puente separado para cada uno apuntando a ese id.

P: ¿El widget se actualiza automáticamente cuando cambian las credenciales?

R: Sí. El widget muestra datos en tiempo real — una credencial revocada aparece como revocada de inmediato en la siguiente búsqueda, y las credenciales recién emitidas están disponibles al momento.

P: ¿Puedo ver quién verifica las credenciales?

R: El registro de verificaciones está disponible en el plan Pro. Vaya a Reportes → Verificación para ver la actividad detallada.

P: ¿Qué información es públicamente visible en la página de verificación?

R: Solo: nombre del destinatario, título de la credencial, fecha de emisión, fecha de vencimiento (si existe), estado y los campos personalizados que haya configurado. Las direcciones de correo, las notas internas y los datos de contacto de la organización nunca se exponen.

P: ¿Hay un límite de verificaciones?

R: No — todos los planes admiten solicitudes de verificación ilimitadas.