Eigenes HTML, CSS und JavaScript in Kopage verwenden

Der klassische Kopage Website Builder ermöglicht es, neben den integrierten Funktionen auch eigenen HTML-, CSS- und JavaScript-Code zu verwenden.

Damit kannst du beispielsweise externe Inhalte einbinden, bestimmte Darstellungen individuell anpassen oder Funktionen ergänzen, für die Kopage selbst kein passendes Modul bereitstellt.

Eigener Code bietet zusätzliche Möglichkeiten, erfordert aber auch entsprechende Vorsicht. Fehlerhafter oder ungeprüfter Code kann die Darstellung, Funktion, Performance, Sicherheit oder den Datenschutz deiner Website beeinflussen.

Kurz erklärt: Für die meisten normalen Kopage Websites benötigst du keinen eigenen Code. Verwende HTML, CSS oder JavaScript vor allem dann, wenn die integrierten Funktionen für eine konkrete Anforderung nicht ausreichen.

Was ist eigener Code in Kopage? #

Kopage ist grundsätzlich dafür ausgelegt, Websites ohne Programmierkenntnisse zu erstellen.

Seiten, Texte, Bilder, Formulare und zahlreiche weitere Funktionen können über den visuellen Website Builder verwaltet werden.

Für besondere Anforderungen unterstützt der klassische Kopage Website Builder jedoch auch eigenen HTML-, CSS- und JavaScript-Code.

Die drei Technologien erfüllen unterschiedliche Aufgaben:

HTML
→ Struktur und Inhalte

CSS
→ Gestaltung und Darstellung

JavaScript
→ Verhalten und zusätzliche Funktionen

Diese Unterscheidung ist wichtig, bevor du eigenen Code in deine Website einfügst.

Wann benötige ich eigenen Code? #

Eigener Code kann sinnvoll sein, wenn eine gewünschte Funktion mit den normalen Kopage-Werkzeugen nicht umgesetzt werden kann.

Typische Anwendungsfälle sind beispielsweise:

• Einbettung eines externen Widgets,
• Einbindung eines externen Dienstes,
• individuelle CSS-Anpassungen,
• zusätzliche HTML-Inhalte,
• oder eine spezielle JavaScript-Funktion.

Wenn Kopage für deine Aufgabe bereits eine passende integrierte Funktion besitzt, ist diese in vielen Fällen die einfachere und wartungsfreundlichere Lösung.

Praxis-Tipp: Prüfe zuerst, ob Kopage die gewünschte Funktion bereits selbst anbietet. Eigener Code sollte eine konkrete Lücke schließen und nicht ohne Not eine vorhandene Builder-Funktion ersetzen.

Was ist HTML? #

HTML steht für HyperText Markup Language und beschreibt die Struktur von Inhalten einer Webseite.

Ein sehr einfaches Beispiel lautet:

<h2>Unsere Öffnungszeiten</h2>
<p>Montag bis Freitag: 08:00 bis 17:00 Uhr</p>

Der Browser interpretiert die HTML-Elemente und stellt daraus eine Überschrift und einen Absatz dar.

Für normale Überschriften und Texte musst du in Kopage allerdings nicht selbst HTML schreiben. Dafür stehen die normalen Bearbeitungsfunktionen des Website Builders zur Verfügung.

Wann ist eigenes HTML sinnvoll? #

Eigenes HTML wird beispielsweise interessant, wenn ein externer Anbieter einen fertigen Einbettungscode zur Verfügung stellt oder wenn eine spezielle Struktur benötigt wird, die sich mit den normalen Kopage-Funktionen nicht sinnvoll abbilden lässt.

Ein externer Dienst könnte beispielsweise einen Code in dieser Art bereitstellen:

<div class="example-widget">
    Externer Inhalt
</div>

Dies ist nur ein vereinfachtes Beispiel und kein tatsächlich einzubindendes Widget.

HTML nicht für normale Seitenpflege missbrauchen #

Nur weil HTML verwendet werden kann, solltest du nicht sämtliche normalen Seiteninhalte von Hand damit erstellen.

Texte, Bilder und normale Seitenbereiche lassen sich mit den vorgesehenen Kopage-Funktionen einfacher verwalten.

