Zum Hauptinhalt springen

PushPanda Integration bei Wix

Implementiere PushPanda in deiner Wix-Seite mit der folgenden Anleitung.

Verfasst von Andreas

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 eine Lösung und du kannst in ein paar einfachen Schritten PushPanda integrieren.

Wix HTTP-Functions funktionieren nur mit einem Wix Premium-Tarif oder höher und einer eigenen Domain.

1. Service Worker hinzufügen

Der Service Worker wird benötigt, um Push Nachrichten zu abonnieren und zu empfangen.

  1. Melde dich in deinem Wix Konto an und gehe aufs Wix Dashboard

  2. Klick auf "Webseite & SEO" und dann auf "Webseite bearbeiten"

  3. Es öffnet sich jetzt der Website Editor Velo

  4. Im Editor links auf "Backend & öffentlich" klicken

  5. Im "Backend" Abschnitt eine "Datei hinzufügen" mit dem Namen "http-functions.js"

  6. 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);
}

Nach dem Speichern in Velo muss die Seite veröffentlicht werden, sonst ist die Funktion nicht live.

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

Die PushPanda Projekt-ID bekommst du im PushPanda-Backend, unter deinem Projekt im Reiter Allgemein. Bitte kopiere diese.

  1. Zurück bei Wix bitte den Editor verlassen und ins Dashboard wechseln.

  2. Klicke auf "Einstellungen" und dann ganz unten unter Erweitert auf "Benutzerdefinierter Code".

  3. Klicke auf den Button "Benutzerdefinierten Code hinzufügen"

  4. 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 kein 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.

Vergiss bitte nicht, davor noch dein PushPanda Projekt 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 weiter. Und nun viel Erfolg mit deiner Wix-Seite und PushPanda.

Hat dies deine Frage beantwortet?