Credly Badge Toolkit

Unofficial. This is an independent helper for displaying your own public Credly badges on a website. It is not affiliated with, endorsed by, or connected to Credly (or Pearson) in any way — and it is not trying to look like or replace Credly.

Drop Credly badges into any website with one line of code.
No Vercel. No backend. No build step.

Live demo: imaad666.github.io/Credly-Badge-Patch

<script src="https://cdn.jsdelivr.net/gh/imaad666/credly-badge-patch@main/credly-badges.js"
        data-username="YOUR_CREDLY_USERNAME"></script>

That’s it. Paste it into HTML, WordPress, Notion embeds, static sites, React (dangerouslySetInnerHTML / a tiny effect), whatever — badges load dynamically from that Credly username.

why and how

Credly’s badge JSON doesn’t allow browser requests (CORS). The script reads your public badges through a CORS-friendly bridge, normalizes them, and renders a grid. Visitors never need an account or API key.

Usage

Auto-mount (simplest)

<script
  src="https://cdn.jsdelivr.net/gh/imaad666/credly-badge-patch@main/credly-badges.js"
  data-username="imaad">
</script>

Or mount into a specific element

<div id="badges"></div>
<script
  src="https://cdn.jsdelivr.net/gh/imaad666/credly-badge-patch@main/credly-badges.js"
  data-username="imaad"
  data-target="#badges">
</script>

Or mark the element itself

<div data-credly-username="imaad"></div>
<script src="https://cdn.jsdelivr.net/gh/imaad666/credly-badge-patch@main/credly-badges.js"></script>

Programmatic

<script src="https://cdn.jsdelivr.net/gh/imaad666/credly-badge-patch@main/credly-badges.js"></script>
<script>
  CredlyBadges.render({
    username: "imaad",
    target: "#badges",
    onLoad: (data) => console.log(data.count, data.badges),
  });
</script>

Options

Attribute	Description
data-username	Credly username (required for auto-init)
data-target	CSS selector for the mount point
data-show-count	false hides the “N verified badges” line
data-css	false skips default styles
data-api	Optional. Your own proxy URL if you don’t want the built-in bridge

Optional: host your own proxy

Only needed if you want to avoid public bridges (rate limits / reliability). Same script — just point data-api at your proxy.

Any Node host (Railway, Render, Fly, VPS, laptop)

node server.js
# → http://localhost:3456/api/credly-badges?username=imaad

<script
  src="credly-badges.js"
  data-username="imaad"
  data-api="https://your-host.example/api/credly-badges">
</script>

Cloudflare Worker

npx wrangler deploy worker.js

Vercel / Netlify functions

api/credly-badges.js is included if you already deploy there — it’s optional, not required.

Local demo

node server.js

Open http://localhost:3456 — or open demo/index.html directly in a browser (zero server; uses the built-in bridge).

License

MIT — see LICENSE.

Credly® and badge artwork remain the property of their respective owners. This project only helps you embed badges that are already public on Credly.