kollekte.app auf der eigenen Seite einbinden

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

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

Bitte beachten Sie bei allen Einbindungen den Datenschutz.

EINBINDEN ALS LINK

Gehen Sie auf https://kollekte.app und wählen Sie dort die gewünschte Gemeinde aus. Nach der Auswahl ändert sich die Adresszeile in Ihrem Browser. Kopieren Sie diesen Link und fügen Sie ihn auf Ihrer Webseite als Link oder als iFrame ein.

Beispiel: Die Evangelische Kirchengemeinde Tiergarten hat folgenden Direktlink:
https://kollekte.app/p/6cc5834c-7f65-479b-b582-361a670aed58

Der HTML-Code dafür ist:
<a href="https://kollekte.app/p/6cc5834c-7f65-479b-b582-361a670aed58">https://kollekte.app</a>

EINBINDEN ALS BUTTON

Das Einbinden von kollekte.app als Button auf Ihrer Internetseite funktioniert ähnlich wie das Einbinden als Link. Folgen Sie bitte den Beschreibungen von weiter oben und nutzen Sie den HTML-Code unter dem Button. Evtl. bietet Ihnen die Verwaltungssoftware Ihrer Website auf eigene Buttons an. Fragen Sie dafür Ihre IT.

Den Text im Button können Sie in der ersten Zeile anpassen. Die Farben sind alle als HEX-Werte hinter „background:“ oder „background-color:“ oder „color:“ angegeben.

Kollekte geben

Code:
<a href="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN" class="kollekteButton">Kollekte geben</a>
<style>
.kollekteButton {
	background:linear-gradient(to bottom, #723288 5%, #8052ab 100%);
	background-color:#62358c;
	border-radius:14px;
	border:1px solid #0b0e07;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Verdana;
	font-size:15px;
	font-weight:bold;
	padding:14px 32px;
	text-decoration:none;
}
.kollekteButton:hover {
	background:linear-gradient(to bottom, #8052ab 5%, #62358c 100%);
	background-color:#8052ab;
	color:#eeeeee;
}
.kollekteButton:active {
	position:relative;
	top:1px;
}
</style>

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

Code:
<div><iframe src="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN?mode=embed" frameBorder="0" style="width:380px; height:440px;"></iframe></div>

MITTIG

Code:
<div style="text-align: center; width: 100%;"><iframe src="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN?mode=embed" frameBorder="0" style="width:380px; height:440px;"></iframe></div>

RECHTSBÜNDIG

Code:
<div style="text-align: right; width: 100%;"><iframe src="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN?mode=embed" frameBorder="0" style="width:380px; height:440px;"></iframe></div>

VOLLE BREITE

Dieses Beispiel nutzt den zur Verfügung stehenden horizontalen Platz auf Ihrer Webseite.

Code:
<div style="width: 100%;"><iframe src="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN?mode=embed" frameBorder="0" style="width:100%; height:440px;"></iframe></div>

Miniatur

Eine besonders kleine Darstellung des Widgets. Die Minimalgröße sollte eine Breite von 300px und eine Höhe von 355px nicht unterschreiten.

Code:
<div><iframe src="HIER_DEN_DIREKTLINK_ZU_IHRER_GEMEINDE_EINTRAGEN?mode=embed" frameBorder="0" style="width:300px; height:355px;"></iframe></div>

Datenschutz

Wenn Sie kollekte.app auf Ihrer Seite einbinden weisen Sie Ihre Besucher in Ihrer Datenschutzerklärung darauf hin. Wir haben Ihnen dafür eine Vorlage erstellt.