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. Vea la página del sistema de verificación de certificados para saber qué hace la página de verificación de forma predeterminada.

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 Página de verificación; cuando define una URL amigable (más abajo), la aplicación muestra esa en su lugar.

URL amigable:

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 Página de verificación 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 Página de verificación → Opciones y desactive Búsqueda por nombre del destinatario. Se aplica a su página pública y 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 a 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 — vistas previas

Cuando alguien comparte un enlace de verificación en LinkedIn, Slack, WhatsApp, X (Twitter) o por correo, la plataforma muestra una vista previa del enlace.

Qué muestra la vista previa: el nombre y el logotipo de su organización, el título «Verificar una credencial — su organización» y la frase «Confirme que una credencial emitida por su organización es auténtica.» Un enlace a una sola credencial muestra la misma vista previa. Nunca muestra el nombre del destinatario, el título de la credencial ni su estado — esos datos solo aparecen en la propia página. Sin logotipo, la vista previa muestra solo el nombre de su organización.

Una organización que todavía se llama «Nombre's Organization», el nombre con el que empieza una cuenta nueva, recibe una vista previa general de CertLister hasta que la renombre en Configuración → Organización. Las plataformas también guardan su propia copia de la vista previa, así que un enlace compartido antes de cambiar el nombre o el logotipo puede mostrar la versión anterior durante un tiempo.

Qué deberían hacer los destinatarios: agregar una frase propia al compartir, por ejemplo «Mi credencial de Primeros auxilios nivel 2 de Acme». Quien haga clic llega a la página de verificación en vivo, con los datos completos y actuales.

En LinkedIn, el botón Agregar a LinkedIn de la página de verificación agrega la credencial a la sección Licencias y certificaciones del perfil, con el enlace de verificación — suele ser mejor que una publicación.

Parte 3: personalizar su página de verificación

En todos los planes puede adaptar la página de verificación a su marca. La tarjeta Configuración de la página, en Página de verificación → Apariencia, reúne los ajustes: logotipo, color de marca, URL personalizada, información del emisor y diseños.

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áximo 2 MB

Color de marca

Un color principal aplicado al fondo del encabezado de su página de verificación. No se aplica en el diseño Spotlight.

Para definirlo: en Configuración → Personalización, en Color de marca, elija un color o escriba un código hexadecimal (p. ej., #2563eb). Página de verificación → Apariencia muestra el color actual, con un botón Editar en Ajustes que lo lleva allí.

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

Puede cambiar cómo se ve su página pública de verificación más allá del logotipo y el color de marca. Los dos selectores de diseño de abajo están en todos los planes desde el 20 de septiembre de 2026. Estas opciones se configuran en Página de verificación. 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 de página

Tres diseños controlan el aspecto general de la página de verificación. Elija uno en Página de verificación → Apariencia → Diseño de página y haga clic en Aplicar diseño.

El diseño Estándar se muestra al principio de este artículo. Si hay activo un diseño del diseñador de la página de verificación, reemplaza estos diseños.

Diseño de la tarjeta de resultado

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

Elíjalo en Página de verificación → Apariencia → Diseño de la tarjeta de resultado. El icono de abrir (↗) junto a él abre su página de verificación en vivo.

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: en Página de verificación → Apariencia, active o desactive Mostrar información del emisor. Incluir estadísticas controla los números de credenciales y verificaciones.

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 Página de verificación en la navegación izquierda
2. Abra la pestaña Incorporar
3. Elija su tema y su color de acento — en pantallas de 1200 px de ancho o más, la Vista previa en vivo de la derecha se actualiza
4. Haga clic en el icono de copiar del bloque Código de incrustación
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
  id="cl-verify"
  src="https://certlister.com/verify/acme-corp/?embed=1"
  width="100%"
  height="350"
  frameborder="0"
  allowtransparency="true"
  title="Credential Verification"
  style="display:block"
></iframe>
<script>
(function(){
  var f = document.getElementById('cl-verify');
  window.addEventListener('message', function(e) {
    if (f && e.data && e.data.type === 'cl-resize' && e.source === f.contentWindow)
      f.style.height = e.data.height + 'px';
  });
})();
</script>

Consejos:

• width="100%" hace que el widget se adapte
• El pequeño script permite que el widget crezca para mostrar un resultado. Sin él, el iframe mantiene su altura fija (height) — súbala a unos 600 si su sitio no admite scripts

Así se ve en un sitio web:

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 Página de verificación → Incorporar
2. Abra Avanzado: personalización de CSS al final de la pestaña
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://certlister.com');
  }
  f.addEventListener('load', send);
  if (f.contentDocument && f.contentDocument.readyState === 'complete') send();
  window.addEventListener('message', function (e) {
    if (f && e.data && e.data.type === 'cl-resize' && e.source === f.contentWindow) {
      f.style.height = e.data.height + 'px';
    }
  });
})();
</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 Página de verificación 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, no hay nada que configurar. Un enlace de verificación compartido muestra el nombre y el logotipo de su organización; consulte la parte 2.

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 todos los planes. Vaya a Informes → Verificaciones 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 hay un tope mensual en ningún plan. Cada visitante puede buscar 30 credenciales cada 15 minutos, lo que frena la extracción automatizada de datos sin estorbar las verificaciones reales.