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:
- Navigieren Sie in kollekte.digital zum Reiter „Geräte“.
- Navigieren Sie zu „spende.app“ und klicken Sie auf den Button „EINBINDEN“.
- Mittels der Schieberegler mit den Werten „Höhe“ und „Breite“ im Bereich „Einbinden als iFrame“ können Sie Einstellungen für diese Parameter vornehmen.
- 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
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
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:
Jetzt spenden<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" class="spenden-button rund">Jetzt spenden</a>
einfache Buttons
SPENDEN! Jetzt spenden! Bitte Spenden JETZT SPENDEN!Code-Schnipsel zum Einfügen
gelb
<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>rot
<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>grün
<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>lila
<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!Code-Schnipsel zum Einfügen
gelb
<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="http://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>rot
<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="http://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>grün
<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="http://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>lila
<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="http://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
Code-Schnipsel zum Einfügen
Petrol
<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="http://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
EINBINDEN ALS 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
Code:
<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
Code:
<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
Code:
<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
Sie können Ihre Spendensammlungen in spende.app auch als Liste darstellen. Wenn Sie eine Höhe von mindestens 451 Pixel Höhe (Parameters „Height“), wechselt die Darstellung in eine Liste.
Code:
<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.