In dieser Anleitung zeigen wir dir, mit welchen Schritten eine Integration in deine Wix Seite möglich ist.
Wix erlaubt es dir leider nicht, eigene Dateien (in unserem Fall den PushPanda ServiceWorker) in das Root-Verzeichnis hochzuladen. Aber dafür gibt es jetzt ein Lösung und du kannst in ein paar einfachen Schritten PushPanda integrieren.
1. Service Worker hinzufügen
Der Service Worker wird benötigt um Push Nachrichten zu abonnieren und zu empfangen.
Melde dich in deinem Wix Konto an und gehe aufs Wix Dashboard
Klick auf "Webseite & SEO" und dann auf "Webseite bearbeiten"
Es öffnet sich jetzt der Website Editor Velo
Im Editor links auf "Backend & öffentlich" klicken
Im "Backend" Abschnitt eine "Datei hinzufügen" mit dem Namen "http-functions.js"
Im Code-Editor alles löschen und folgenden Code einfügen
import { ok, badRequest } from 'wix-http-functions';
export function get_ServiceWorker(request) {
let options = {
"headers": {
"Content-Type": "application/javascript",
"Service-Worker-Allowed": "/"
},
"body": "importScripts('https://cdn.pushpanda.io/sdk/pp-worker.js');"
};
return ok(options);
}Damit ist der erste Schritt abgeschlossen und der Service Worker in Wix integriert.
Das ganze können wir jetzt testen in dem du folgende Url im Browser aufrufst: https://www.yourdomain.com/_functions/ServiceWorker (bitte www.yourdomain.com mit deiner Domain ersetzen). Jetzt sollte im Browser folgender Text erscheinen:
importScripts('https://cdn.pushpanda.io/sdk/pp-worker.js');
Nachdem wir das jetzt erfolgreich getestet haben, müssen wir jetzt noch den PushPanda SDK Code in der Webseite einbetten.
2. PushPanda Embed-Code in Wix einbauen
Den PushPanda Projekt-ID bekommst du im PushPanda-Backend, unter deinem Projekt im Reiter Allgemein. Bitte kopiere diese.
Zurück bei Wix bitte den Editor verlassen und ins Dashboard wechseln.
Klicke auf "Einstellungen" und dann ganz unten unter Erweitert auf "Benutzerdefinierter Code".
Klicke auf den Button "Benutzerdefinierten Code hinzufügen"
Wähle "Alle Seiten" und "Head" aus und gebe den folgenden Code unter Code-Ausschnitt ein:
<script type="text/javascript" data-cfasync="false">
var _pushpanda = _pushpanda || [];
_pushpanda.push(['_project', 'PROJEKT-ID']);
_pushpanda.push(['_path', '/_functions/']);
_pushpanda.push(['_worker', 'ServiceWorker']);
(function () {
var pushPanda = document.createElement('script');
pushPanda.src = '//cdn.pushpanda.io/sdk/sdk.js';
pushPanda.type = 'text/javascript';
pushPanda.async = 'true';
var push_s = document.getElementsByTagName('script')[0];
push_s.parentNode.insertBefore(pushPanda, push_s);
})();
</script>
Bitte tausche noch im Code PROJEKT-ID mit deiner kopierten PushPanda Projekt-ID aus. Solltest du noch ein Projekt haben, bitte zuerst in der PushPanda-App ein neues Projekt anlegen.
3. PushPanda anpassen und loslegen
Damit haben wir die Wix Integration abgeschlossen und du kannst ab sofort Abonnenten sammeln und Push Nachrichten via PushPanda versenden.
Vergesse bitte nicht davor noch PushPanda Projekt an deine Bedürfnisse anzupassen (Text in den Dialogen, Design, Logo). Klicke dafür im Backend auf Projekte.
Solltest du noch Fragen haben, bitte einfach unseren Support kontaktieren. Wir helfen dir gerne weitern. Und nun viel Erfolg mit deiner Wix-Seite und PushPanda.