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.

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 Paramètres du portail.

URL conviviale (forfaits Basic et Pro) :

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 Paramètres du portail 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 de titulaire afin que les visiteurs ne puissent rechercher que par numéro d'attestation. Allez à Paramètres → Personnalisation → Recherche par nom de titulaire et désactivez l'option. Cela s'applique à la fois à votre page de vérification 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 au profil 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 enrichis

Lorsqu'un titulaire partage le lien de vérification de son attestation sur LinkedIn, Slack, WhatsApp, X (Twitter) ou dans un client de messagerie, CertLister génère automatiquement un aperçu enrichi pour ce lien — aucune configuration requise, peu importe le forfait.

Au lieu d'une URL nue, les contacts du titulaire voient une carte d'image personnalisée qui a un aspect professionnel et communique immédiatement l'attestation.

Ce que montre l'aperçu

L'image de l'aperçu mesure 1200×630 px et est générée dynamiquement pour chaque attestation. Elle inclut :

• Nom du titulaire — en grand, bien visible
• Titre de l'attestation — sous le nom
• Nom de l'organisation émettrice
• Badge d'état — codé par couleur :
  • Vert — Attestation valide
  • Ambre — Échue
  • Rouge — Révoquée
• Couleur de marque de votre organisation — utilisée comme arrière-plan de l'aperçu, afin que celui-ci corresponde à votre identité

Comment cela fonctionne

L'aperçu est généré automatiquement chaque fois qu'une plateforme sociale, une application de messagerie ou un client de courriel récupère votre URL de vérification pour générer un aperçu de lien. Il n'y a rien à configurer — chaque lien de vérification d'attestation produit un aperçu enrichi prêt à l'emploi.

Exemple de flux :

1. Vous émettez une attestation à Sarah Johnson pour « Premiers soins niveau 2 »
2. Sarah copie son lien de vérification : https://certlister.com/verify/acme-corp/CERT-2025-042
3. Sarah colle le lien dans une publication LinkedIn ou un message Slack
4. LinkedIn / Slack récupère l'URL et affiche une carte personnalisée :
   • Sarah Johnson
   • Premiers soins niveau 2 — Acme Corp
   • ✓ Attestation valide (en vert, à la couleur de marque d'Acme Corp)

Où cela fonctionne

Les aperçus enrichis sont pris en charge sur toutes les principales plateformes :

Conseils pour les titulaires

Partagez ces conseils avec les titulaires de vos attestations afin qu'ils tirent le meilleur parti du partage social :

• Publications LinkedIn : Collez le lien de vérification dans une publication LinkedIn. L'aperçu apparaît automatiquement. Ajoutez une courte légende avant de publier.
• Profil LinkedIn : Utilisez le bouton Ajouter au profil LinkedIn sur la page de vérification pour ajouter l'attestation directement à la section Certifications de leur profil LinkedIn — cela inclut aussi l'URL de vérification afin que leurs contacts puissent y accéder en un clic.
• Slack ou Teams : Collez le lien dans n'importe quel message. L'aperçu se déploie automatiquement — pas besoin d'ajouter du texte autour.
• Courriel : Incluez le lien de vérification dans le corps du message. Certains clients de courriel (Gmail, Outlook) afficheront une carte d'aperçu; d'autres afficheront un simple lien.

Couleur de marque sur l'aperçu

L'aperçu utilise la couleur de marque de votre organisation comme arrière-plan. Si aucune couleur de marque n'est définie, l'aperçu utilise par défaut le vert pour les attestations actives, l'ambre pour les échues et le rouge pour les révoquées.

Pour définir votre couleur de marque et faire correspondre l'aperçu à votre identité :

1. Allez à Paramètres → Personnalisation
2. Définissez le champ Couleur de marque (requiert Basic ou Pro)
3. Cliquez sur Enregistrer la couleur

La prochaine fois que quelqu'un partagera un lien de vérification, l'aperçu utilisera votre couleur de marque.

Remarque : Les images d'aperçu sont mises en cache par les plateformes sociales jusqu'à 24 heures. Si vous mettez à jour votre couleur de marque, les liens déjà partagés pourraient continuer à afficher l'ancienne couleur jusqu'à l'expiration du cache.

Partie 3 : Personnaliser votre page de vérification (Basic et Pro)

Sur les forfaits Basic et Pro, vous pouvez personnaliser l'apparence de votre page de vérification pour refléter la marque de votre organisation.

Logo de l'organisation

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

Pour téléverser :

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

Couleur de marque

Définissez une couleur principale qui s'applique à l'arrière-plan de la section héros de votre page de vérification.

Pour la définir :

1. Allez à Paramètres → Personnalisation
2. Utilisez le sélecteur de couleur ou saisissez un code hexadécimal (p. ex. #2563eb) dans le champ Couleur de marque
3. Cliquez sur Enregistrer la couleur

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 (Pro)

Sur le forfait Pro, vous pouvez modifier l'apparence de votre page de vérification publique au-delà du logo et de la couleur de marque. Ces options se configurent dans Paramètres du portail.

Mise en page de la coquille

Trois mises en page contrôlent le design global de la page de vérification. Choisissez-en une dans Paramètres du portail → Mise en page — un aperçu en direct se met à jour immédiatement.

Cliquer sur une mise en page l'enregistre automatiquement. L'aperçu en direct dans Paramètres du portail affiche un iframe pleine page de votre page de vérification réelle — basculez entre les vues Bureau et Mobile pour vérifier le résultat sur les deux.

Mise en page de la carte de résultat

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

Choisissez une mise en page dans Paramètres du portail → Mise en page de la carte de résultat. Utilisez l'icône d'aperçu (↗) à côté du sélecteur pour ouvrir votre page de vérification en direct avec une attestation préremplie afin d'en voir le résultat immédiatement.

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 :

1. Allez à Paramètres → Personnalisation
2. Trouvez la section Infos de l'émetteur
3. Activez ou désactivez et enregistrez

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 à Paramètres du portail dans la navigation de gauche
2. Faites défiler jusqu'à Intégrer sur votre site web
3. Choisissez votre thème et votre couleur d'accentuation
4. Cliquez sur Copier le code
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
  src="https://certlister.com/verify/YOUR-ORG-ID/?embed=1"
  width="100%"
  height="600"
  frameborder="0"
  allowtransparency="true"
  title="Credential Verification"
></iframe>

Conseils :

• Utilisez width="100%" pour le rendre adaptatif
• Ajustez height pour s'adapter à votre mise en page — 600 px est un bon point de départ
• Aucun JavaScript requis

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 à Paramètres du portail → Intégrer sur votre site web
2. Cliquez sur Avancé : variables CSS au bas de la section Intégration
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