1Badge einbinden
Snippet in den <head> Ihrer Seite (oder globalen Skript-Bereich) einfügen.
html
Größe & Stil über data-size & data-style anpassbar. Updates laufen automatisch.
data-size.
Größe & Stil über data-size & data-style anpassbar. Updates laufen automatisch.
Alle Endpunkte & Parameter: Developer-Docs.
Tipp: Badge auf Start- & Leistungsseiten platzieren. API eignet sich für Reports, Alerts oder Badge-Varianten per A/B-Test. Das Siegel ist nur ein Platzhalter und kann sich bis zum Launch noch ändern.
(function(){ /* --------- Beispielcode zentral definieren (anpassen erlaubt) --------- */ const BADGE_SNIPPET = ` `; const API_JS_TRUST = `// TrustScore abrufen fetch('https://api.reputify.io/v1/trustscore/ihr-unternehmen', { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }) .then(r => r.json()) .then(d => console.log('TrustScore', d.score));`; const API_JS_REVIEWS = `// Letzte 20 Bewertungen abrufen fetch('https://api.reputify.io/v1/reviews?limit=20', { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }) .then(r => r.json()) .then(d => console.table(d.items));`; const API_CURL_TRUST = `# TrustScore curl -H "Authorization: Bearer YOUR_API_KEY" "https://api.reputify.io/v1/trustscore/ihr-unternehmen"`; const API_CURL_REVIEWS = `# Bewertungen (20) curl -H "Authorization: Bearer YOUR_API_KEY" "https://api.reputify.io/v1/reviews?limit=20"`; /* ----------------- State & Elements ----------------- */ let currentLang = 'js'; // 'js' | 'curl' let currentEndpoint = 'trust'; // 'trust' | 'reviews' const badgeEl = document.getElementById('code-badge'); const apiEl = document.getElementById('code-api'); const label = document.getElementById('label-lang'); const tabJS = document.getElementById('tab-js'); const tabCurl = document.getElementById('tab-curl'); const endpointBtns = document.querySelectorAll('.rpx-chipbtn'); /* ----------------- Render helpers ----------------- */ function setBadgeCode(){ badgeEl.textContent = BADGE_SNIPPET; } function getApiCode(){ if(currentLang==='js' && currentEndpoint==='trust') return API_JS_TRUST; if(currentLang==='js' && currentEndpoint==='reviews') return API_JS_REVIEWS; if(currentLang==='curl' && currentEndpoint==='trust') return API_CURL_TRUST; return API_CURL_REVIEWS; } function renderApi(){ apiEl.textContent = getApiCode(); label.textContent = (currentLang==='js') ? 'javascript' : 'curl'; tabJS.setAttribute('aria-selected', currentLang==='js' ? 'true':'false'); tabCurl.setAttribute('aria-selected', currentLang==='curl' ? 'true':'false'); endpointBtns.forEach(b => b.classList.toggle('is-active', b.dataset.endpoint===currentEndpoint)); } /* ----------------- Events ----------------- */ tabJS.addEventListener('click', () => { currentLang='js'; renderApi(); }); tabCurl.addEventListener('click', () => { currentLang='curl'; renderApi(); }); endpointBtns.forEach(b => b.addEventListener('click', () => { currentEndpoint=b.dataset.endpoint; renderApi(); })); // Tooltips: Click/ESC/Outside schließt; Hover öffnet const pills = document.querySelectorAll('.rpx-pill'); function closeAllTips(){ pills.forEach(p => p.setAttribute('aria-expanded','false')); } pills.forEach(p => { const btn = p.querySelector('.rpx-help'); btn.addEventListener('click', (e)=>{ e.stopPropagation(); const open=p.getAttribute('aria-expanded')==='true'; closeAllTips(); p.setAttribute('aria-expanded', String(!open)); }); p.addEventListener('mouseenter', ()=> p.setAttribute('aria-expanded','true')); p.addEventListener('mouseleave', ()=> p.setAttribute('aria-expanded','false')); }); document.addEventListener('keydown', (e)=>{ if(e.key==='Escape') closeAllTips(); }); document.addEventListener('click', (e)=>{ if(!e.target.closest('.rpx-pill')) closeAllTips(); }); /* ----------------- Init ----------------- */ setBadgeCode(); renderApi(); })();
Gregor Absenger