Spendenaktionen mit CSS und Javascript individualisieren

Zurück zur Startseite

Spendenaktionen mit CSS und Javascript individualisieren

In diesem Artikel erfahren Sie, wie Sie Ihre Spendenaktions-Tools und Teaser-Widgets mithilfe von eigenem CSS und JavaScript stylen können. 

Gut zu wissen

Tipp: Ihre IT-Abteilung oder Agentur kann Ihnen bei Fragen zum Styling weiterhelfen. Bei Bedarf können wir Ihnen gerne Empfehlungen aussprechen.
Diese Funktionen sind nicht in jeder FundraisingBox enthalten

Bei Fragen kontaktieren Sie uns.

SSL-Verschlüsselung

Wenn Sie eigene Elemente wie Bilder oder Schriftarten im CSS verwenden wollen, müssen Sie diese auf einen Server mit SSL-Unterstützung hochladen (oder auf SSL-fähigen Speicherlösungen, wie z.B. AWS S3 oder Cloudfront) und in Ihrem CSS absolut darauf referenzieren.

Hinweis: Webseiten mit Elementen ohne SSL-Verschlüsselung werden vom Browser als unsicher eingestuft.

Da nicht jeder ein SSL-Zerfikat besitzt oder dafür extra kaufen will, haben Sie auch die Möglichkeit die Elemente in Ihrer FundraisingBox hochzuladen.

  1. Klicken Sie auf Account  und wählen Dateien aus.
  2. Wählen Sie Direktlink-Datei aus und laden die Datei(en) hoch.
  3. Der angezeigte Direktlink ist öffentlich zugänglich und kann als Pfad in Ihrem CSS verwendet werden.

CSS im Spendenaktions-Tool hinterlegen

Stylen Sie auf der Basis unserer Standard-CSS-Datei das entsprechende Spendenaktions-Tool mit Ihren gewünschten CSS und evtl. Bildern. Das daraus resultierende CSS geben Sie in den Einstellungen Ihres Spendenaktions-Tools wie unten beschrieben ein. Es wird automatisch als letztes CSS zusätzlich nach allen anderen eingebunden, wodurch Sie alle bisherigen Definitionen überschreiben oder erweitern können.

Hinweis: Kopieren Sie bitte nicht unser komplettes CSS, sondern verändern Sie nur die Stellen, die Sie geändert haben wollen.

  1. Klicken Sie auf Spendenaktionen  und dann auf Einstellungen.
  2. Wählen Sie das gewünschte Spendenaktions-Tool aus.
  3. Unter Design klicken Sie auf Erweiterte Design-Einstellungen anzeigen.
  4. In das Feld für Eigenes Stylesheet kopieren Sie das angepasste (nur die Änderungen) CSS.
  5. Alternativ können Sie ein Häkchen bei Keine Standard-Stylesheets laden setzen. Aktivieren Sie diese Option nur, wenn Sie das Tool komplett von A bis Z selbst stylen möchten.
  6. Klicken Sie anschließend auf speichern .
Tipp: Wenn Sie nachträglich Änderungen an Ihrem CSS vornehmen, sind diese sofort sichtbar.

CSS im Spendenformular hinterlegen

Damit Sie das Spendenformular des Spendenaktions-Tools genauer individualisieren können, bieten wir eine separate Standard-CSS-Datei an. Das Styling des Formulars läuft ähnlich wie bei den regulären Spendenformularen, das Stylesheet muss jedoch bei dem Spendenaktions-Tool hinterlegt werden:

  1. Klicken Sie auf Spendenaktionen  und dann auf Einstellungen.
  2. Wählen Sie das gewünschte Spendenaktions-Tool aus.
  3. Klicken Sie oben auf den Reiter Formular.
  4. Unter Design klicken Sie auf Erweiterte Design-Einstellungen anzeigen.
  5. In das Feld für Eigenes Stylesheet kopieren Sie das angepasste (nur die Änderungen) CSS.
  6. Alternativ können Sie ein Häkchen bei Keine Standard-Stylesheets laden setzen. Aktivieren Sie diese Option nur, wenn Sie das Formular komplett von A bis Z selbst stylen möchten.
  7. Klicken Sie anschließend auf speichern .

Teaser stylen

