Spendenaktionen mit CSS und Javascript individualisieren

INHALTSVERZEICHNIS

• Gut zu wissen
• SSL-Verschlüsselung
• CSS im Spendenaktions-Tool hinterlegen
• CSS im Spendenformular hinterlegen
• Teaser stylen
• CSS-Beispiele
• Javascript im Spendenaktions-Tool
• JSON-Code

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

• Sie können das Aussehen Ihres Spendenaktions-Tools mithilfe von eigenen CSS-Anweisungen individuell an die Webseite anpassen. Das individuelle Styling ermöglicht Ihnen die größtmögliche Design-Flexibilität.
• Falls Sie die Spendenaktionen auf unterschiedlichen Seiten anteasern möchten, haben Sie auch die Möglichkeit, jeden Teaser ebenfalls mit eigenem CSS individuell zu stylen. 
• Unser Standard-CSS dient Ihnen als Hilfestellung, um IDs und Klassen nach Ihren Vorstellungen zu stylen. Dabei ändern Sie nicht das komplette CSS, sondern nur die gewünschten Stellen.
• Elemente (wie Bilder oder Schriften) nur mit SSL-Verschlüsselung im CSS nutzen.
• Mit eigenem JavaScript und JSON-Code gibt es die Möglichkeit, das Spendenaktions-Tool komplett individuell zu gestalten bzw. programmieren.

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.

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.

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 (CSS) 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 .

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 (CSS) 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.

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. 

CSS-Beispiele

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

Javascript im Spendenaktions-Tool

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-Code) eintragen. 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 %}  

JSON-Code

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.

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.