Help Center /

HTML/JavaScript in einen Beitrag einbinden

Wenn du eigenes JavaScript oder eigenen HTML-Code in einen Beitrag einbinden möchtest, kannst du dies mit dem Content-Editor ganz einfach erledigen.

HTML einbinden

Um HTML einzubinden, kannst du die ganz normale HTML-Funktion des Editors nutzen. Wechsele hierzu im Editor in den Tab "HTML" und füge das HTML an der Stelle ein, wo du es angezeigt haben möchtest:

Javascript einbinden

Wenn du eigenes JavaScript nutzen möchtest, steht dir in Chimpify die Library jQuery in der Version 1.12 zur Verfügung. Natürlich kannst du auch reines JavaScript wie gewohnt verwenden.

JavaScript kannst du genau wie ein Bild im Inhalt des Editors einfügen. Drücke hierzu die Eingabetaste. Jetzt erscheint ein grauer Kreis mit einem Kreuz, den du anklicken musst. Klicke anschließend auf das Icon für Javascript:

Nun siehst du einen Editor, in dem du den Javascript-Code bearbeiten kannst.

Wenn du jQuery nutzen möchtest, ist es wichtig, das der Code erst ausgeführt wird, wenn jQuery geladen ist. Für bessere Performance laden wir jQuery und andere JavaScripts erst am Ende der Seite. Damit dein Code erst danach ausgeführt wird, nutze bitte folgende Vorlage, die beim ersten Öffnen des Editors bereits integriert ist:

var Chimpify = Chimpify || [];
Chimpify.push(function () {

// Hier deinen jQuery Code einfügen

});

jQuery ist hier wie gewohnt mit dem Dollarzeichen $ oder der Variable jQuery verfügbar.

Externes Javascript einbinden

Möchtest du ein JavaScript aus einer externen Datei einbinden, kannst du auch dies wie oben beschrieben machen. Klicke auf das graue JavaScript-Icon, um ein JavaScript einzufügen. Es öffnet sich der Editor. Jetzt hast du zwei Möglichkeiten:

Ist dein Script abhängig von jQuery, solltest du es auch erst laden, wenn jQuery geladen ist. Nutze hierfür wie bereits beschrieben, die Vorlage des JavaScript-Elementes und unsere loadJS-Funktion, die folgende Syntax hat:

this.loadJS( url [, callback ] )

Die URL ist die URL des externen Javascriptes, Callback ist eine Funktion, die ausgeführt wird, sobald das Script geladen ist. Ein Beispiel:

var Chimpify = Chimpify || [];
Chimpify.push(function () {

  this.loadJS("https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.8/typed.min.js", function() {
    console.log("typed.min.js loaded! You can use it here now.");
  });

});

Die zweite Möglichkeit besteht darin, das externe Script wie gewohnt über Script-Tags einzufügen. Hierfür fügst du die Script-Tags im Editor ein. Chimpify erkennt diese automatisch und gibt sie auf der Seite an der Stelle des Platzhalters aus. Wichtig hierbei ist, das das komplette Script mit einem Script-Tag beginnt und einem schliessenden Script-Tag endet. Beispiel: