Zum Hauptinhalt gehen

Wie baue ich einen Spendenbutton auf meiner Homepage ein?

Aktualisiert

Spenden leicht gemacht: Integriere einen Spendenbutton auf deiner Webseite

Mache es den Besucher*innen deiner Webseite so einfach wie möglich, dein auf betterplace.org registriertes Projekt zu unterstützen! Mit unseren Spendenbuttons bietest du eine direkte und sichtbare Möglichkeit, zum Spendenformular zu gelangen.

Wir bieten dir zwei verschiedene Arten von Spendenbuttons, die du auf deiner Homepage einbinden kannst:

Option 1: Der Overlay-Spendenbutton – Immer im Blick

Dieser Button wird meist dezent am Rand deiner Webseite permanent angezeigt (z.B. als schwebendes Element) und ist daher immer sichtbar, egal wo sich der*die Nutzer*in gerade auf der Seite befindet. Bei einem Klick öffnet sich unser Spendenformular direkt als "Overlay" (eine Art Pop-up) über deiner Seite, ohne dass der*die Nutzer*in deine Webseite verlassen muss.

Vorteile:

  • Hohe Sichtbarkeit und ständige Präsenz.
  • Besonders nutzerfreundlich in der mobilen Ansicht.
  • Direkter Zugriff auf das Spendenformular ohne Seitenwechsel.
  • Anpassbares Design (Farbe, Position).

Hinweise:

  • Die Website / das Content-Management-System (CMS), das du verwendest, muss es erlauben, HTML-Code und JavaScript-Code einzufügen und auf der Seite auszuführen.
  • Die Einbindung externer Elemente ist datenschutzrelevant. Informiere dich hier: Was muss ich beim Einbinden von iframes beachten?

So richtest du den Overlay-Spendenbutton ein:

  1. Logge dich auf betterplace.org ein.
  2. Gehe zum Administrationsbereich und wähle das gewünschte Projekt.
  3. Klicke im Projektmenü auf "Widget & Button" und dann auf den Reiter "Overlay Spendenbutton" oder nutze diesen Direktlink: Overlay-Spendenbutton konfigurieren.
  4. Passe das Aussehen und die Position des Buttons nach deinen Wünschen an.
  5. Kopiere den generierten HTML-Code.
  6. Füge den Code in den HTML-Quelltext deiner Webseite ein (hinter dem body Tag im übergeordneten Layout (Theme). Nur so wird der Button wirklich überall angezeigt.).

Beispiel eines Overlay-Spendenbuttons von betterplace.org, der am rechten Rand einer Webseite schwebt.

Option 2: Der kleine Spendenbutton – Kompakt und vielseitig

Dieser klassische Spendenbutton ist kleiner und eignet sich hervorragend für die Integration in Seitenleisten, Footer-Bereiche oder direkt im Inhalt deiner Webseite neben Projektinformationen. Bei Klick auf diesen Button werden die Nutzer*innen zur Projektseite auf betterplace.org weitergeleitet, wo sie spenden können.

Vorteile:

  • Flexibel an verschiedenen Stellen deiner Webseite platzierbar.
  • Leitet zur ausführlichen Projektseite weiter, wo Nutzer*innen mehr Details finden.

So bindest du den kleinen Spendenbutton ein:

  1. Logge dich auf betterplace.org ein.
  2. Gehe zum Administrationsbereich und wähle das gewünschte Projekt.
  3. Klicke im Projektmenü auf "Widget & Spendenbutton" oder nutze diesen Direktlink: Spendenbutton-Code abrufen.
  4. Auf dieser Seite findest du unterhalb des Projekt-Widgets auch den Code für den kleineren Spendenbutton.
  5. Kopiere den HTML-Code.
  6. Füge ihn an der gewünschten Stelle im HTML-Quelltext deiner Webseite ein.

Beispiel eines kleinen, rechteckigen Spendenbuttons von betterplace.org mit dem Text 'Jetzt spenden'.

Wichtige Hinweise für beide Button-Typen:

  • Englische Version: Falls benötigt, wechsle bitte die Anzeigesprache deines betterplace.org-Profils, bevor du den Code generierst (im Footer der Seite rechts auf "English" klicken oder über diesen Link zum englischen Administrationsbereich).
  • Technische Integration: Die genaue Methode der Code-Einbettung kann je nach deinem Webseitensystem (CMS, Baukasten) variieren.

Nutze diese einfachen Werkzeuge, um die Spendenbereitschaft deiner Webseiten-Besucher*innen zu erhöhen!

Verknüpfung mit

Verwandte Beiträge