So installieren Sie das Papo-Chat-Widget auf einer statischen HTML-Website

Vitor

Vitor

Zuletzt aktualisiert am Oct 27, 2026

Um das Chat-Widget von Papo (https://papo.global/) in eine statische HTML-Website einzubauen, kopieren Sie das im Dashboard generierte Snippet und fügen Sie es direkt im Quellcode vor dem Tag </body> auf allen Seiten ein, auf denen der Support angezeigt werden soll. Die Anpassung von Farben und der Willkommensnachricht erfolgt vollständig im Dashboard, ohne das HTML zu ändern.

Schritt Aktion Detail
1. Posteingang erstellen Gehen Sie zu Einstellungen → Posteingänge → Posteingang hinzufügen → Website. Geben Sie einen Namen ein und die URL der Website an (nur zur Identifizierung verwendet).
2. Snippet kopieren Das Dashboard generiert einen exklusiven <script>-Block. Kopieren Sie den gesamten angezeigten Code.
3. In HTML einfügen Öffnen Sie die Datei der Website und fügen Sie das Snippet unmittelbar vor dem schließenden </body> ein. Wiederholen Sie dies auf jeder Seite, auf der der Chat erscheinen soll. Wenn Sie ein Template verwenden, fügen Sie es in den gemeinsamen Footer ein.
4. Farben und Nachricht anpassen Passen Sie im Dashboard die Hauptfarbe an und schreiben Sie eine proaktive Begrüßung. Die Änderungen wirken sich automatisch auf das Widget aus, ohne dass Sie den Code ändern müssen.
5. Agenten zuordnen Fügen Sie im selben Posteingang mindestens einen Agenten hinzu. Ohne Agenten werden die Gespräche nicht weitergeleitet und das Widget wird möglicherweise nicht geladen.
6. Testen Rufen Sie die Website auf, prüfen Sie, ob das Chat-Symbol erscheint, und senden Sie eine Nachricht. Das Testgespräch erscheint im Posteingang von Papo und bestätigt die Lead-Erfassung.

So installieren Sie das Widget in einer statischen HTML-Website

  1. Erstellen Sie den Posteingang vom Typ Website
    Gehen Sie im Papo-Dashboard zu Einstellungen → Posteingänge, klicken Sie auf Posteingang hinzufügen und wählen Sie Website. Geben Sie einen Namen (z. B. „Chat der Website“) und die URL der Website an (sie beeinträchtigt die Funktion nicht, hilft nur, den Kanal zu identifizieren). Es ist nicht notwendig, ein Plugin zu installieren; der Prozess ist für jede Website gleich, die HTML-Dateien ausliefert.

  2. Kopieren Sie das generierte Snippet
    Nach dem Erstellen des Posteingangs zeigt das Dashboard einen exklusiven JavaScript-Code an. Kopieren Sie den gesamten Block <script>...</script>.

  3. Fügen Sie das Snippet in das HTML ein
    Öffnen Sie die HTML-Datei der Seite (zum Beispiel index.html) und fügen Sie den Code unmittelbar vor dem Tag </body> ein. Tun Sie dies auf jeder Seite, auf der Sie den Chat anzeigen möchten. Wenn die Website eine gemeinsame Footer- oder Header-Datei verwendet (über include oder PHP), aktiviert das Hinzufügen des Snippets in dieser einen Datei das Widget bereits auf der gesamten Website.

    Beispiel für die Positionierung im Code:

    <body>
      <!-- Inhalt der Seite -->
      <script src="https://app.papo.global/..."></script>
    </body>
    

    Es sind keine Backend-Kenntnisse erforderlich; das Widget läuft im Browser des Besuchers.

  4. Ordnen Sie Agenten dem Posteingang zu
    Kehren Sie zum Dashboard zurück, gehen Sie zum selben Posteingang und fügen Sie mindestens einen Agenten hinzu. Ohne einen verknüpften Agenten bleibt der Posteingang ohne Betreuer und das Widget wird möglicherweise nicht angezeigt. Wenn Sie nur einen Agenten haben, erfolgt die Zuordnung automatisch; wählen Sie in Teams die verantwortlichen Mitglieder aus.

Anpassung von Farben und Willkommensnachricht

Nachdem Sie das Snippet eingefügt haben, können Sie das Erscheinungsbild des Widgets anpassen, ohne den Code zu ändern:

  • Hauptfarbe: Wählen Sie im Dashboard in den Einstellungen des Posteingangs die Farbe, die zur visuellen Identität der Website passt. Die Änderung wird sofort übernommen.
  • Willkommensnachricht: Aktivieren Sie die proaktive Begrüßung und schreiben Sie einen Text, der nach einigen Sekunden automatisch erscheint. Wirksame Beispiele: „Hallo! Wie können wir helfen?“ oder „Brauchen Sie Hilfe mit Ihrer Bestellung?“.

Diese Optionen sind am selben Ort verfügbar, an dem Sie den Posteingang erstellt haben. Jede Änderung wird auf das Widget angewendet, ohne dass Sie ein neues Snippet kopieren müssen.

So testen Sie die Lead-Erfassung

  1. Öffnen Sie die Website in einem Inkognito-Fenster (um den Cache zu vermeiden) und prüfen Sie, ob das Chat-Symbol in der Ecke des Bildschirms erscheint.
  2. Klicken Sie auf das Symbol und senden Sie eine Testnachricht (zum Beispiel „Ich möchte mehr Informationen“).
  3. Rufen Sie im Papo-Dashboard den Posteingang der Website auf und bestätigen Sie, dass das Gespräch erscheint. Der Kontakt wird automatisch im CRM registriert, und Sie können über das Dashboard antworten.

Wenn die Nachricht nicht ankommt, prüfen Sie, ob das Snippet vor dem </body> steht, ob der Posteingang aktiv ist und ob mindestens ein Agent zugeordnet ist. Skriptblocker können das Laden verhindern; testen Sie auch ohne aktive Erweiterungen.

Für wen ist es geeignet

  • Statische HTML-Websites ohne CMS (WordPress, Shopify), die einen professionellen Chat benötigen.
  • Landing Pages und Portfolios, bei denen schneller Kontakt die Conversion erhöht.
  • Entwickler, die das Widget testen, bevor sie es in größere Plattformen integrieren.
  • Kleine Unternehmen, die eine einfache Website betreiben und Leads erfassen möchten, ohne komplexe Systeme zu installieren.

Häufig gestellte Fragen

Brauche ich einen Backend-Server, um das Widget zu verwenden?

Nein. Das Widget basiert auf JavaScript, das im Browser ausgeführt wird. Fügen Sie einfach das Snippet in das HTML ein, und der Chat funktioniert.

Muss das Snippet auf allen Seiten kopiert werden?

Ja, auf jeder Seite, auf der der Chat erscheinen soll. Wenn Ihre Website eine gemeinsame Footer-Datei verwendet, aktiviert das einmalige Einfügen des Snippets dort das Widget auf der gesamten Website.

Kann ich die Farben nach der Installation anpassen?

Ja, Änderungen an Farbe und Text der Willkommensnachricht werden im Papo-Dashboard vorgenommen und erscheinen automatisch im Widget, ohne dass Sie den Code ändern müssen.

Was tun, wenn das Widget nicht auf der Website erscheint?

Prüfen Sie, ob das Snippet vor dem </body> eingefügt ist, ob der Posteingang aktiv ist und zugeordnete Agenten hat und ob es keine Skriptblocker im Browser gibt. Das Leeren des Website-Caches hilft ebenfalls.

Muss ich das Snippet für jede andere Website neu erstellen?

Ja. Jeder Posteingang generiert ein exklusives Skript. Wenn Sie mehrere Domains haben (z. B. Unternehmenswebsite und separate Landing Page), erstellen Sie für jede einen Posteingang und verwenden Sie das jeweilige Snippet.

Beeinträchtigt das Widget die Leistung der Website?

Das Laden erfolgt asynchron und blockiert das Rendern der Seite nicht. Die Widget-Datei ist leicht und wird nur bei Bedarf geladen.

Lesen Sie auch


Kostenlos starten →

Der erste Nutzer ist für immer kostenlos — Sie können das Papo-Widget in wenigen Minuten auf Ihrer statischen Website installieren, ohne Kreditkarte, und sofort mit der Lead-Erfassung beginnen.