# Webseiten-Integration

Für die Einbindung von Spendenkampagnen in Deine Kanäle gibt es verschiedene Möglichkeiten. Programmierkenntnisse sind dafür nicht notwendig. Im vorliegenden Artikel erfährst Du, wie es funktioniert.

## Einbindung als Spenden-Button

Die erste Möglichkeit, Spendenkampagnen in Deine Webseite einzubinden, ist die Einrichtung eines Spenden-Buttons, den Du anzeigen kannst, wo immer Du möchtest.

Klickt der Besucher auf den Spendenbutton, öffnet sich die Spendenseite in einem überlagerten Fenster. Dies hat den grossen Vorteil, dass der Spender Deine Webseite nicht verlassen muss.

Um einen Spenden-Button einzurichten, gehe bitte wie folgt vor:

* [Logge](https://login.payrexx.com/) Dich in Dein Payrexx-Konto ein.
* Klicke im Hauptmenü auf **Donation**.
* Klicke auf "Spendenseite erstellen" oder öffne eine bestehende Spendenseite im Bearbeitungsmodus.
* Klicke auf den Button "In Webseite einbinden" (1) und wähle die Option "Als Spenden-Button" (2):

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FUsaSGHAO1W6CHN1OoxGx%2Fimage.png?alt=media&#x26;token=7160a85b-3cf2-4d79-b076-3b1c031aadac" alt=""><figcaption><p>Einbinden der Spendenkampagne mittels Button</p></figcaption></figure></div>

* Es öffnet sich ein neues Fenster, in dem diverse Einstellungen vorgenommen werden können.\
  Im oberen Teil des Fensters (Optionen für die Spendenseite) kannst Du Folgendes festlegen:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FPzhWPfNGUcb2M0E43eRY%2Fimage.png?alt=media&#x26;token=534ce8b2-3e5f-491c-b437-2882c600d7e3" alt=""><figcaption><p>Konfiguration der Optionen für die Spendenseite im Backend von Payrexx</p></figcaption></figure></div>

1. **Kampagnenbeschreibung anzeigen:** Festlegen, ob die Beschreibung der Spendenkampagne auf der Webseite angezeigt werden soll oder nicht
2. **Spendenbetrag vorauswählen:** Festlegen, ob im Spendenformular ein bestimmter Betrag vorausgewählt sein soll oder nicht
3. **Standard-Zahlungsintervall:** Auswählen, welches Zahlungsintervall vorausgewählt sein soll\
   (es stehen die Intervalle zur Verfügung, die in der Spendenkampagne unter\
   **Zahlungsinformationen > Spendenintervall** aktiviert wurden)
4. **Sprache:** Auswahl, in welcher Sprache die Spendenkampagne auf der Webseite angezeigt werden soll

Im unteren Teil des Fensters können Einstellungen zur Darstellung vorgenommen werden:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FFMEJHp1ZZbAsz1fxEcWb%2Fimage.png?alt=media&#x26;token=c53f101a-1b54-44e5-84bf-c1ec5c4584a4" alt="" width="494"><figcaption><p>Optionen für die Darstellung des Buttons</p></figcaption></figure></div>

1. **Farbe:** Festlegen, in welcher Farbe der Button dargestellt werden soll
2. **Grösse:** Einstellen, ob der Button klein, mittel oder gross dargestellt werden soll
3. **Textfarbe:** Festlegen der Textfarbe des Buttons
4. **Textfeld:** Konfiguration des Textes, der auf dem Button angezeigt werden soll

{% hint style="success" %}
Die Vorschau im rechten Teil des Fensters zeigt in Echtzeit an, wie der Spendenbutton auf der Webseite aussehen wird.
{% endhint %}

Um den Button in die Webseite einzubinden, muss lediglich der HTML-Code links unten im Fenster kopiert und auf der Webseite an der Stelle eingefügt werden, an der der Button angezeigt werden soll.

## Einbindung als iFrame

Eine weitere Möglichkeit zum Anzeigen einer Spendenkampagne auf Deiner Webseite ist die Einbindung mittels iFrame. Dabei wird auf der Webseite nicht nur ein Button, sondern direkt das gesamte Spendenformular angezeigt.

* [Logge](https://login.payrexx.com/) Dich in Dein Payrexx-Konto ein.
* Klicke im Hauptmenü auf **Donation**.
* Klicke auf "Spendenseite erstellen" oder öffne eine bestehende Spendenseite im Bearbeitungsmodus.
* Klicke auf den Button "In Webseite einbinden" (1) und wähle die Option\
  "Als komplette Kampagne (iFrame)" (2):

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FmCzmOWFXromck5pXi4jL%2Fimage.png?alt=media&#x26;token=cb1b76ca-7988-4a44-bcd0-3a75e463263d" alt=""><figcaption><p>Einbinden der Spendenkampagne mittels iFrame</p></figcaption></figure></div>

* Es öffnet sich ein neues Fenster, in dem diverse Einstellungen vorgenommen werden können:

<div align="left"><figure><img src="https://3244062149-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-543259558%2Fuploads%2FZirGjImk9r87iAVlKpnn%2Fimage.png?alt=media&#x26;token=74a3aca4-ba85-46fd-b53d-ca303f95d0fc" alt="" width="440"><figcaption><p>Optionen für die Darstellung des Spendenformulars auf der Webseite</p></figcaption></figure></div>

1. **Kampagnenbeschreibung anzeigen:** Festlegen, ob die Beschreibung der Spendenkampagne auf der Webseite angezeigt werden soll oder nicht
2. **Spendenbetrag vorauswählen:** Festlegen, ob im Spendenformular ein bestimmter Betrag vorausgewählt sein soll oder nicht
3. **Standard-Zahlungsintervall:** Auswählen, welches Zahlungsintervall vorausgewählt sein soll (es stehen die Intervalle zur Verfügung, die in der Spendenkampagne unter\
   **Zahlungsinformationen > Spendenintervall** aktiviert wurden)
4. **Sprache:** Auswahl, in welcher Sprache die Spendenkampagne auf der Webseite angezeigt werden soll
5. **Code:** Um das Formular mittels iFrame in die Webseite einzubinden, muss lediglich der HTML-Code links unten im Fenster kopiert und auf der Webseite an der Stelle eingefügt werden, an der das Formular angezeigt werden soll.

#### Eingeschränkte Anzeige gewisser Zahlungsarten

Wenn Du die Zahlungsseite mittels iFrame einbindest, werden die Zahlungsarten [PostFinance Pay](https://docs.payrexx.com/merchant/bezahldienste/payrexx-pay/zahlungsmittel/postfinance-pay), [REKA](https://docs.payrexx.com/merchant/bezahldienste/payrexx-pay/zahlungsmittel/reka) und [Coinbase](https://docs.payrexx.com/merchant/bezahldienste/externe-zahlungsanbieter/wallets-and-alternative/coinbase) nicht angezeigt.

Um dies zu umgehen, füge der iFrame-URL einfach den String ***breakIframe=1*** hinzu. Dadurch wird der Kunde aus dem iFrame hinausgeleitet, wo er die Zahlung ganz normal durchführen kann.

{% hint style="danger" %}
Bitte beachtet, dass Apple Pay nicht angezeigt werden kann, wenn die Bezahlseite mittels iFrame eingebunden wird.
{% endhint %}

Weitere technische Unterstützung für das Einbinden via iFrame findest Du in unserer [Entwickler-Dokumentation](https://developers.payrexx.com/docs/website-iframe).

## Erweiterte Einbindungsmöglichkeiten

Neben der Einbindung eines [Buttons](#einbindung-als-spenden-button) oder eines [iFrames](#einbindung-als-iframe) gibt es weitere Möglichkeiten,\
eine Spendenkampagne einzubinden:

Definition eigener URL-Parameter und Einbindung der Spendenkampagne mittels selbst erstellter Widgets auf der Webseite, die mit der Kampagne verlinkt sind. Die URL-Parameter sind für alle Ansichten verfügbar. (Direkter Aufruf, Einbindung als iFrame, modales Fenster).&#x20;

Der folgende Artikel gibt einen Überblick über die verfügbaren URL-Parameter.&#x20;

{% content-ref url="../parameter" %}
[parameter](https://docs.payrexx.com/merchant/payrexx-administration/tools/parameter)
{% endcontent-ref %}