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. See the certificate verification system page for what the verify page does out of the box.

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 Verification Page; once you set a friendly URL (below), the app shows that instead.

Friendly URL:

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 Verification Page 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 credential number (e.g., "CERT-2025-001")
• Or enter a recipient name (e.g., "Sarah Johnson") — if enabled by your organization

Privacy option: You can hide the recipient name search field so visitors can only search by credential number. Go to Verification Page → Options and turn off Recipient Name Search. This applies to both your public verify page and the embed widget.

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 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 — Preview Cards

When someone shares a verify link on LinkedIn, Slack, WhatsApp, X (Twitter), or in an email, the platform shows a preview card for the link.

What the card shows: your organization's name and logo, the title "Verify a Credential — your organization", and the line "Confirm a credential issued by your organization is genuine." A link to one credential shows the same card. The card never shows the recipient's name, the credential title or its status — those appear only on the page itself. Without a logo, the card shows your organization's name on its own.

An organization still named "first name's Organization", the name a new account starts with, gets a general CertLister card until you rename it in Settings → Organization. Platforms also keep their own copy of a preview, so a link shared before you changed your name or logo can show the old card for a while.

What recipients should do: add a line of their own when they share, for example "My First Aid Level 2 credential from Acme Corp". Anyone who clicks the link lands on the live verify page with the full, current details.

On LinkedIn, the Add to LinkedIn button on the verify page adds the credential to the Certifications section of the recipient's profile, with the verify link attached — which is usually better than a post.

Part 3: Branding Your Verify Page

On every plan, you can customize how your verify page looks to match your organization's brand. The Page Configuration card in Verification Page → Appearance gathers the settings: logo, brand color, custom URL, issuer info, and the layouts.

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. It is not applied in the Spotlight layout.

To set: in Settings → Customization, under Brand Color, pick a color or enter a hex code (e.g., #2563eb). Verification Page → Appearance shows the current color, with an Edit in Settings button that takes you there.

Setting a Custom URL Slug

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

Before: certlister.com/verify/a1b2c3d4-… After: 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

You can change how your public verify page looks beyond just the logo and brand color. Both layout pickers below are on every plan since 2026-09-20. These options are configured in Verification Page. You can also serve the entire verify page from your own domain — see Custom Domain: Your Verify Page on Your Own Domain.

Page Layout

Three layouts control the overall design of the verify page. Select one in Verification Page → Appearance → Page layout, then click Apply layout.

The Standard layout is shown at the top of this article. If a design from the Verify Page Designer is active, it replaces these layouts.

Result Card Layout

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

Select a layout in Verification Page → Appearance → Result card layout. Use the open icon (↗) next to it to see your live verify page.

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: in Verification Page → Appearance, switch Show issuer info on or off. Include stats controls the credential and verification counts.

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 Verification Page in the left navigation
2. Open the Embed tab
3. Choose your theme and accent color — on screens 1200 px and wider, the Live preview on the right updates
4. Click the copy icon on the Embed Code block
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:

…/verify/acme-corp/?embed=1                          → light, default color
…/verify/acme-corp/?embed=1&theme=dark               → dark
…/verify/acme-corp/?embed=1&theme=transparent        → transparent
…/verify/acme-corp/?embed=1&color=e63946             → custom accent
…/verify/acme-corp/?embed=1&theme=dark&color=e63946  → dark + accent

The Embed Snippet

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

Tips:

• width="100%" makes it responsive
• The short script lets the widget grow to fit a result. Without it, the iframe keeps its fixed height — raise it to about 600 if your site doesn't allow scripts

This is how it looks on a website:

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 5 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 Verification Page → Embed
2. Open Advanced: CSS Customization 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://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: 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 Verification Page 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, there is nothing to set up. A shared verify link shows your organization's name and logo; see Part 2.

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

A: Yes — on the Pro plan you can serve your verify page from your own domain. See Custom Domain: Your Verify Page on Your Own Domain.

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 every plan. Go to Reports → Verifications 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: There is no monthly cap on any plan. Each visitor can look up 30 credentials every 15 minutes, which stops automated scraping without getting in the way of real checks.