Spendenaktionen mit CSS und Javascript individualisieren

Zurück zur Startseite

Spendenaktionen mit CSS und Javascript individualisieren

Sie können das Aussehen Ihres Spendenaktions-Tools mit Hilfe von eigenen CSS-Anweisungen individuell an die Webseite anpassen. Das individuelle Styling ermöglicht Ihnen die größtmögliche Design-Flexibilität.

Beachten Sie bitte, dass Spendenaktions-Tools nicht in jeder FundraisingBox enthalten sind. Weitere Informationen entnehmen Sie bitte unserer Preiseseite.

Ablauf
Sie stylen auf der Basis unseres jetzigen HTML/CSS das entsprechende Spendenaktions-Tool mit Ihren gewünschten CSS und Bildern. Kopieren Sie bitte nicht unser komplettes CSS, sondern verändern Sie nur die Stellen, die Sie geändert haben wollen. Unser CSS sollte nur als Hilfestellung für die IDs und Klassen dienen, welche Sie auch z.B. mit Hilfe von Firebug für den Firefox herausfinden können.

Die URL zur Spendenaktion-CSS-Datei ist:
https://secure.fundraisingbox.com/fundraisingPage/css/style.css

Das daraus resultierende CSS geben Sie in den  Design-Einstellungen Ihres Spendenaktions-Tools ein. Es wird automatisch als letztes CSS zusätzlich nach allen anderen eingebunden, wodurch Sie alle bisherigen Definitionen überschreiben oder erweitern können.

Wenn Sie nachträglich Änderungen an Ihrem CSS vornehmen, sind diese sofort sichtbar. Möchten Sie nicht das bestehende Design-Template nutzen und lieber alles von Anfang an selbst stylen, aktivieren Sie in den Einstellungen die Option "Keine Standard-Stylesheets laden".

SSL-Verschlüsselung
Die Spendenaktions-Tools werden mit SSL-Verschlüsselung ("https”) ausgeliefert. Wenn Sie eigene Elemente wie Bilder oder Schriftarten verwenden wollen, müssen Sie diese ebenfalls 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. Wenn Sie Elemente ohne SSL-Verschlüsselung nutzen, dann erkennt der Browser die Seite nicht mehr als abgesichert an.

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. Gehen Sie auf Einstellungen > Mein Kundenkonto und dort zum Reiter Dokumente & Dateien. Wählen Sie nun "Direktlink-Datei" aus und laden Sie die Dateien hoch.

Normalerweise sind hier hochgeladene Dateien von außen nicht sichtbar und zugreifbar, bei diesen Dateien sehen Sie nun aber einen sogenannten "Direktlink", der die Datei durch einen "Key" öffentlich zugänglich macht. Diese HTTPS-Adresse können Sie nun als Pfad in Ihrem CSS verwenden.

CSS-Beispiele
Beachten Sie bitte dazu unseren separten Hilfe-Center Artikel mit CSS-Beispielen .

Javascript
Mit Hilfe 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 unter Einstellungen > Spendenaktions-Tools im Bereich Design 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 Erfolgseite eingebaut werden, so ist dies wie folgt möglich:

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

Bitte beachten Sie, dass das eigene Javascript nur von erfahrenen Javascript-Programmierern erstellt werden sollte, da ein fehlerhafter Code die Funktionsweise des Spendenaktions-Tools beeinträchtigen könnte.

JSON-Code
Wenn Sie selbst ein komplett individuelles Spendenaktions-Tool erstellen möchten, dann können Sie dies mit Hilfe vom JSON-Code realisieren. JSON ist ein allgemein gültiger Standard im Internet, der von allen Programmiersprachen gut verarbeitet werden kann. Mit Hilfe der angezeigten Adresse können Sie sich in Ihrer Programmierung immer die aktuellen Daten zu den Aktionen holen.

Einstellungen nehmen Sie unter Einstellungen > Spendenaktions-Tools > JSON-Adresse vor.

Technische Informationen entnehmen Sie bitte unserer Developer-Zone:
https://developer.fundraisingbox.com/v1.0/docs/fundraising-page-json-api

Hinweis
: Die Funktion "Javascript” und "JSON-Code” sind nicht in jeder FundraisingBox verfügbar.

Artikel drucken als PDF exportieren

Sie haben Verbesserungsvorschläge für diesen Artikel?

Vollständiger Name
E-Mail-Adresse
Sicherheitscode Security Code