# Website Integration

There are various ways to embed donation campaigns into your channels, and no programming skills are needed. This article explains how it works.

## Embedding as a Donation Button

The first way to integrate donation campaigns into your website is by setting up a donation button that you can display wherever you want.

When visitors click on the donation button, the donation page opens in an overlay window. This has the great advantage that donors do not have to leave your website.

To set up a donation button, please follow these steps:

* [Log in](https://login.payrexx.com/en) to your Payrexx account.
* Click on **Donation** in the main menu.
* Click on "Create campaign" or open an existing donation campaign in edit mode.
* Click on the "Embed in website" button (1) and select the "As donation button" option (2):

<div align="left"><figure><img src="https://1455115231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-887967055%2Fuploads%2FRk6kEhuHQdxIaddaNjpg%2Fimage.png?alt=media&#x26;token=10c808d5-821f-45d1-bd32-b6f0bff23f2f" alt=""><figcaption><p>Embedding the donation campaign using a button</p></figcaption></figure></div>

* A new window will open where various settings can be configured. In the upper part of the window (Options for the campaign), you can specify the following:

<div align="left"><figure><img src="https://1455115231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-887967055%2Fuploads%2F2kJOjzAR5aED8nbUD4bD%2Fimage.png?alt=media&#x26;token=d375a46f-34fb-46e4-a2f6-b81a02427466" alt=""><figcaption><p>Configuration of donation page options in the Payrexx backend</p></figcaption></figure></div>

1. **Show description:** Specify whether the description of the donation campaign should be displayed on the website or not.
2. **Preselect donation amount:** Determine whether a specific amount should be pre-selected in the donation form or not.
3. **Default donation interval:** Choose which payment interval should be pre-selected. (The available intervals are those activated in the donation campaign under Payment Information > Donation Interval.)
4. **Language:** Select the language in which the donation campaign should be displayed on the website.

In the lower part of the window, you can configure display settings:

<div align="left"><figure><img src="https://1455115231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-887967055%2Fuploads%2FmAHCTox7UTIswYNTbDUM%2Fimage.png?alt=media&#x26;token=9eb57638-4934-4c58-895e-669142da40a8" alt="" width="362"><figcaption><p>Options for button display</p></figcaption></figure></div>

1. **Color:** Specify the color of the button.
2. **Size:** Set whether the button should be displayed as small, medium, or large.
3. **Text color:** Specify the text color of the button.
4. **Text:** Configure the text that should be displayed on the button.

{% hint style="success" %}
The preview on the right side of the window shows in real-time how the donation button will appear on the website.
{% endhint %}

To embed the button on the website, simply copy the HTML code in the lower left corner of the window and paste it into the desired location on your website.

## Embedding as an iFrame

Another way to display a donation campaign on your website is by embedding it using an iFrame. This method displays the entire donation form directly on the website, not just a button.

1. [Log in](https://login.payrexx.com/en) to your Payrexx account.
2. Click on **Donation** in the main menu.
3. Click on "Create campaign" or open an existing donation campaign in edit mode.
4. Click on the "Embed in website" button (1) and select the "As donation form (iFrame)" option (2):

<div align="left"><figure><img src="https://1455115231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-887967055%2Fuploads%2Fm8u04BfQG3CKNpxDDvBr%2Fimage.png?alt=media&#x26;token=6232c963-2db6-4318-b99a-094e1a84325b" alt=""><figcaption><p>Embedding the donation campaign using an iFrame</p></figcaption></figure></div>

* A new window will open where various settings can be configured:

<div align="left"><figure><img src="https://1455115231-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MYJhU4qriZCz_Wxs0T0-887967055%2Fuploads%2FEJOXkGPBfwG1KymcDYB0%2Fimage.png?alt=media&#x26;token=5fd7aec6-518b-4246-83aa-40f7e749bc75" alt="" width="432"><figcaption><p>Options for displaying the donation form on the website</p></figcaption></figure></div>

1. **Show description:** Specify whether the description of the donation campaign should be displayed on the website or not.
2. **Preselect donation amount:** Determine whether a specific amount should be pre-selected in the donation form or not.
3. **Default donation interval:** Choose which payment interval should be pre-selected. (The available intervals are those activated in the donation campaign under Payment Information > Donation Interval.)
4. **Language:** Select the language in which the donation campaign should be displayed on the website.
5. **Code snippet:** To embed the form using an iFrame, simply copy the HTML code in the lower left corner of the window and paste it into the desired location on your website.

#### Restricted display of certain payment methods

When you integrate the payment page using an iFrame, the following payment methods will not be displayed: [PostFinance Pay](https://docs.payrexx.com/merchant/english/payment-provider/payrexx-pay/payment-methods/postfinance-pay), [REKA](https://docs.payrexx.com/merchant/english/payment-provider/payrexx-pay/payment-methods/reka), and [Coinbase](https://docs.payrexx.com/merchant/english/payment-provider/external-payment-provider/wallets-and-more/coinbase).

To work around this, simply add the string ***breakIframe=1*** to the iFrame URL. This will redirect the customer out of the iFrame, allowing them to complete the payment as usual.

{% hint style="danger" %}
Please note that Apple Pay cannot be displayed when the payment page is embedded via iFrame.
{% endhint %}

For additional technical support on embedding via iFrame, refer to our [developer documentation](https://docs.payrexx.com/developer).

## Advanced Embedding Options

In addition to embedding a [button](#embedding-as-a-donation-button) or an [iFrame](#embedding-as-an-iframe), there are further options for integrating a donation campaign:

Defining custom URL parameters and embedding the donation campaign using self-created widgets on the website that are linked to the campaign. The URL parameters are available for all views (direct call, embedding as iFrame, modal window).

The following article provides an overview of the available URL parameters.

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