Credential Verification: Verify Page, Social Sharing & Embedding

Time to read: 9 minutes

Overview

Every CertLister organization gets a public Verify Page — a branded web page where anyone can confirm a credential is genuine. You can share this page directly or embed it on your own website.

Part 1: Your Verify Page

What It Is

A public web page where employers, auditors, and credential holders can verify authenticity — no CertLister account required.

Default URL format:

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

Your organization ID is a unique identifier (e.g., a1b2c3d4-e5f6-7890-abcd-ef1234567890). You can find it in the app under Portal Settings.

Friendly URL (Basic & Pro plans):

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

See Setting a Custom URL Slug below.

How to Find Your Verify Page URL

1. Log into CertLister
2. Click Portal Settings in the left navigation
3. Your URL is shown at the top of the page
4. Click the copy icon to copy it, or the open icon to preview it in a new tab

What Visitors Can Do

Search for a credential:

• Enter a recipient name (e.g., "Sarah Johnson")
• Or enter a credential number (e.g., "CERT-2025-001")

Result states:

• Active — Credential is genuine and currently valid
• Expired — Credential was valid but has since expired
• Revoked — Credential has been revoked and is no longer valid
• Not found — No matching credential exists

Share to LinkedIn: When a recipient finds their active credential, they see an Add to LinkedIn Profile button. One click pre-fills the LinkedIn certification form with their name, issue date, and a direct link back to the verification page.

How to Share Your Verify Page

On printed credentials or PDFs:

Verify this credential at:
https://certlister.com/verify/acme-corp

Credential number: CERT-2025-001

In email signatures:

Verify our credentials:
https://certlister.com/verify/acme-corp

As a link on your website:

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

As a QR code:

1. Generate a QR code for your verify URL (free tools: qr-code-generator.com, qrcode.com)
2. Include the QR code image on credential PDFs
3. Recipients scan with their phone to verify instantly

Part 2: Social Sharing — Rich Preview Cards

When a recipient shares their credential verify link on LinkedIn, Slack, WhatsApp, X (Twitter), or in an email client, CertLister automatically generates a rich preview card for that link — no setup required on any plan.

Instead of a bare URL, the recipient's contacts see a branded image card that looks professional and immediately communicates the credential.

What the Preview Card Shows

The preview image is 1200×630 px and is generated dynamically for each credential. It includes:

• Recipient name — large, prominent
• Credential title — below the name
• Issuing organisation name
• Status badge — colour-coded:
  • Green — Valid Credential
  • Amber — Expired
  • Red — Revoked
• Your organisation's brand colour — used as the card background, so the preview card matches your identity

How It Works

The preview card is generated automatically whenever a social platform, messaging app, or email client fetches your verify URL to generate a link preview. There is nothing to configure — every credential verify link produces a rich preview out of the box.

Example flow:

