HTML oder JavaScript im Builder einbinden

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

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 in ein Template zu integrieren, ziehe im Builder 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 Builder machen. Ziehe hierzu wie oben beschrieben das JavaScript-Element in dein Template 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:

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.8/typed.min.js"></script>

HTML einbinden

Natürlich kannst du auch eigenes HTML auf deiner Chimpify-Webseite einbinden. Beachte hierbei, dass dann eine Bearbeitung der Styles der darin enthaltenen Elemente gar nicht oder nur sehr eingeschränkt möglich ist.

Um eigenen HTML-Code in dein Template eizubinden, ziehe das HTML-Element an die Stelle, an der du das HTML im Template 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 im Template sichtbar sein. 

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

© 2012-2018 by Chimpify UG (haftungsbeschränkt)