Wie du normale Inhalte bearbeitest, erklären wir unter Inhalte mit Kopage erstellen: Content Blocks, Texte und Bilder bearbeiten.

Was ist CSS? #

CSS steht für Cascading Style Sheets und wird für die visuelle Gestaltung von HTML-Elementen verwendet.

Damit können beispielsweise Abstände, Schriftgrößen, Rahmen oder andere Darstellungsmerkmale beeinflusst werden.

Ein vereinfachtes Beispiel:

.hinweis {
    font-weight: bold;
    padding: 20px;
}

Dieses CSS würde Elemente mit der entsprechenden Klasse unter anderem fett darstellen und mit einem Innenabstand versehen.

Wann ist eigenes CSS sinnvoll? #

Eigenes CSS kann hilfreich sein, wenn du eine gezielte visuelle Anpassung benötigst, die über die normalen Designmöglichkeiten von Kopage hinausgeht.

Bevor du CSS verwendest, solltest du jedoch prüfen, ob sich die gewünschte Änderung bereits über die vorhandenen Design- und Template-Einstellungen umsetzen lässt.

Die normalen Gestaltungsmöglichkeiten behandeln wir unter Kopage Template und Design anpassen: Farben, Schriften, Header und Footer.

Wichtig: Verwende CSS nicht unnötig für Einstellungen, die Kopage bereits über seine Designoberfläche bereitstellt. Änderungen über die integrierten Funktionen sind für spätere Anpassungen meist leichter nachvollziehbar.

CSS kann mehrere Bereiche gleichzeitig beeinflussen #

CSS arbeitet mit Selektoren. Je nachdem, wie allgemein ein Selektor formuliert ist, kann eine Regel nicht nur ein einzelnes Element, sondern viele Bereiche der Website verändern.

Eine sehr allgemeine CSS-Regel kann deshalb unbeabsichtigt Auswirkungen auf andere Seiten oder Elemente haben.

Teste individuelle CSS-Anpassungen sorgfältig und kontrolliere nicht nur die Stelle, die du ursprünglich verändern wolltest.

Änderungen auf mehreren Seiten prüfen #

Wenn dein CSS auf gemeinsame Klassen oder Seitenelemente wirkt, solltest du nach einer Änderung mehrere Bereiche der Website kontrollieren.

Dazu gehören insbesondere:

Startseite
wichtige Unterseiten
Navigation
Formulare
Blog
Shop
Footer
Smartphone-Darstellung

Eine Anpassung, die auf einer einzelnen Seite gut aussieht, kann an einer anderen Stelle unerwartete Auswirkungen haben.

Was ist JavaScript? #

JavaScript ist eine Programmiersprache, die im Browser ausgeführt werden kann und interaktive beziehungsweise dynamische Funktionen ermöglicht.

JavaScript kann beispielsweise auf Benutzeraktionen reagieren, externe Funktionen laden oder Inhalte dynamisch verändern.

Ein stark vereinfachtes Beispiel:

<script>
console.log('Beispiel');
</script>

Dieses Beispiel dient lediglich zur Veranschaulichung und hat für eine normale Kopage Website keinen praktischen Nutzen.

JavaScript mit besonderer Vorsicht verwenden #

JavaScript besitzt wesentlich mehr Möglichkeiten als eine einfache CSS-Gestaltungsregel.

Fehlerhafter Code kann Funktionen beeinträchtigen, Fehlermeldungen verursachen oder mit bereits vorhandenem JavaScript der Website beziehungsweise eines externen Dienstes kollidieren.

Füge deshalb nur JavaScript ein, dessen Herkunft und Zweck du kennst.

Achtung: Kopiere niemals ungeprüft JavaScript aus Foren, Kommentaren, unbekannten Websites oder anderen nicht vertrauenswürdigen Quellen in deine Website. JavaScript kann weit mehr tun als nur die Darstellung einer Seite verändern.

Was ist ein Embed-Code? #

Viele externe Dienste stellen einen sogenannten Embed- oder Einbettungscode bereit.

Damit kann ein externer Inhalt innerhalb einer Website angezeigt oder eine externe Funktion geladen werden.

Je nach Anbieter kann ein solcher Code HTML, JavaScript oder eine Kombination daraus enthalten.

Typische Beispiele können externe Buchungsfunktionen, Formulare, Kalender, Videos, Bewertungsdienste oder andere Widgets sein.

Embed-Code nur vom tatsächlichen Anbieter übernehmen #

Wenn du einen externen Dienst einbinden möchtest, solltest du den dafür vorgesehenen Code direkt aus der offiziellen Verwaltungsoberfläche oder Dokumentation dieses Dienstes übernehmen.

Verwende nicht irgendeinen Code aus einem alten Blogartikel oder Forum, nur weil dort der Name des gewünschten Dienstes erwähnt wird.

Externe Anbieter können ihre Einbettungsmethoden im Laufe der Zeit ändern.

Vorhandene Kopage-Funktionen bevorzugen #

Für verschiedene häufig verwendete externe Inhalte bietet Kopage bereits passende Funktionen.

Google Maps, YouTube und Social-Media-Verknüpfungen behandeln wir beispielsweise unter Google Maps, YouTube und Social Media in Kopage einbinden.

Wenn eine solche integrierte Möglichkeit für deinen Anwendungsfall ausreicht, musst du nicht zusätzlich einen eigenen Embed-Code verwenden.

Wo eigenen Code einfügen? #

Verwende für HTML, CSS oder JavaScript ausschließlich die dafür vorgesehenen Funktionen des klassischen Kopage Website Builders.

Welcher Bereich geeignet ist, hängt davon ab, ob der Code einen bestimmten Seiteninhalt, die Gestaltung oder eine externe Funktion betrifft.

Füge Code nicht wahllos in normale Textfelder ein.

Wichtig: HTML, CSS und JavaScript sind unterschiedliche Codearten. Ein CSS-Code gehört nicht automatisch in dasselbe Feld wie ein HTML-Embed, und JavaScript sollte nur dort eingesetzt werden, wo die entsprechende Codeart vorgesehen ist.

Code vor dem Einfügen verstehen #

Du musst nicht jedes Detail einer komplexen Integration selbst programmieren können. Du solltest aber zumindest wissen, welchem Zweck der eingefügte Code dient und von welchem Anbieter er stammt.

Bei einem externen Widget solltest du beispielsweise beantworten können:

Von welchem Anbieter stammt der Code?
Was wird auf meiner Website eingebunden?
Werden externe Server kontaktiert?
Werden Daten übertragen?
Benötigt die Funktion Cookies?
Kann ich den Code später wieder entfernen?

Wenn diese Fragen völlig unklar sind, solltest du den Code nicht ungeprüft auf einer produktiven Website einsetzen.

Vor Änderungen vorhandenen Code sichern #

Wenn du bereits funktionierenden individuellen Code ändern möchtest, sichere die bisherige Version vorher.

Das kann beispielsweise bedeuten, dass du den bisherigen Code in einer lokalen Textdatei speicherst, bevor du ihn veränderst.

Wenn die neue Version Probleme verursacht, kannst du dadurch leichter zum vorherigen Stand zurückkehren.

Praxis-Tipp: Ändere bei komplexerem Code möglichst nur eine Sache gleichzeitig. Wenn anschließend ein Fehler auftritt, lässt sich die Ursache wesentlich leichter eingrenzen.

Kommentare im eigenen Code verwenden #

Wenn du selbst CSS oder anderen Code pflegst, können kurze Kommentare helfen, den Zweck einzelner Anpassungen später noch zu verstehen.

Ein CSS-Beispiel:

/* Abstand für speziellen Hinweisbereich */
.hinweis {
    padding: 20px;
}

Das ist besonders hilfreich, wenn mehrere individuelle Anpassungen über längere Zeit entstanden sind.

Code nicht mehrfach einfügen #

Wenn eine Integration nicht sofort sichtbar ist, solltest du denselben Code nicht einfach mehrfach an verschiedenen Stellen einfügen.

Dadurch können externe Skripte mehrfach geladen oder Funktionen mehrfach ausgeführt werden.

Prüfe stattdessen zuerst, ob der Code an der richtigen Stelle eingefügt wurde und ob die betreffende Seite veröffentlicht beziehungsweise aktualisiert wurde.

Externen Code und Performance beachten #

Externe Skripte und Widgets können zusätzliche Dateien und Daten von fremden Servern laden.

Je mehr externe Dienste eingebunden werden, desto mehr zusätzliche Ressourcen können beim Seitenaufruf erforderlich sein.

