Skip to content

Commit abcfe0d

Browse files
gvelez17claude
gvelez17
and
claude
committed
Add embeddable badge web component for third-party sites
Vanilla JS web component (<linked-badge>) that fetches from the public API and renders claim badges with Shadow DOM. No React/npm needed — just a <script> tag. Includes demo page and deployment docs. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 351e9f7 commit abcfe0d

File tree

3 files changed

+704
-0
lines changed

3 files changed

+704
-0
lines changed

‎public/BADGE-EMBED.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# LinkedTrust Embeddable Badge
2+
3+
A framework-agnostic web component for embedding LinkedTrust claim badges on any website. No React, no npm, no build step.
4+
5+
## For site owners embedding badges
6+
7+
Add this to your HTML:
8+
9+
```html
10+
<script src="https://linkedtrust.us/badge.js"></script>
11+
12+
<linked-badge claim-id="124443"></linked-badge>
13+
```
14+
15+
### Options
16+
17+
| Attribute | Default | Description |
18+
|-----------|---------|-------------|
19+
| `claim-id` | (required) | Numeric claim ID |
20+
| `theme` | `light` | `light` or `dark` |
21+
| `compact` | — | Add for smaller 320px variant |
22+
| `api-base` | `https://live.linkedtrust.us` | Override API URL |
23+
24+
### Examples
25+
26+
```html
27+
<!-- Basic -->
28+
<linked-badge claim-id="124443"></linked-badge>
29+
30+
<!-- Dark theme, compact -->
31+
<linked-badge claim-id="124443" theme="dark" compact></linked-badge>
32+
33+
<!-- Multiple badges -->
34+
<linked-badge claim-id="124443"></linked-badge>
35+
<linked-badge claim-id="124445"></linked-badge>
36+
```
37+
38+
### How it works
39+
40+
- Fetches claim data from the public LinkedTrust API (`live.linkedtrust.us`)
41+
- Renders inside Shadow DOM (no CSS conflicts with your site)
42+
- Shows: video (if attached), star rating, statement, endorser name + link, and a link to the full claim on LinkedTrust
43+
- Zero dependencies, ~10KB
44+
45+
## Deployment
46+
47+
The files live in `public/` and are served as static assets by Vite in prod:
48+
49+
```
50+
public/badge.js ← the web component
51+
public/badge-demo.html ← demo/test page
52+
public/BADGE-EMBED.md ← this file
53+
```
54+
55+
After deploying the trust_claim frontend:
56+
57+
- `badge.js` is available at `https://linkedtrust.us/badge.js`
58+
- Demo page at `https://linkedtrust.us/badge-demo.html`
59+
60+
### Deploy steps
61+
62+
1. Pull latest on the prod server
63+
2. Build: `yarn build` (Vite copies `public/` contents to `dist/`)
64+
3. Restart/redeploy the frontend as usual
65+
66+
No special config needed — Vite serves everything in `public/` as static files at the root path.

‎public/badge-demo.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>LinkedTrust Badge — Embed Demo</title>
7+
<style>
8+
body {
9+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
10+
margin: 0;
11+
padding: 40px 20px;
12+
background: #f5f5f5;
13+
}
14+
h1 { font-size: 24px; margin-bottom: 4px; }
15+
p.subtitle { color: #666; margin-top: 0; }
16+
.section { margin: 32px 0; }
17+
.section h2 { font-size: 18px; color: #333; margin-bottom: 16px; }
18+
.row { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
19+
pre {
20+
background: #1e1e1e;
21+
color: #d4d4d4;
22+
padding: 16px;
23+
border-radius: 8px;
24+
overflow-x: auto;
25+
font-size: 13px;
26+
line-height: 1.5;
27+
}
28+
code { color: #ce9178; }
29+
.dark-bg {
30+
background: #121212;
31+
padding: 24px;
32+
border-radius: 12px;
33+
}
34+
.try-it {
35+
margin-top: 24px;
36+
padding: 16px;
37+
background: #fff;
38+
border-radius: 8px;
39+
border: 1px solid #ddd;
40+
}
41+
.try-it label { font-weight: 600; font-size: 14px; }
42+
.try-it input {
43+
padding: 8px 12px;
44+
border: 1px solid #ccc;
45+
border-radius: 6px;
46+
font-size: 14px;
47+
width: 120px;
48+
margin: 0 8px;
49+
}
50+
.try-it button {
51+
padding: 8px 16px;
52+
background: #6366f1;
53+
color: white;
54+
border: none;
55+
border-radius: 6px;
56+
font-size: 14px;
57+
cursor: pointer;
58+
}
59+
#custom-target { margin-top: 16px; }
60+
</style>
61+
</head>
62+
<body>
63+
64+
<h1>LinkedTrust Embeddable Badge</h1>
65+
<p class="subtitle">Drop a &lt;script&gt; tag and a custom element into any website — no React, no npm, no build step.</p>
66+
67+
<!-- Load the badge component -->
68+
<script src="badge.js"></script>
69+
70+
<!-- Usage example -->
71+
<div class="section">
72+
<h2>Usage</h2>
73+
<pre>&lt;!-- 1. Include the script --&gt;
74+
&lt;script src="https://linkedtrust.us/badge.js"&gt;&lt;/script&gt;
75+
76+
&lt;!-- 2. Use the element --&gt;
77+
&lt;linked-badge claim-id="124443"&gt;&lt;/linked-badge&gt;
78+
79+
&lt;!-- With options --&gt;
80+
&lt;linked-badge claim-id="124443" theme="dark" compact&gt;&lt;/linked-badge&gt;</pre>
81+
</div>
82+
83+
<!-- Light theme examples -->
84+
<div class="section">
85+
<h2>Light Theme</h2>
86+
<div class="row">
87+
<linked-badge claim-id="124443"></linked-badge>
88+
<linked-badge claim-id="124445"></linked-badge>
89+
</div>
90+
</div>
91+
92+
<!-- Compact -->
93+
<div class="section">
94+
<h2>Compact</h2>
95+
<div class="row">
96+
<linked-badge claim-id="124444" compact></linked-badge>
97+
<linked-badge claim-id="124443" compact></linked-badge>
98+
</div>
99+
</div>
100+
101+
<!-- Dark theme -->
102+
<div class="section">
103+
<h2>Dark Theme</h2>
104+
<div class="dark-bg">
105+
<div class="row">
106+
<linked-badge claim-id="124443" theme="dark"></linked-badge>
107+
<linked-badge claim-id="124445" theme="dark"></linked-badge>
108+
</div>
109+
</div>
110+
</div>
111+
112+
<!-- Try it -->
113+
<div class="section">
114+
<h2>Try It</h2>
115+
<div class="try-it">
116+
<label>Claim ID:</label>
117+
<input type="number" id="tryId" value="124443" />
118+
<button onclick="tryBadge()">Load</button>
119+
<div id="custom-target"></div>
120+
</div>
121+
</div>
122+
123+
<script>
124+
function tryBadge() {
125+
var id = document.getElementById('tryId').value
126+
var target = document.getElementById('custom-target')
127+
target.innerHTML = ''
128+
var badge = document.createElement('linked-badge')
129+
badge.setAttribute('claim-id', id)
130+
target.appendChild(badge)
131+
}
132+
</script>
133+
134+
</body>
135+
</html>

0 commit comments

Comments
 (0)