1. You issue a credential to Sarah Johnson for "First Aid Level 2"
2. Sarah copies her verify link: https://certlister.com/verify/acme-corp/CERT-2025-042
3. Sarah pastes the link into a LinkedIn post or a Slack message
4. LinkedIn / Slack fetches the URL and displays a branded card:
   • Sarah Johnson
   • First Aid Level 2 — Acme Corp
   • ✓ Valid Credential (in green, using Acme Corp's brand colour)

Where It Works

Rich preview cards are supported on all major platforms:

Tips for Recipients

Share these tips with your credential recipients so they get the most out of social sharing:

• LinkedIn posts: Paste the verify link into a LinkedIn post. The preview card appears automatically. Add a short caption before publishing.
• LinkedIn profile: Use the Add to LinkedIn Profile button on the verify page to add the credential directly to the Certifications section of their LinkedIn profile — this also includes the verify URL so connections can click through.
• Slack or Teams: Paste the link into any message. The preview unfurls automatically — no need to add text around it.
• Email: Include the verify link in the email body. Some email clients (Gmail, Outlook) will show a preview card; others will show a plain link.

Brand Colour on the Preview Card

The preview card uses your organisation's Brand Color as the background. If no brand color is set, the card uses a default green for active credentials, amber for expired, and red for revoked.

To set your brand color and make the preview card match your identity:

1. Go to Settings → Customization
2. Set the Brand Color field (requires Basic or Pro)
3. Click Save color

The next time someone shares a verify link, the preview card will use your brand color.

Note: Preview images are cached by social platforms for up to 24 hours. If you update your brand color, existing shared links may continue to show the old color until the cache expires.

Part 3: Branding Your Verify Page (Basic & Pro)

On the Basic and Pro plans, you can customize how your verify page looks to match your organization's brand.

Organization Logo

Upload your logo and it will appear in the header of your verify page.

To upload:

1. Go to Settings → Organization
2. Click Upload Logo
3. Use a transparent PNG in wide format (e.g., 300×80 px) — max 2 MB

Brand Color

Set a primary color that applies to the hero section background on your verify page.

To set:

1. Go to Settings → Customization
2. Use the color picker or enter a hex code (e.g., #2563eb) in the Brand Color field
3. Click Save color

Setting a Custom URL Slug

Replace the UUID in your verify URL with a human-readable name.

Before: https://certlister.com/verify/a1b2c3d4-e5f6-7890-abcd-ef1234567890 After: https://certlister.com/verify/acme-corp

To set:

1. Go to Settings → Customization
2. Find the Verify Page URL field
3. Enter your slug (e.g., acme-corp)
4. Click Save URL

Slug rules:

• 3–30 characters
• Lowercase letters, numbers, and hyphens only
• No leading or trailing hyphens
• Must be unique across CertLister

The old UUID URL continues to work after setting a slug — nothing breaks for recipients who have bookmarked it.

Part 4: Verify Page Layout Options (Pro)

On the Pro plan you can change how your public verify page looks beyond just the logo and brand color. These options are configured in Portal Settings.

Page Shell Layout

Three layouts control the overall design of the verify page. Select one in Portal Settings → Page layout — a live preview updates immediately.

Clicking a layout saves it automatically. The live preview in Portal Settings shows a full-page iframe of your actual verify page — toggle between Desktop and Mobile views to check the result on both.

Result Card Layout

Controls the design of the credential result card that appears after a successful verification.

Select a layout in Portal Settings → Result card layout. Use the preview icon (↗) next to the picker to open your live verify page with a real credential pre-filled so you can see the result immediately.

Issuer Info Section

Controls whether your organization's trust signals (member since, credentials issued, verifications this year, industry, website) appear on the verify page. Available on all plans.

To toggle:

1. Go to Settings → Customization
2. Find the Issuer Info section
3. Toggle on or off and save

When on, visitors see a section below the search card confirming your organization's presence and activity. When off, only the search and result card are shown.

Part 5: Embedding on Your Website

Embed the verification widget directly on your own website so visitors never have to leave your site to verify a credential.

Getting the Embed Code

1. Go to Portal Settings in the left navigation
2. Scroll to Embed on Your Website
3. Choose your theme and accent color
4. Click Copy Code
5. Paste the snippet into your site

Styling Options

Before copying the code, customize how the widget looks using the controls in the embed section.

Theme

When you select Transparent, the widget has no background of its own — it inherits whatever color is behind the iframe on your page.

Accent Color

Click the color swatch or type a hex code to set the color used for buttons and interactive elements. This is useful when you want the verify button to match your site's primary brand color.

A Reset button appears when you change from the default to restore it.

The embed code updates automatically as you make selections. The src URL encodes your choices:

certlister.com/verify/{orgId}/?embed=1                          → light theme, default color
certlister.com/verify/{orgId}/?embed=1&theme=dark               → dark theme
certlister.com/verify/{orgId}/?embed=1&theme=transparent        → transparent
certlister.com/verify/{orgId}/?embed=1&color=e63946             → custom accent color
certlister.com/verify/{orgId}/?embed=1&theme=dark&color=e63946  → dark + custom accent

The Embed Snippet

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

Tips:

• Use width="100%" to make it responsive
• Adjust height to fit your layout — 600px is a good starting point
• No JavaScript required

Platform Instructions

WordPress

1. Edit the page where you want the widget
2. Add a Custom HTML block
3. Paste the iFrame snippet
4. Publish

Wix

1. In the Wix editor, add an HTML iFrame element
2. Click Enter Code
3. Paste the iFrame snippet
4. Adjust the element size on the canvas
5. Publish

Squarespace

1. Edit the page
2. Add a Code Block
3. Paste the iFrame snippet
4. Save and publish

Webflow

1. Add an Embed element to your page
2. Paste the iFrame snippet
3. Publish site

Part 6: Advanced — CSS Variables (For Developers)

If you manage your site's colors through a CSS stylesheet or design system, you can drive the widget's colors directly from your own CSS variables. This keeps your brand colors in one place rather than hardcoding them into a URL.

Note: This method requires adding a small JavaScript snippet to your page. If your platform doesn't allow custom JavaScript (Wix, Squarespace), use the standard iFrame embed from Part 3 instead.

How It Works

1. You define CSS variables in your stylesheet with the widget's expected names
2. A small bridge script reads those values and forwards them into the widget
3. The widget applies them at load time

Your existing CSS stays exactly where it is — you're just telling the widget to read from it.

Getting the Advanced Code

1. Go to Portal Settings → Embed on Your Website
2. Click Advanced: CSS Variables at the bottom of the Embed section
3. Click Copy All
4. Paste the entire block into your HTML

The block contains three parts: a <style> tag, the <iframe> tag, and a bridge <script>. All three are required.

The CSS Variables

Edit the values in the <style> block to match your brand:

<style>
  :root {
    --cl-primary : #2563eb;  /* Buttons & accent color  */
    --cl-bg      : #ffffff;  /* Widget background       */
    --cl-card    : #f9fafb;  /* Card & form background  */
    --cl-text    : #121828;  /* Primary text color      */
    --cl-radius  : 8px;      /* Corner radius           */
  }
</style>

If you already have these colors defined elsewhere in your CSS under different names, you can reference them:

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

Full Example

<!-- 1. Set your brand colors — edit the values below -->
<style>
  :root {
    --cl-primary : #e63946;
    --cl-bg      : #f8f9fa;
    --cl-card    : #ffffff;
    --cl-text    : #212529;
    --cl-radius  : 12px;
  }
</style>

<!-- 2. The 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. Bridge — reads your CSS variables and sends them to the 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>

Important: The id="cl-verify" on the iframe and the getElementById('cl-verify') in the script must match. If you have multiple widgets on the same page, give each a unique ID and add a separate bridge script for each.

Part 7: Comparison

Troubleshooting

iFrame Shows a Blank Page

• Verify the src URL ends with /?embed=1
• Make sure the organization ID is correct — copy it directly from Portal Settings in the app
• Check that your site's Content Security Policy (CSP) allows iFrames from certlister.com
• Try opening the src URL directly in your browser to confirm it loads

iFrame Styling Isn't Applying

• Double-check the URL params in the src — colors are passed without the # symbol (e.g., ?color=e63946, not ?color=#e63946)
• If using the CSS variables method, confirm the bridge <script> is present on the same page as the <iframe> and that the id values match
• CSS from your page's stylesheet has no effect on the inside of an iFrame — you must use the URL params or the CSS variables bridge

CSS Variables Method Not Working

• Make sure all three parts are present: the <style> block, the <iframe>, and the <script>
• The CSS variables bridge requires JavaScript to be enabled — it will not work on platforms that block custom scripts (Wix, Squarespace). Use the standard iFrame embed instead
• Open your browser console (F12 → Console) and check for errors
• Confirm your CSS variable names exactly match the names the bridge is reading (e.g., --cl-primary, not --cl-primary-color)

iFrame Doesn't Resize on Mobile

• Set width="100%" on the iframe element
• Do not set a fixed pixel width
• Adjust the height value if content is clipped — 700px may be needed on mobile if results are showing

Widget Shows Wrong Colors After Update

• The widget reads CSS variables once at load time. If you update a variable dynamically after page load, the widget won't automatically re-read it
• To force a refresh, reload the page

Frequently Asked Questions

Q: Do I need to do anything to enable the social preview card?

A: No. Every credential verify link automatically generates a rich preview card when shared on social platforms. There is nothing to configure — it works on all plans out of the box. If you want the card to use your brand colour, set it in Settings → Customization (Basic or Pro).

Q: Can I use a custom domain (e.g., verify.acme.com)?

A: Not currently — verification pages are served from certlister.com. Custom domains may be considered for a future plan tier.

Q: What if I change my slug — do old URLs break?

A: No. The UUID URL always works. When you set or change a slug, the old slug stops working but the UUID URL continues to function. Let recipients know if you change a published slug.

Q: Can I set both a theme and CSS variables at the same time?

A: Yes — they work together. The URL theme param (?theme=dark) sets the base mode (light or dark), and CSS variables override individual colors on top of that. If you set --cl-bg via CSS variables while also using ?theme=transparent, the explicit CSS color takes priority.

Q: Can I embed multiple verify widgets on one page?

A: Yes. Give each iframe a different id and add a separate bridge script for each one pointing to that id.

Q: Does the widget update automatically when credentials change?

A: Yes. The widget shows real-time data — a revoked credential appears as revoked immediately on the next search, and newly issued credentials are available right away.

Q: Can I see who is verifying credentials?

A: Verification logging is available on the Pro plan. Go to Reports → Verification to see detailed verification activity.

Q: What information is publicly visible on the verify page?

A: Only: recipient name, credential title, issue date, expiry date (if set), status, and any custom fields you have configured. Email addresses, internal notes, and organization contact details are never exposed.

Q: Is there a limit on how many verifications can happen?

A: No — all plans support unlimited verification requests.