Das kann sich auf die Ladezeit und das Verhalten der Website auswirken.

Setze externe Integrationen deshalb gezielt ein und entferne Funktionen, die keinen tatsächlichen Nutzen mehr haben.

Nicht jedes Widget ist seinen Aufwand wert #

Ein zusätzliches Widget kann optisch interessant sein, gleichzeitig aber externe Skripte laden, Daten übertragen und zusätzlichen Wartungsaufwand verursachen.

Frage dich deshalb vor der Integration, ob die Funktion für deine Besucher wirklich relevant ist.

Eine einfache Verlinkung zu einem externen Dienst kann in manchen Fällen sinnvoller sein als dessen vollständige Einbettung.

Eigenen Code und Responsive Design prüfen #

Kopage selbst ist auf responsive Websites ausgelegt. Individuell eingefügter Code muss deshalb aber nicht automatisch ebenfalls auf jedem Bildschirm korrekt funktionieren.

Ein externes Widget kann beispielsweise eine feste Breite besitzen und dadurch auf einem Smartphone über den sichtbaren Bereich hinausragen.

Teste individuellen Code deshalb auf Desktop, Tablet und Smartphone.

Weitere Hinweise zur mobilen Darstellung findest du unter Responsive Design: Kopage Website für Smartphone und Tablet optimieren.

Feste Breiten vorsichtig verwenden #

Bei selbst geschriebenem HTML oder CSS solltest du besonders auf starre Größenangaben achten.

Ein Element mit einer fest vorgegebenen großen Breite kann auf kleineren Geräten Probleme verursachen.

Responsive Gestaltung berücksichtigt dagegen, dass unterschiedliche Bildschirmgrößen zur Verfügung stehen.

Eigener Code und Datenschutz #

Besondere Aufmerksamkeit ist bei externem JavaScript und Embed-Code erforderlich.

Ein eingebundener Drittanbieter kann beim Seitenaufruf eine Verbindung zu externen Servern herstellen und dabei Daten verarbeiten.

Das kann beispielsweise bei Analyse-, Karten-, Video-, Chat-, Buchungs- oder Social-Media-Diensten relevant sein.

Wichtig: Dass sich ein externer Dienst technisch per Code einbinden lässt, bedeutet nicht automatisch, dass er ohne weitere Datenschutzmaßnahmen verwendet werden darf.

Consent-Lösung berücksichtigen #

Wenn ein externer Dienst Cookies setzt oder andere zustimmungspflichtige Technologien verwendet, kann eine entsprechende Consent-Konfiguration erforderlich sein.

Ob und welche Anforderungen bestehen, hängt vom verwendeten Dienst, deiner Konfiguration und den für deine Website geltenden rechtlichen Vorgaben ab.

Prüfe dies vor der Veröffentlichung einer entsprechenden Integration.

Eigener Code und Sicherheit #

Code besitzt grundsätzlich die Möglichkeit, das Verhalten einer Website zu beeinflussen.

Verwende deshalb nur Code aus vertrauenswürdigen Quellen und entferne Integrationen, die nicht mehr benötigt werden.

Besonders kritisch solltest du sein, wenn dich eine unbekannte Person auffordert, einen Code einzufügen, dessen Funktion du nicht nachvollziehen kannst.

Achtung: Füge niemals Code auf deiner Website ein, nur weil dir jemand behauptet, er sei für „SEO“, „Google-Verifizierung“, „Sicherheit“ oder eine angeblich notwendige Reparatur erforderlich. Prüfe zuerst Herkunft und Zweck.

Externe Dienste können sich ändern #

Eine Integration kann heute funktionieren und später Probleme verursachen, wenn der externe Anbieter seinen Dienst, seine URLs oder seinen Einbettungscode verändert.

Bei externen Funktionen solltest du deshalb berücksichtigen, dass deren Betrieb nicht vollständig unter deiner Kontrolle steht.

Wenn ein Widget plötzlich nicht mehr funktioniert, prüfe auch, ob der externe Anbieter seine Integration geändert oder eingestellt hat.

Was tun, wenn die Website nach einer Codeänderung falsch aussieht? #

Wenn ein Darstellungsproblem unmittelbar nach einer CSS- oder HTML-Änderung auftritt, solltest du zunächst die zuletzt vorgenommene Änderung rückgängig machen.

