Einbettung des Spendenformulars auf iFrame-Webseiten

Geändert am: Di, 20 Sep, 2022 um 4:37 NACHMITTAGS

Applicable plans a b c d

In diesem Artikel erfahren Sie, wie Sie unser Spendenformular auf Webseiten und in sogenannten Content-Management-Systemen (CMS) einbetten, die kein JavaScript unterstützen oder iFrames verwenden.

Gut zu wissen

  • Bitte prüfen Sie die Dokumentation des verwendeten CMS im Bezug auf Einbettung von JavaScript-Code und JavaScript-Elementen.
  • Das Support-Team des CMS-Anbieters sollte Sie ebenfalls unterstützen können.
  • Bitte melden Sie sich bei uns, bevor Sie mit der Einbettung starten, damit wir intern die entsprechende Option für CMS ohne JavaScript-Unterstützung freischalten können!

Hinweis: Da die Vorgehensweise komplex ist und gewisse technische Grundkenntnisse voraussetzt, empfehlen wir, dass Sie in diesem Fall eine IT-Person hinzuziehen oder die Aufgabe an diese übergeben.

 

Falls Sie ein CMS-System verwenden, sind dort für die erfolgreiche Einbettung des Spendenformulars möglicherweise zusätzliche Funktionen oder Module nötig, für die weitere Kosten seitens des CMS-Anbieters anfallen können!

Sonderfall WiX.com

Bedingung für die Einbettung des Spendenformulars auf WiX.com-Seiten ist ein spezielles bezahltes Paket bei WiX.com. Nur dort sind verwendete iFrames so gestaltet, dass unsere technische Lösung funktioniert!

Das Paket “Combo” sollte reichen, damit wurde es bereits erfolgreich getestet. Höhere Varianten sollten kein Problem sein.

Bitte beachten Sie folgende Punkte im Zusammenhang mit WiX.com:

  1. Das Laden des FundraisingBox Formulars ist durch diese Lösung etwas langsamer im Vergleich zu der Standard-Einbettung, die bei anderen CMS möglich ist.
  2. Unterhalb des Formulars auf der WiX.com-Seite sollte kein weiterer Text mehr stehen, da die technische Funktion des “Resizings” nicht bei WiX.com genutzt werden kann. Unser Formular kann sich daher nicht automatisch an die zur Verfügung stehende Größe anpassen. Der Websiten-Footer kann weiter genutzt werden, erscheint jedoch gegebenenfalls mit etwas Abstand. Auch das FundraisingBox Logo erscheint gegebenenfalls mit etwas Abstand zum Formular. Dies hängt ebenso damit zusammen.

Vorgehensweise für WiX.com

1. HTML iFrame einbinden

An einer beliebigen Stelle Ihrer Wahl fügen Sie bitte ein neues Element “HTML iFrame” (grüner Kasten) ein. Dort lädt dann später das FundraisingBox Formular:

Wichtig:

  • Der neue Container muss nun so groß gezogen werden, wie das FundraisingBox Formular auch groß ist, damit es zu jeder Zeit hinein passt.
  • Am Besten dies mobil (z.B. über ein Smartphone) wie auch über eine Desktop Anwendung (z.B. Browser am PC) bitte testen.
  • Eine Höhe von 1800-2000 Pixel hat bei internen Tests gut funktioniert. Bitte starten Sie hier mit einem Wert und testen dies im Verlauf der Einbindung dann, ob das Formular gut angezeigt wird.
  • Wichtig ist: Es muss von der maximal möglichen Länge des Formulars ausgegangen werden (z.B. Firmenspende aktivieren, Adressfeld wird mit angezeigt bei Spendenquittungswunsch “ja”, Lastschrift als Zahlungsweise für Felder IBAN, etc und dann das Formular leer absenden => Fehlermeldungen erscheinen und verlängern das Formular zusätzlich).
  • Stellen Sie Ihr Formular daher so lang wie möglich ein und prüfen Sie, ob der Spendenbutton oder andere Angaben nicht abgeschnitten werden in der WiX.com Darstellung. Falls ja, erhöhen Sie den Wert.

Der Name des Containers muss geändert werden, dies geht wie folgt:

  • Über das HTML Feld mit der Maus fahren und via Rechtsklick “view properties” klicken.
  • Dort muss das Feld “ID” auf myHtmlComponent geändert werden. Wenn der grüne Haken erscheint, hat WiX die Änderung gespeichert. Dadurch wurde der Name geändert.

Sollte es für Sie nicht möglich sein die ID zu verändern folgen Sie bitte alternativ dieser Anleitung:

Setzen Sie die “ID” myHtmlComponent bitte direkt im page script ein. Sie finden diese neben dem blauen HTML Kästchen:

2. Code einfügen

Der folgende Code verwendet unsere dynamische Einbettung und muss so über den Button “Edit Code” in den neuen HTML iFrame Container eingefügt werden.

Zwei Anpassungen sind nötig:

%%%%%% = Die Höhe des eingefügten HTML Elements in Pixel (z.B. 2000)

Hinweis: Die Höhe, die hier im HTML-Code angegeben wird, muss geringer sein, als die tatsächliche Höhe des iFrames, dann verschwindet der eigene iFrame-Scrollbalken, weil der quasi nur automatisch aktiv wird, wenn nicht genug Platz ist. Auch hier gilt: Testen, testen, testen.

###### = Der Hash Ihres FundraisingBox Formulars
Ihren Hash finden Sie in Ihren FundraisingBox-Formulareinstellungen unter Einbettungscode. Dort steht in der ersten Zeile Ihr individueller Formular-Hash in der Angabe nach src=...,
Beispiel: src=”https://secure.fundraisingbox.com/app/paymentJS?hash=7erkely9zrzg1b9a
Sie benötigen nur den farblich markierten Teil daraus. Dies ist Ihr Hash.

Bitte fügen Sie Ihre Angaben an den farblichen markierten Stellen entsprechend ein. Kopieren Sie den gesamten Code und fügen diesen via “Edit Code” in Ihren neuen HTML iFrame Container im WiX-System ein.

 
 HTML-Code-Beispiel: 

<!doctype html>
<html>
<head>
<script type="text/javascript">
var fbCustomPageUrl = "";
var fbStartHeight=%%%%%%%;
function loaded () {
// when a message is received from the page code
window.addEventListener("message", receiveFormMessages, false);

// Tell parent we are ready
window.parent.postMessage("loaded", "*");
}
function receiveFormMessages(event) {
let msg = event.data;
if (msg) {
// String from outside
if (typeof msg === 'string' || msg instanceof String)
{
fbCustomPageUrl = msg;
console.log("Parent URL:",msg);
fbScript = document.createElement('script');
fbScript.type = 'text/javascript';
fbScript.src = 'https://secure.fundraisingbox.com/app/paymentJSdynamic?hash=######&containerId=fbDonationFormContainer';
document.getElementById('fbDonationFormContainer').appendChild(fbScript);
window.removeEventListener("message", receiveFormMessages, false);
}
}
}
</script>
</head>
<body onload="loaded();">
<div id="fbDonationFormContainer"></div>
</body>
</html>

3. Corvis-Script

Zur Kommunikation zwischen Ihrer WiX.com Website und dem FundraisingBox Formular benötigen wir nun noch einen Code, der sich der WiX.com API Schnittstelle (genannt Corvis) bedient.
In der Menüleiste auf Dev-Modus klicken und aktivieren.

Bitte öffnen Sie anschließend den Code Editor (grün markiert):

Das gegebenenfalls vorgegebene Script können Sie löschen. Bitte fügen Sie folgendes Script von uns ein:

 
  Corvis-Script-Beispiel:  

import wixLocation from 'wix-location';

$w.onReady(function () {
// when a message is received from the HTML Component
$w("#myHtmlComponent").onMessage((event) => {
console.log(`Event: ${event.data}`);
if (event.data === "loaded") {
console.log(" --> Transfering parent url");
$w("#myHtmlComponent").postMessage(wixLocation.url);
}
});
});

Dies wartet auf die Nachricht “loaded” vom iFrame und sendet dann die aktuelle URL an diesen. Später können Sie die “console.log” Meldungen noch entfernen.

4. Abschluss

WiX.com benötigt gegebenenfalls einige Minuten, um die Änderungen zu akzeptieren und darzustellen. Geben Sie dem System mindestens zehn Minuten Zeit, es kann aber auch schneller gehen.

Anschließend testen Sie bitte die Darstellung sowohl vom Desktop-PC über mehrere verschiedene Browser hinweg und gegebenenfalls sowohl über mehrere Betriebssysteme (z.B. Mac, Windows, etc.) und auch über die mobile Darstellung auf Smartphones und Tablets.

So können Sie prüfen, ob weitere Design-Einstellungen im WiX.com Editor nötig sind, damit auch die mobile Design-Darstellung wie gewünscht passt.


War diese Antwort hilfreich? Ja Nein

Lassen Sie uns bitte wissen, wie wir diesen Beitrag verbessern können.

Weitere Artikel in Formulare konfigurieren

Alle 14 Artikel ansehen