Wenn Sie den Teaser-Generator verwenden, um Spendenaktionen auf unterschiedlichen Seiten anzuteasern, haben Sie die Möglichkeit jeden erstellten Teaser individuell zu stylen. Hierfür verwenden Sie unsere Standard-CSS-Datei für die Teaser. Die daraus resultierende CSS-Datei laden Sie auf Ihren SSL-verschlüsselten Server bzw. wie oben beschrieben in der FundraisingBox hoch. Bei der Erstellung des Teasers können Sie nun den Link zu Ihrem eigenen CSS eingeben.

Tipp: Standardmäßig wird das CSS vom Haupttool verwendet, sodass Anpassungen für die Teaser nur notwendig sind, wenn diese eine abweichende CSS-Anweisung haben sollten. 
  1. Rufen Sie den Teaser-Generator des gewünschten Spendenaktions-Tools auf.
  2. Unter Code anpassen tragen Sie die URL zu Ihrer eigenen CSS-Datei in das entsprechende Feld ein. 
  3. Der JavaScript-Code wird automatisch ergänzt und Sie können den Code auf die gewünschte Seite einfügen. 

Hinweis: Solange die URL zu der CSS-Datei nicht geändert wird, können Sie Anpassungen an der Datei jederzeit vornehmen, ohne den Teaser erneut einfügen zu müssen.

CSS-Beispiele

Gerne finden Sie einige CSS-Beispiele für das Spendenaktions-Tool in diesem Hilfe-Center Artikel.

Javascript im Spendenaktions-Tool

JavaScript ist nicht in jeder FundraisingBox enthalten

Bei Fragen kontaktieren Sie uns.

Mithilfe des eigenen Javascripts haben Sie nahezu vollen Zugriff auf das Spendenaktions-Tool und können dies ganz nach Ihren Wünschen anpassen. Da Sie mit Javascript auch das HTML verändern können, stehen Ihnen nahezu grenzenlose Möglichkeiten der Individualisierung offen.

Das eigene Javascript können Sie, wie das eigene CSS, in den erweiterten Design-Einstellungen des Spendenaktions-Tools (unter Eigenes JavaScript / HTML / Tracking-Codeeintragen. Die Javascript-Bibliothek jQuery wird standardmäßig bereits geladen und kann verwendet werden.

Es ist möglich, Platzhalter zu verwenden, die dann durch die entsprechenden Werte ersetzt werden. Folgende Platzhalter werden unterstützt:

{{expires_at}}
{{expires_at_de}}
{{has_image}}
{{fundraiser_name}}
{{fundraising_page_title}}
{{description}}
{{days_left}}
{{link}}
{{admin_link}}
{{project_id}}
{{project_name}}
{{category}}
{{status}}
{{organisation_name}}
{{received}}
{{goal}}
{{goal_de}}
{{goal_en}}
{{received_de}}
{{received_en}}
{{salutation}}
{{title}}
{{first_name}}
{{last_name}}
{{full_name}}
{{formal_greeting_de}}
{{salutation_de}}
{{address}}
{{postcode}}
{{city}}
{{country}}
{{country_de}}
{{email}}
{{action_info}}   "new" nach Neuanlage einer Aktion

Soll beispielsweise ein Tracking-Code nur auf der Erfolgsseite eingebaut werden, so ist dies wie folgt möglich:

{% if action_info == "new" %}
// Tracking Code
{% endif %}

Hinweis: Das eigene Javascript sollte nur von erfahrenen Javascript-Programmierern erstellt werden, da ein fehlerhafter Code die Funktionsweise des Spendenaktions-Tools beeinträchtigen könnte.

JSON-Code

Der JSON-Code ist nicht in jeder FundraisingBox enthalten

Bei Fragen kontaktieren Sie uns.

Wenn Sie ein komplett individuelles Spendenaktions-Tool programmieren möchten, dann können Sie dies mithilfe vom JSON-Code realisieren. Mithilfe der JSON-Adresse können Sie sich in Ihrer Programmierung immer die aktuellen Daten zu den Aktionen holen.

Fundraisingbox Tipp: Technische Informationen entnehmen Sie bitte unserer Developer-Zone.
  1. Klicken Sie auf Spendenaktionen  und dann auf Einstellungen.
  2. Bei dem gewünschten Spendenaktions-Tool klicken Sie links auf den Dropdown-Pfeil  und wählen JSON-Adresse aus.
  3. Unter Code anpassen können Sie verschiedene Optionen auswählen, welche die JSON-Adresse entsprechend automatisch anpassen. 
  4. Anschließend können Sie den Code unter JSON-Adresse an die gewünschte Stelle in Ihre Webseite. 
Artikel drucken als PDF exportieren