Hast du den vorherigen Code gesichert, kannst du den funktionierenden Stand wiederherstellen.

Prüfe anschließend, ob die Website wieder korrekt dargestellt wird.

Ändere nicht gleichzeitig mehrere weitere Bereiche, solange die Ursache noch nicht geklärt ist.

Was tun, wenn eine Funktion nach JavaScript-Code nicht mehr funktioniert? #

Entferne beziehungsweise deaktiviere zunächst den zuletzt hinzugefügten JavaScript-Code und teste die Website erneut.

Wenn die Funktion anschließend wieder arbeitet, liegt ein Zusammenhang mit dem eingefügten Code nahe.

Das bedeutet noch nicht zwingend, dass der Code grundsätzlich fehlerhaft ist. Es kann auch ein Konflikt mit vorhandenen Skripten oder der Art der Einbindung bestehen.

Browser-Konsole für technische Fehlersuche #

Fortgeschrittene Nutzer können bei JavaScript-Problemen die Entwicklerwerkzeuge ihres Browsers verwenden.

Die Browser-Konsole kann Hinweise auf JavaScript-Fehler oder nicht geladene Ressourcen anzeigen.

Diese Meldungen sind jedoch technisch und müssen im jeweiligen Zusammenhang interpretiert werden.

Hinweis für Fortgeschrittene: Eine Fehlermeldung in der Browser-Konsole bedeutet nicht automatisch, dass Kopage selbst die Ursache ist. Der Fehler kann ebenso aus einem externen Script, Widget oder individuell eingefügten Code stammen.

Änderungen im privaten Browserfenster testen #

Wenn du nach einer Codeänderung weiterhin die vorherige Darstellung siehst, kann ein Browser-Cache eine Rolle spielen.

Teste die Seite gegebenenfalls in einem privaten Browserfenster oder auf einem zweiten Gerät.

So kannst du leichter unterscheiden, ob die Änderung grundsätzlich nicht funktioniert oder lediglich eine ältere Version im Browser angezeigt wird.

Eigener Code und Suchmaschinenoptimierung #

Eigener HTML-Code kann die Struktur einer Seite beeinflussen. Fehlerhaftes Markup oder Inhalte, die nur über komplizierte externe Funktionen verfügbar sind, können deshalb auch Auswirkungen auf die technische Qualität einer Website haben.

JavaScript sollte außerdem nicht eingesetzt werden, um einfache Inhalte unnötig kompliziert bereitzustellen, wenn diese problemlos als normaler Seiteninhalt dargestellt werden können.

Die allgemeinen SEO-Grundlagen behandeln wir unter SEO mit Kopage: Seitentitel, Meta-Daten, URLs und Suchmaschinenoptimierung.

Google Analytics nicht über beliebigen Code doppelt einbinden #

Wenn du einen externen Dienst bereits über eine dafür vorgesehene Kopage-Funktion eingebunden hast, solltest du ihn nicht zusätzlich ohne Grund nochmals per eigenem Code integrieren.

Eine doppelte Integration kann unter anderem zu mehrfacher Datenerfassung oder schwer nachvollziehbaren Problemen führen.

Die vorgesehenen Google- und Analytics-Funktionen behandeln wir unter Google, Sitemap, Analytics und Website-Statistiken in Kopage.

Wann sollte ich besser auf eigenen Code verzichten? #

Verzichte auf individuellen Code, wenn du weder dessen Zweck noch die möglichen Auswirkungen nachvollziehen kannst.

Das gilt besonders für umfangreiche JavaScript-Snippets unbekannter Herkunft.

Auch wenn eine gewünschte Funktion bereits mit den normalen Kopage-Werkzeugen umgesetzt werden kann, bringt zusätzlicher Code häufig keinen Vorteil.

Eigener Code sollte dokumentiert werden #

Wenn du mehrere individuelle Anpassungen verwendest, solltest du dokumentieren, wofür sie benötigt werden.

Eine einfache Übersicht kann beispielsweise so aussehen:

Anpassung: Buchungswidget
Quelle: Anbieter des Buchungssystems
Eingefügt für: Terminseite
Zweck: Online-Terminbuchung

