Help Center /

HTML/JavaScript in den Designer einbinden

Um eigenen HTML-Code oder eigenes JavaScript in deine Webseite einzubinden, kannst du die zwei dafür vorgesehenen Elemente nutzen:

HTML einbinden

Beachte hierbei, dass eine Bearbeitung der Styles der darin enthaltenen Elemente gar nicht oder nur sehr eingeschränkt möglich ist.

Um eigenen HTML-Code einzubinden, ziehe das HTML-Element an die Stelle, an der du das HTML anzeigen und platzieren möchtest. Klicke anschließend den Button "HTML-Code bearbeiten". Jetzt erscheint der HTML-Editor. Füge hier nun deinen HTML-Code ein und klicke dann auf "Speichern". Jetzt sollte das Ergebnis des HTML-Codes sichtbar sein.

Beachte, das du nach dem ersten Bearbeiten, den HTML-Code nur noch über die Element-Einstellungen des HTML-Elementes bearbeiten kannst, da der Button durch den Code ersetzt und später nicht mehr angezeigt wird.

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.

Um ein Script zu integrieren, ziehe im Designer aus der Sidebar das Javascript-Element an eine beliebige Stelle. Am besten plazierst du es ganz unten, damit es das Layout der Seite nicht stört. Jetzt klickst du den Button "JavaScript bearbeiten" und siehst nun 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 das im Designer machen. Ziehe hierzu wie oben beschrieben das JavaScript-Element in den Canvas hinein. Dann öffne den 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 im JavaScript-Element die Script-Tags ein. Chimpify erkennt diese automatisch und gibt sie auf der Seite an der Stelle des Elements aus. Wichtig hierbei ist, das das komplette Script mit einem Script-Tag beginnt und einem schliessenden Script-Tag endet. Beispiel: