Vérification d'attestations : page de vérification, partage social et intégration

Temps de lecture : 9 minutes

Aperçu

Chaque organisation CertLister dispose d'une page de vérification publique — une page web personnalisée où n'importe qui peut confirmer qu'une attestation numérique est authentique. Vous pouvez partager cette page directement ou l'intégrer à votre propre site web. Voir la page du système de vérification de certificats pour ce que la page de vérification fait par défaut.

Partie 1 : Votre page de vérification

De quoi s'agit-il

Une page web publique où les employeurs, les vérificateurs et les titulaires d'attestations peuvent vérifier l'authenticité — aucun compte CertLister requis.

Format d'URL par défaut :

https://certlister.com/verify/{your-organization-id}

L'identifiant de votre organisation est unique (p. ex. a1b2c3d4-e5f6-7890-abcd-ef1234567890). Vous le trouverez dans l'application sous Page de vérification; une fois une URL conviviale définie (ci-dessous), l'application affiche celle-ci à la place.

URL conviviale :

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

Voir Définir une URL personnalisée ci-dessous.

Comment trouver l'URL de votre page de vérification

1. Connectez-vous à CertLister
2. Cliquez sur Page de vérification dans la navigation de gauche
3. Votre URL s'affiche en haut de la page
4. Cliquez sur l'icône copier pour la copier, ou sur l'icône ouvrir pour la prévisualiser dans un nouvel onglet

Ce que les visiteurs peuvent faire

Rechercher une attestation :

• Saisir un numéro d'attestation (p. ex. « CERT-2025-001 »)
• Ou saisir un nom de titulaire (p. ex. « Sarah Johnson ») — si activé par votre organisation

Option de confidentialité : vous pouvez masquer le champ de recherche par nom afin que les visiteurs ne puissent chercher que par numéro d'attestation. Allez dans Page de vérification → Options et désactivez Recherche par nom du destinataire. Cela s'applique à votre page publique et au widget intégré.

États du résultat :

• Active — L'attestation est authentique et actuellement valide
• Échue — L'attestation était valide mais a depuis expiré
• Révoquée — L'attestation a été révoquée et n'est plus valide
• Introuvable — Aucune attestation correspondante n'existe

Partage vers LinkedIn : Lorsqu'un titulaire trouve son attestation active, il voit un bouton Ajouter à LinkedIn. Un seul clic préremplit le formulaire de certification LinkedIn avec son nom, sa date d'émission et un lien direct vers la page de vérification.

Comment partager votre page de vérification

Sur les attestations imprimées ou les PDF :

Vérifiez cette attestation à :
https://certlister.com/verify/acme-corp

Numéro d'attestation : CERT-2025-001

Dans les signatures de courriel :

Vérifiez nos attestations :
https://certlister.com/verify/acme-corp

En tant que lien sur votre site web :

<a href="https://certlister.com/verify/acme-corp">
  Vérifier les attestations
</a>

Sous forme de code QR :

1. Générez un code QR pour votre URL de vérification (outils gratuits : qr-code-generator.com, qrcode.com)
2. Insérez l'image du code QR sur les PDF d'attestation
3. Les titulaires le scannent avec leur téléphone pour vérifier instantanément

Partie 2 : Partage social — aperçus

Quand quelqu'un partage un lien de vérification sur LinkedIn, Slack, WhatsApp, X (Twitter) ou par courriel, la plateforme affiche un aperçu du lien.

Ce que montre l'aperçu : le nom et le logo de votre organisation, le titre « Vérifier une accréditation — votre organisation » et la phrase « Confirmez qu'une accréditation délivrée par votre organisation est authentique. » Un lien vers une seule attestation montre le même aperçu. L'aperçu ne montre jamais le nom du titulaire, le titre de l'attestation ni son statut — ces détails n'apparaissent que sur la page elle-même. Sans logo, l'aperçu montre seulement le nom de votre organisation.

Une organisation qui porte encore le nom « Prénom's Organization », le nom de départ d'un nouveau compte, reçoit un aperçu général CertLister jusqu'à ce que vous la renommiez dans Paramètres → Organisation. Les plateformes gardent aussi leur propre copie d'un aperçu : un lien partagé avant un changement de nom ou de logo peut montrer l'ancien aperçu pendant un certain temps.

Ce que les titulaires devraient faire : ajouter une phrase à eux lors du partage, par exemple « Mon attestation Premiers soins niveau 2 d'Acme ». Toute personne qui clique arrive sur la page de vérification en direct, avec les détails complets et à jour.

Sur LinkedIn, le bouton Ajouter à LinkedIn de la page de vérification ajoute l'attestation à la section Licences et certifications du profil, avec le lien de vérification — souvent mieux qu'une publication.

