Ob USt-ID, IBAN, Gutscheincode oder Referral-Link – es gibt viele Situationen, in denen Nutzer:innen etwas von deiner Website kopieren möchten. Mit einem einfachen Button kannst du ihnen genau das ermöglichen. Ganz ohne Plugin – nur mit HTML und etwas JavaScript.
Hinweis: Da es keinen Sinn macht Code über eine Sprach-KI vorlesen zu lassen, haben wir für die Audiounterstützung in diesem Blogbeitrag darauf verzichtet.
HTML
<p>
<span id="copy-text">DE815528827</span>
<button id="copy-btn">Kopieren</button>
</p>
JavaScript
<script>
document.addEventListener("DOMContentLoaded", function () {
const button = document.getElementById("copy-btn");
const text = document.getElementById("copy-text").innerText;
button.addEventListener("click", function () {
navigator.clipboard.writeText(text).then(() => {
const original = button.innerText;
button.innerText = "Kopiert!";
setTimeout(() => {
button.innerText = original;
}, 1500);
});
});
});
</script>
Anwendungsmöglichkeiten
-
USt-ID im Impressum
-
Kontodaten oder IBAN
-
E-Mail-Adressen oder Telefonnummern
-
Promo-Codes
-
API-Keys oder Tokens (im geschützten Bereich)
Das Ganze funktioniert auf modernen Browsern und mobilen Geräten zuverlässig – sofern das Kopieren durch den Nutzer aktiv angestoßen wird (z. B. per Klick). Ein konkretes Beispiel findest du hier in unserem Impressum.
Fazit
Mit diesem Snippet kannst du jede beliebige Zeichenkette auf Knopfdruck in die Zwischenablage deiner Website-Besucher kopieren lassen. Kein Styling, kein Overhead – nur Klartext. Wer’s hübscher mag, kann das Ganze natürlich noch mit Icons, Tooltips oder Animationen aufwerten.