What you ask sounds like Stack exchange flairs, is it correct?
You could probably use the Keyoxide API to fetch your data and create a "badge" yourself... Here is a trial I made to illustrate:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Keyoxyde badge test</title>
</head>
<body>
<h1>Keyoxide bage :</h1>
<div id="keyoxide-badge"></div>
</body>
<script src="keyoxide.js"></script>
<style>
#keyoxide-badge {
border: 2px solid darkslategray;
max-width: 50%;
}
#keyoxide-badge-header {
display: flex;
align-items: center;
}
#keyoxide-profile-picture,
#keyoxide-profile-data {
display: inline-block;
padding: 0.5rem;
}
#keyoxide-profile-picture {
width: 4rem;
height: 4rem;
}
#keyoxide-profile-name {
font-size: large;
}
[id^=keyoxide-claim-] {
display: inline-block;
margin-top: 1rem;
padding-right: 1rem;
padding-left: 1rem;
color: darkslategray;
font-size: small;
}
</style>
</html>
And the keyoxide.js part:
const fingerprint = "9f0048ac0b23301e1f77e994909f6bd6f80f485d";
function getElement(tag, attributes) {
const element = document.createElement(tag);
attributes.forEach((attribute) => {
element.setAttribute(attribute.name, attribute.value);
})
return element;
}
fetch("https://keyoxide.org/api/0/profile/fetch?doVerification=true&query=" + fingerprint)
.then((response) => {
const gettingProfile = response.json();
gettingProfile.then((profile) => {
const key = profile.keyData;
const user = key.users[key.primaryUserIndex];
console.log(profile, key, user);
const badge = document.querySelector("#keyoxide-badge");
const header = getElement("div", [{ name: "id", value: "keyoxide-badge-header" }]);
// Add picture
const picture = getElement("img", [{ name: "alt", value: user.userData.name + " profile picture" }, { name: "src", value: profile.extra.avatarURL }, { name: "id", value: "keyoxide-profile-picture" }]);
header.appendChild(picture);
// Add profile data
const data = getElement("div", [{ name: "id", value: "keyoxide-profile-data" }]);
const name = getElement("div", [{ name: "id", value: "keyoxide-profile-name" }]);
name.innerText = user.userData.name;
data.appendChild(name);
const emailDiv = getElement("div", [{ name: "id", value: "keyoxide-email" }]);
const email = getElement("a", [{ name: "href", value: "mailto:" + user.userData.email }]);
email.innerText = user.userData.email;
emailDiv.appendChild(email);
data.appendChild(emailDiv);
data.appendChild(getElement("hr", []));
header.appendChild(data);
badge.appendChild(header);
const claims = getElement("div", [{ name: "id", value: "keyoxide-badge-claims" }]);
claims.setAttribute("id", "keyoxide-badge-claims");
// Add claims
user.claims.forEach((claim) => {
const claimSummary = claim.summary;
if (claimSummary.isVerified) {
const claimNameId = "keyoxide-claim-" + claimSummary.serviceProviderName;
const preExistingClaimName = claims.querySelector("#" + claimNameId);
const claimEntry = preExistingClaimName || getElement("div", [{ name: "id", value: claimNameId }]);
if (preExistingClaimName) {
const separator = getElement("span", []);
separator.innerText = " | ";
claimEntry.appendChild(separator);
} else {
const claimEntryTitle = getElement("div", []);
claimEntryTitle.innerHTML = claimSummary.serviceProviderName;
claimEntry.appendChild(claimEntryTitle);
}
const link = getElement("a", [{ name: "href", value: claimSummary.profileURL}]);
link.innerText = claimSummary.profileName;
claimEntry.appendChild(link);
claims.appendChild(claimEntry);
}
})
badge.appendChild(claims);
});
});
With some more CSS, it should look nice 🙂