spende.app auf der eigenen Seite einbinden

/

,

Sie können spende.app auf unterschiedliche Weisen verwenden: Wenn Sie Besucher lediglich von Ihrer Seite zu spende.app weiterleiten möchten, wählen Sie Einbinden als Link oder Einbinden als Button. Wenn Besucher spende.app direkt auf Ihrer Seite benutzen können sollen, wählen Sie Einbinden als iFrame.

Nehmen Sie den Direktlink Ihrer Organisation in spende.app und fügen Sie ihn auf Ihrer Webseite als Link oder als iFrame ein. Sie finden ihn in der Adresszeile Ihres Browsers oder in kollekte.digital unter Geräte, spende.app.

Wenn Sie spende.app über kollekte.digital einbinden möchten, gehen Sie wie folgt vor:

  1. Navigieren Sie in kollekte.digital zum Reiter „Geräte“.
  2. Navigieren Sie zu „spende.app“ und klicken Sie auf den Button „EINBINDEN“.
  3. Mittels der Schieberegler mit den Werten „Höhe“ und „Breite“ im Bereich „Einbinden als iFrame“ können Sie Einstellungen für diese Parameter vornehmen.
  4. Binden Sie spende.app über den Direktlink oder über den unten stehenden HTML-Code auf Ihrer Webseite ein.

Bei der Einbindung können Sie für spezifische Spendenzwecke Direktlinks setzen.

Bitte beachten Sie bei allen Einbindungen den Datenschutz.

Einbinden als Link

Beispiel: Die Kirche St. Johannis zu Hamburg-Eppendorf hat folgenden Direktlink:

https://spende.app/o/89b7bae5-c635-4d4b-bcba-b0762186cb67

Einbinden als Button

Das Einbinden von spende.app als Button auf Ihrer Internetseite funktioniert ähnlich wie das Einbinden als Link. Hier sind einige Beispiele, Sie können Sie aber weiter individualisieren:

einfache Buttons

SPENDEN! Jetzt spenden! Bitte Spenden JETZT SPENDEN!
<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" class="spenden-button" style="text-decoration: none; color: #ffffff; background-color: #D7C548; padding: 10px 20px; border-radius: 5px; font-weight: bold; display: inline-block;">SPENDEN!</a>
<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" class="spenden-button" style="text-decoration: none; color: #ffffff; background-color: #AE364B; padding: 10px 20px; border-radius: 75%; display: inline-block;">Jetzt spenden!</a>
<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN " class="spenden-button" style="text-decoration: none; color: #ffffff; background-color: #57B469; padding: 10px 20px; border-radius: 10%; display: inline-block;">Bitte Spenden</a>
<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN " class="spenden-button" style="text-decoration: none; color: #ffffff; background-color: #554193; padding: 10px 20px; border-radius: 5px; display: inline-block;">JETZT SPENDEN!</a>

Buttons mit Icon und Schrift

SPENDEN! SPENDEN! SPENDEN! SPENDEN!
<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" class="spenden-button" style="text-decoration: none; color: #ffffff; background-color: #D7C548; padding: 10px 20px; border-radius: 5px; font-weight: bold; display: inline-flex; align-items: center;">
  <span style="margin-right: 5px;">SPENDEN!</span>
<svg xmlns="https://www.w3.org/2000/svg" height="24" fill="currentColor" viewBox="0 -960 960 960" width="24"> <path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"></path></svg>
</a>
<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" class="spenden-button" style="text-decoration: none; color: #ffffff; background-color: #AE364B; padding: 10px 20px; border-radius: 5px; font-weight: bold; display: inline-flex; align-items: center;">
  <svg xmlns="https://www.w3.org/2000/svg" height="24" fill="currentColor" viewBox="0 -960 960 960" width="24"> <path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"></path></svg>
<span style="margin-right: 5px;">SPENDEN!</span>
</a>
<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" class="spenden-button" style="text-decoration: none; color: #ffffff; background-color: #57B469; padding: 10px 20px; border-radius: 5px; font-weight: bold; display: inline-flex; align-items: center;">
  <span style="margin-right: 5px;">SPENDEN!</span>
<svg xmlns="https://www.w3.org/2000/svg" height="24" fill="currentColor" viewBox="0 -960 960 960" width="24"><path d="M640-440q-46-42-89.5-82.5t-77-79.5Q440-641 420-677.5T400-748q0-56 38-94t94-38q32 0 60 13.5t48 36.5q20-23 48-36.5t60-13.5q56 0 94 38t38 94q0 34-20 70.5T806.5-602Q773-563 730-522.5T640-440Zm0-108q59-56 109.5-111.5T800-748q0-23-14.5-37.5T748-800q-14 0-26.5 5.5T700-778l-60 72-60-72q-9-11-21.5-16.5T532-800q-23 0-37.5 14.5T480-748q0 33 50.5 88.5T640-548ZM560-60l-280-78v58H40v-440h318l248 92q33 12 53.5 42t20.5 66h80q50 0 85 33t35 87v40L560-60ZM120-160h80v-280h-80v280Zm438 16 238-74q-3-11-13.5-16.5T760-240H568q-31 0-56-4t-54-14l-69-24 23-76 80 26q18 6 42 9t66 3q0-11-6.5-21T578-354l-234-86h-64v220l278 76ZM200-300Zm400-20Zm-400 20Zm80 0Zm360-374Z"></path></svg>
</a>
<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" class="spenden-button" style="text-decoration: none; color: #ffffff; background-color: #554193; padding: 10px 20px; border-radius: 5px; font-weight: bold; display: inline-flex; align-items: center;">
 <svg xmlns="https://www.w3.org/2000/svg" height="24" fill="currentColor" viewBox="0 -960 960 960" width="24"><path d="M640-440q-46-42-89.5-82.5t-77-79.5Q440-641 420-677.5T400-748q0-56 38-94t94-38q32 0 60 13.5t48 36.5q20-23 48-36.5t60-13.5q56 0 94 38t38 94q0 34-20 70.5T806.5-602Q773-563 730-522.5T640-440Zm0-108q59-56 109.5-111.5T800-748q0-23-14.5-37.5T748-800q-14 0-26.5 5.5T700-778l-60 72-60-72q-9-11-21.5-16.5T532-800q-23 0-37.5 14.5T480-748q0 33 50.5 88.5T640-548ZM560-60l-280-78v58H40v-440h318l248 92q33 12 53.5 42t20.5 66h80q50 0 85 33t35 87v40L560-60ZM120-160h80v-280h-80v280Zm438 16 238-74q-3-11-13.5-16.5T760-240H568q-31 0-56-4t-54-14l-69-24 23-76 80 26q18 6 42 9t66 3q0-11-6.5-21T578-354l-234-86h-64v220l278 76ZM200-300Zm400-20Zm-400 20Zm80 0Zm360-374Z"></path></svg>
 <span style="margin-right: 5px;">SPENDEN!</span>
</a>

Button nur mit Icon

<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" class="spenden-button-icon-large" style="text-decoration: none; color: #ffffff; background-color: #015F8C; padding: 30px; border-radius: 5px; display: inline-flex; align-items: center;">
  <svg xmlns="https://www.w3.org/2000/svg" height="80" fill="#ffffff" viewBox="0 -960 960 960" width="80" stroke-width="1">
    <path d="M640-440q-46-42-89.5-82.5t-77-79.5Q440-641 420-677.5T400-748q0-56 38-94t94-38q32 0 60 13.5t48 36.5q20-23 48-36.5t60-13.5q56 0 94 38t38 94q0 34-20 70.5T806.5-602Q773-563 730-522.5T640-440Zm0-108q59-56 109.5-111.5T800-748q0-23-14.5-37.5T748-800q-14 0-26.5 5.5T700-778l-60 72-60-72q-9-11-21.5-16.5T532-800q-23 0-37.5 14.5T480-748q0 33 50.5 88.5T640-548ZM560-60l-280-78v58H40v-440h318l248 92q33 12 53.5 42t20.5 66h80q50 0 85 33t35 87v40L560-60ZM120-160h80v-280h-80v280Zm438 16 238-74q-3-11-13.5-16.5T760-240H568q-31 0-56-4t-54-14l-69-24 23-76 80 26q18 6 42 9t66 3q0-11-6.5-21T578-354l-234-86h-64v220l278 76ZM200-300Zm400-20Zm-400 20Zm80 0Zm360-374Z"></path>
  </svg>
</a>

Einbinden als iFrame

Was ist ein iFrame?

Hinweis für WordPress: Um die folgenden Beispiele in WordPress zu verwenden, wählen Sie den Block „Individuelles HTML“ und fügen dort die Codebeispiele ein.

Fügen Sie Ihren Direktlink (siehe oben) an die Stelle von „HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN“ ein.

LINKSBÜNDIG

<div style="text-align: left; width: 100%;"><iframe src="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" style="width:385px; height:285px;" frameborder="0"></iframe></div>

MITTIG

<div style="text-align: center; width: 100%;"><iframe src="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" style="width:385px; height:285px;" frameborder="0"></iframe></div>

RECHTSBÜNDIG

<div style="text-align: right; width: 100%;"><iframe src="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" style="width:385px; height:285px;" frameborder="0"></iframe></div>

LISTENANSICHT

<div style="text-align: right; width: 100%;"><iframe src="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" style="width:385px; height:600px;" frameborder="0"></iframe></div>

Datenschutz

Bitte weisen Sie Ihre Besucher in der Datenschutzerklärung darauf hin, wenn Sie spende.app auf Ihrer Seite einbinden. Hier ein möglicher Textvorschlag.