Partie 3 : Personnaliser votre page de vérification

Dans tous les forfaits, vous pouvez adapter la page de vérification à votre image de marque. La carte Configuration de la page, dans Page de vérification → Apparence, regroupe les réglages : logo, couleur de marque, URL personnalisée, infos de l'émetteur et mises en page.

Logo de l'organisation

Téléversez votre logo : il apparaîtra dans l'en-tête de votre page de vérification.

Pour le téléverser :

1. Allez dans Paramètres → Organisation
2. Cliquez sur Téléverser le logo
3. Utilisez un PNG transparent en format large (p. ex. 300×80 px) — 2 Mo maximum

Couleur de marque

Une couleur principale appliquée au fond de la section d'en-tête de votre page de vérification. Elle n'est pas appliquée dans la mise en page Vedette.

Pour la définir : dans Paramètres → Personnalisation, sous Couleur de marque, choisissez une couleur ou saisissez un code hexadécimal (p. ex. #2563eb). Page de vérification → Apparence affiche la couleur actuelle, avec un bouton Modifier dans les paramètres qui vous y mène.

Définir une URL personnalisée

Remplacez l'UUID dans votre URL de vérification par un nom lisible.

Avant : https://certlister.com/verify/a1b2c3d4-e5f6-7890-abcd-ef1234567890 Après : https://certlister.com/verify/acme-corp

Pour la définir :

1. Allez à Paramètres → Personnalisation
2. Trouvez le champ URL de la page de vérification
3. Saisissez votre identifiant (p. ex. acme-corp)
4. Cliquez sur Enregistrer l'URL

Règles pour l'identifiant :

• 3 à 30 caractères
• Lettres minuscules, chiffres et tirets uniquement
• Pas de tiret au début ou à la fin
• Doit être unique dans CertLister

L'ancienne URL avec UUID continue de fonctionner après la définition d'un identifiant — rien ne se brise pour les titulaires qui l'auraient mise en favori.

Partie 4 : Options de mise en page de la page de vérification

Vous pouvez modifier l'apparence de votre page de vérification publique au-delà du logo et de la couleur de marque. Les deux sélecteurs de mise en page ci-dessous sont disponibles sur tous les forfaits depuis le 20 septembre 2026. Ces options se configurent dans Page de vérification. Vous pouvez aussi servir la page de vérification entière depuis votre propre domaine — voir Domaine personnalisé : votre page de vérification sur votre propre domaine.

Mise en page

Trois mises en page contrôlent le design global de la page de vérification. Choisissez-en une dans Page de vérification → Apparence → Mise en page, puis cliquez sur Appliquer la mise en page.

La mise en page Standard est illustrée en haut de cet article. Si un design du concepteur de page de vérification est actif, il remplace ces mises en page.

Mise en page de la carte de résultat

Contrôle le design de la carte de résultat qui apparaît après une vérification réussie.

Choisissez-la dans Page de vérification → Apparence → Mise en page de la carte de résultat. L'icône d'ouverture (↗) à côté ouvre votre page de vérification en direct.

Section Infos de l'émetteur

Contrôle si les signaux de confiance de votre organisation (membre depuis, attestations émises, vérifications cette année, secteur, site web) apparaissent sur la page de vérification. Disponible sur tous les forfaits.

Pour activer ou désactiver : dans Page de vérification → Apparence, activez ou désactivez Afficher les infos de l'émetteur. Inclure les statistiques contrôle les nombres d'attestations et de vérifications.

Lorsque l'option est activée, les visiteurs voient une section sous la carte de recherche confirmant la présence et l'activité de votre organisation. Lorsqu'elle est désactivée, seuls la recherche et la carte de résultat sont affichés.

Partie 5 : Intégration sur votre site web

Intégrez le widget de vérification directement sur votre propre site web afin que les visiteurs n'aient jamais à le quitter pour vérifier une attestation.

Obtenir le code d'intégration

1. Allez dans Page de vérification dans la navigation de gauche
2. Ouvrez l'onglet Intégration web
3. Choisissez votre thème et votre couleur d'accent — sur les écrans de 1200 px et plus, l'Aperçu en direct à droite se met à jour
4. Cliquez sur l'icône de copie du bloc Code d'intégration
5. Collez l'extrait dans votre site

Options de style

Avant de copier le code, personnalisez l'apparence du widget à l'aide des contrôles de la section d'intégration.

Thème

Lorsque vous sélectionnez Transparent, le widget n'a pas son propre arrière-plan — il hérite de la couleur derrière l'iframe sur votre page.

Couleur d'accentuation

Cliquez sur l'échantillon de couleur ou saisissez un code hexadécimal pour définir la couleur utilisée pour les boutons et les éléments interactifs. Pratique lorsque vous voulez que le bouton de vérification s'harmonise avec la couleur principale de votre site.

Un bouton Réinitialiser apparaît lorsque vous changez la valeur par défaut, pour la restaurer.

Le code d'intégration se met à jour automatiquement à mesure que vous faites vos choix. L'URL src encode vos sélections :

certlister.com/verify/{orgId}/?embed=1                          → thème clair, couleur par défaut
certlister.com/verify/{orgId}/?embed=1&theme=dark               → thème foncé
certlister.com/verify/{orgId}/?embed=1&theme=transparent        → transparent
certlister.com/verify/{orgId}/?embed=1&color=e63946             → couleur d'accentuation personnalisée
certlister.com/verify/{orgId}/?embed=1&theme=dark&color=e63946  → foncé + accent personnalisé

L'extrait d'intégration

<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>

Conseils :

• width="100%" rend le widget adaptable
• Le petit script permet au widget de s'agrandir pour afficher un résultat. Sans lui, l'iframe garde sa hauteur fixe (height) — portez-la à environ 600 si votre site n'accepte pas les scripts

Voici à quoi il ressemble sur un site web :

Instructions par plateforme

WordPress

1. Modifiez la page où vous voulez le widget
2. Ajoutez un bloc HTML personnalisé
3. Collez l'extrait iFrame
4. Publiez

Wix

1. Dans l'éditeur Wix, ajoutez un élément HTML iFrame
2. Cliquez sur Saisir le code
3. Collez l'extrait iFrame
4. Ajustez la taille de l'élément sur la zone de travail
5. Publiez

Squarespace

1. Modifiez la page
2. Ajoutez un bloc de code
3. Collez l'extrait iFrame
4. Enregistrez et publiez

Webflow

1. Ajoutez un élément Embed à votre page
2. Collez l'extrait iFrame
3. Publiez le site

Partie 6 : Avancé — variables CSS (pour les développeurs)

Si vous gérez les couleurs de votre site via une feuille de style CSS ou un système de design, vous pouvez piloter les couleurs du widget directement à partir de vos propres variables CSS. Cela conserve les couleurs de votre marque au même endroit plutôt que de les coder en dur dans une URL.

Remarque : Cette méthode nécessite l'ajout d'un petit extrait JavaScript à votre page. Si votre plateforme n'autorise pas le JavaScript personnalisé (Wix, Squarespace), utilisez plutôt l'intégration iFrame standard de la Partie 3.

Comment cela fonctionne

1. Vous définissez des variables CSS dans votre feuille de style avec les noms attendus par le widget
2. Un petit script de pont lit ces valeurs et les transmet au widget
3. Le widget les applique au chargement

Votre CSS existant reste exactement où il est — vous indiquez simplement au widget de s'y référer.

Obtenir le code avancé

1. Allez dans Page de vérification → Intégration web
2. Ouvrez Avancé : Personnalisation CSS au bas de l'onglet
3. Cliquez sur Tout copier
4. Collez le bloc complet dans votre HTML

Le bloc contient trois parties : une balise <style>, la balise <iframe> et un <script> de pont. Les trois sont requis.

Les variables CSS

Modifiez les valeurs dans le bloc <style> pour qu'elles correspondent à votre marque :

<style>
  :root {
    --cl-primary : #2563eb;  /* Boutons et couleur d'accentuation */
    --cl-bg      : #ffffff;  /* Arrière-plan du widget            */
    --cl-card    : #f9fafb;  /* Arrière-plan des cartes et formulaires */
    --cl-text    : #121828;  /* Couleur du texte principal        */
    --cl-radius  : 8px;      /* Rayon des coins                   */
  }
</style>

Si vous avez déjà ces couleurs définies ailleurs dans votre CSS sous des noms différents, vous pouvez les référencer :

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

Exemple complet

<!-- 1. Définir vos couleurs de marque — modifier les valeurs ci-dessous -->
<style>
  :root {
    --cl-primary : #e63946;
    --cl-bg      : #f8f9fa;
    --cl-card    : #ffffff;
    --cl-text    : #212529;
    --cl-radius  : 12px;
  }
</style>

<!-- 2. Le widget -->
<iframe
  id="cl-verify"
  src="https://certlister.com/verify/YOUR-ORG-ID/?embed=1"
  width="100%"
  height="600"
  frameborder="0"
  allowtransparency="true"
  title="Credential Verification"
></iframe>

<!-- 3. Pont — lit vos variables CSS et les envoie au 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>

Important : l'id="cl-verify" de l'iframe et le getElementById('cl-verify') du script doivent correspondre. Si vous avez plusieurs widgets sur la même page, donnez à chacun un ID unique et ajoutez un script de pont distinct pour chacun.

Partie 7 : Comparaison

Dépannage

L'iFrame affiche une page vide

• Vérifiez que l'URL src se termine par /?embed=1
• Assurez-vous que l'identifiant de l'organisation est correct — copiez-le directement depuis Page de vérification dans l'application
• Vérifiez que la politique de sécurité du contenu (CSP) de votre site autorise les iFrames de certlister.com
• Ouvrez l'URL src directement dans votre navigateur pour confirmer qu'elle se charge

Le style de l'iFrame ne s'applique pas

• Vérifiez les paramètres d'URL dans le src — les couleurs s'écrivent sans le symbole # (p. ex. ?color=e63946, et non ?color=#e63946)
• Si vous utilisez la méthode des variables CSS, confirmez que le <script> de pont se trouve sur la même page que l'<iframe> et que les valeurs id correspondent
• Le CSS de la feuille de style de votre page n'a aucun effet à l'intérieur d'un iFrame — utilisez les paramètres d'URL ou le pont des variables CSS

La méthode des variables CSS ne fonctionne pas

• Assurez-vous que les trois parties sont présentes : le bloc <style>, l'<iframe> et le <script>
• Le pont des variables CSS nécessite JavaScript — il ne fonctionne pas sur les plateformes qui bloquent les scripts personnalisés (Wix, Squarespace). Utilisez plutôt l'intégration iFrame standard
• Ouvrez la console de votre navigateur (F12 → Console) et cherchez les erreurs
• Confirmez que les noms de vos variables CSS correspondent exactement à ceux que lit le pont (p. ex. --cl-primary, et non --cl-primary-color)

L'iFrame ne se redimensionne pas sur mobile

• Mettez width="100%" sur l'élément iframe
• Ne fixez pas de largeur en pixels
• Ajustez la valeur height si le contenu est coupé — 700 px peuvent être nécessaires sur mobile quand des résultats s'affichent

Le widget affiche de mauvaises couleurs après une mise à jour

• Le widget lit les variables CSS une seule fois, au chargement. Si vous modifiez une variable dynamiquement après le chargement de la page, le widget ne la relit pas automatiquement
• Pour forcer une mise à jour, rechargez la page

Foire aux questions

Q : Dois-je faire quelque chose pour activer la carte d'aperçu social ?

R : Non, il n'y a rien à configurer. Un lien de vérification partagé montre le nom et le logo de votre organisation; voir la partie 2.

Q : Puis-je utiliser un domaine personnalisé (p. ex. verify.acme.com) ?

R : Oui — avec le forfait Pro, vous pouvez servir votre page de vérification depuis votre propre domaine. Voir Domaine personnalisé : votre page de vérification sur votre propre domaine.

Q : Si je change mon identifiant, les anciennes URL cessent-elles de fonctionner ?

R : Non. L'URL avec UUID fonctionne toujours. Quand vous définissez ou changez un identifiant, l'ancien identifiant cesse de fonctionner, mais l'URL avec UUID continue de fonctionner. Prévenez les destinataires si vous changez un identifiant déjà publié.

Q : Puis-je définir à la fois un thème et des variables CSS ?

R : Oui — ils fonctionnent ensemble. Le paramètre de thème de l'URL (?theme=dark) définit le mode de base (clair ou sombre), et les variables CSS remplacent les couleurs une à une par-dessus. Si vous définissez --cl-bg par les variables CSS tout en utilisant ?theme=transparent, la couleur CSS explicite l'emporte.

Q : Puis-je intégrer plusieurs widgets de vérification sur une même page ?

R : Oui. Donnez à chaque iframe un id différent et ajoutez pour chacun un script de pont distinct qui pointe vers cet id.

Q : Le widget se met-il à jour automatiquement quand les attestations changent ?

R : Oui. Le widget affiche des données en temps réel — une attestation révoquée apparaît comme révoquée dès la recherche suivante, et les attestations nouvellement émises sont disponibles immédiatement.

Q : Puis-je voir qui vérifie les attestations ?

R : Le journal des vérifications est offert sur tous les forfaits. Allez dans Rapports → Vérifications pour voir l'activité de vérification en détail.

Q : Quelles informations sont visibles publiquement sur la page de vérification ?

R : Seulement : le nom du destinataire, le titre de l'attestation, la date d'émission, la date d'expiration (si elle est définie), le statut et les champs personnalisés que vous avez configurés. Les adresses courriel, les notes internes et les coordonnées de l'organisation ne sont jamais exposées.

Q : Le nombre de vérifications est-il limité ?

R : Aucun forfait n'a de plafond mensuel. Chaque visiteur peut rechercher 30 attestations toutes les 15 minutes, ce qui freine l'extraction automatisée sans gêner les vraies vérifications.