Anpassung: individuelles CSS
Zweck: spezielle Darstellung eines Hinweisbereichs
Geändert: August 2026

Eine solche Dokumentation erleichtert spätere Änderungen und die Fehlersuche erheblich.

Code nach Änderungen am externen Dienst prüfen #

Wenn ein eingebundener Dienst seine Konfiguration verändert, solltest du prüfen, ob dein bisheriger Embed-Code weiterhin aktuell ist.

Ersetze vorhandenen Code nicht automatisch durch eine neue Variante, ohne vorher zu kontrollieren, welche Änderungen der Anbieter tatsächlich verlangt.

Vor größeren Änderungen Website sichern #

Bei umfangreicheren Anpassungen ist eine aktuelle Sicherung grundsätzlich sinnvoll.

Das gilt besonders dann, wenn du an einer produktiven Website Änderungen vornimmst, deren Auswirkungen du nicht vollständig abschätzen kannst.

Eine Sicherung ersetzt zwar nicht das sorgfältige Arbeiten, erleichtert aber die Wiederherstellung, falls eine größere Änderung unerwartete Probleme verursacht.

Nach einer Codeänderung vollständig testen #

Kontrolliere nach einer individuellen Anpassung nicht nur den unmittelbar veränderten Bereich.

Ein sinnvoller Test umfasst:

betroffene Seite öffnen
        ↓
Funktion testen
        ↓
weitere wichtige Seiten prüfen
        ↓
Navigation kontrollieren
        ↓
Formulare testen
        ↓
Smartphone prüfen
        ↓
zweiten Browser testen
        ↓
öffentliche Website kontrollieren

Typische Fehler bei eigenem Code #

Zu den häufigsten Problemen gehören Code aus unbekannten Quellen, mehrfach eingefügte Scripts, falsche Einfügepositionen und CSS-Regeln, die unbeabsichtigt mehrere Bereiche verändern.

Auch externe Widgets mit festen Breiten können auf mobilen Geräten Probleme verursachen.

Ein weiterer häufiger Fehler besteht darin, mehrere Änderungen gleichzeitig vorzunehmen. Wenn danach etwas nicht mehr funktioniert, lässt sich kaum feststellen, welche Änderung die Ursache war.

Checkliste vor dem Einfügen von eigenem Code #

Bietet Kopage bereits eine passende Funktion?
        ↓
Ist eigener Code wirklich erforderlich?
        ↓
Ist die Quelle vertrauenswürdig?
        ↓
Verstehe ich den Zweck des Codes?
        ↓
Ist vorhandener Code gesichert?
        ↓
Datenschutz geprüft?
        ↓
Code an der richtigen Stelle eingefügt?
        ↓
öffentliche Website getestet?
        ↓
Smartphone getestet?
        ↓
Änderung dokumentiert?

Wie geht es weiter? #

Individueller Code und externe Einbindungen sollten nicht nur auf einem Desktop-Bildschirm funktionieren.

Gerade bei eigenen Anpassungen ist es wichtig, die Darstellung auf Smartphones und Tablets sorgfältig zu kontrollieren.

Weiter geht es deshalb mit Responsive Design: Kopage Website für Smartphone und Tablet optimieren.

Zusammenfassung #

Der klassische Kopage Website Builder ermöglicht die Verwendung von eigenem HTML-, CSS- und JavaScript-Code für Anforderungen, die über die normalen Builder-Funktionen hinausgehen.

HTML beschreibt Inhalte und Strukturen, CSS beeinflusst die Darstellung und JavaScript ermöglicht zusätzliche dynamische Funktionen.

Verwende individuellen Code nur dann, wenn dafür ein konkreter Grund besteht, und bevorzuge vorhandene Kopage-Funktionen, wenn diese deine Anforderung bereits erfüllen.

Übernimm externe Codes nur aus vertrauenswürdigen Quellen, sichere vorhandene Anpassungen vor Änderungen und berücksichtige bei externen Integrationen auch Performance, Datenschutz und Sicherheit.

Teste Änderungen anschließend auf der veröffentlichten Website und auf unterschiedlichen Geräten.

Eigener Code kann Kopage sinnvoll erweitern. Je individueller die Anpassung wird, desto wichtiger werden jedoch saubere Dokumentation, kontrollierte Änderungen und gründliche Tests.