Widget einbetten

Diese Seite richtet sich an die Person, die die Gastgeber-Seite betreut. Voraussetzung ist ein Kampagnenlink mit aktiviertem Widget und eine freigegebene Domain, siehe Spenden-Widget und Erlaubte Domains.

Der Einbettungscode

Den fertigen Code findest du im Admin unter Fundraising-Hub → Kampagnenlinks → Kampagnenlink öffnen → Widget (Einbettung) → Einbettungscode. Ein Klick auf Code kopieren legt ihn in die Zwischenablage.

<div data-soulclick-widget data-campaign-id="pk_widget_..."></div>
<script src="https://deine-plattform.ch/static/js/soulclick-widget.min.js?v=1" defer></script>

Der Wert von data-campaign-id (pk_widget_...) ist der öffentliche Schlüssel des Kampagnenlinks. Er ist kein Passwort und darf im Quelltext stehen, siehe Erlaubte Domains.

Optionale Attribute

Alle Attribute werden auf dem <div> gesetzt und sind freiwillig.

<div data-soulclick-widget
     data-campaign-id="pk_widget_..."
     data-lang="fr"
     data-payment-type="recurring"
     data-interval="3"
     data-amount="25"></div>

Vorauswahl über die Adresse der Seite

Wird die Gastgeber-Seite mit diesen Parametern aufgerufen, gelten sie für genau diesen Besuch und haben Vorrang vor den Attributen im Code:

https://beispiel.org/spenden/?scw-amount=25&scw-payment_type=recurring&scw-interval=3

So übergibst du z.B. von einem Spenden-Teaser auf deiner eigenen Webseite, Informationen wie Spendenbeträge und Intervalle ans Widget weiter.

Eine Vorauswahl kann nur unter den Optionen wählen, die im Kampagnenlink konfiguriert wurden. Unbekannte Werte werden ignoriert oder im Fall von Spendenbeträgen ans Freibetrag-Feld weitergeben. Es wird keine Fehlermeldung ausgegeben.

Mehrere Widgets auf einer Seite

Mehrere <div>-Platzhalter auf derselben Seite sind erlaubt, auch mit unterschiedlichen Kampagnenlinks. Das <script> wird trotzdem nur einmal eingebunden.

Bei Zahlungen mit Weiterleitung kann die Erfolgsmeldung nach der Rückkehr beim falschen Formular erscheinen. Wo das stört, bettest du pro Seite nur ein Widget ein.

Widget später einbinden

Erscheint das Formular erst nach einer Aktion, zum Beispiel in einem Popup oder in einer Single-Page-Anwendung, wird es per Aufruf eingebunden:

SoulclickWidget.run("#spenden", {
  campaignId: "pk_widget_...",
  lang: "de",
  onResult: (detail) => console.log(detail),
});

Ergebnis der Spende auswerten

Nach Abschluss meldet das Widget das Ergebnis an die Gastgeber-Seite. Damit lassen sich eigene Dankestexte einblenden oder Tracking-Ereignisse auslösen.

document
  .querySelector("[data-soulclick-widget]")
  .addEventListener("soulclick:donation", (event) => {
    console.log(event.detail); // { state, orderId }
  });

Zusätzlich meldet das Widget soulclick:ready, sobald das Formular bereit ist, und soulclick:error, wenn es nicht geladen werden konnte.

Alternativ kann eine Rückrufmethode gesetzt werden, entweder pro Widget über onResult im Aufruf oben oder global über window.soulclickWidget = { onResult: (detail) => {} }.

Soll die spendende Person stattdessen auf eine eigene Dankesseite geleitet werden, trägst du diese im Admin unter Success-Weiterleitung ein.

Content-Security-Policy

Setzt die Gastgeber-Seite eine strikte Content-Security-Policy, müssen folgende Quellen erlaubt sein, sonst wird das Formular nicht geladen. <soulclick-origin> steht für die Adresse deiner Plattform.

script-src  'self' <soulclick-origin> https://js.stripe.com;
style-src   'self' <soulclick-origin> 'unsafe-inline' https://fonts.googleapis.com;
connect-src 'self' <soulclick-origin> https://api.stripe.com;
frame-src   https://js.stripe.com https://hooks.stripe.com;
img-src     'self' <soulclick-origin> data:;
font-src    <soulclick-origin> <medien-origin> https://fonts.gstatic.com;

Verwendet deine Plattform eine hochgeladene Schriftart, wird diese von der Medienablage ausgeliefert. Deren Adresse (<medien-origin>) muss dann ebenfalls unter font-src stehen. Bei Payrexx sind keine weiteren Einträge nötig, weil die Zahlung auf der Seite von Payrexx stattfindet.

Wenn das Widget deaktiviert ist

Bleibt der Code auf der Gastgeber-Seite stehen, nachdem das Widget oder der Kampagnenlink deaktiviert wurde, erscheint an dieser Stelle einfach nichts. Besuchende sehen keine Fehlermeldung, in der Entwicklerkonsole steht ein Hinweis.

Fehlerbehebung