SilentChat

Widget-Installation

Das SilentChat-Widget ist ein leichtgewichtiger JavaScript-Snippet, der eine Live-Chat-Schaltfläche zu Ihrer Website hinzufügt. Die Installation dauert weniger als fünf Minuten und erfordert keinen Build-Schritt.

Wählen Sie die Anleitung, die zu Ihrer Plattform passt:

Einfaches HTML

Melden Sie sich beim SilentChat-Dashboard an und gehen Sie zu Chat-Systeme → Widgets.

<script
  src="https://cdn.silentchat.de/silentchat.min.js"
  data-widget-key="YOUR_KEY"
  data-api-url="https://api.silentchat.de"
  data-ws-url="wss://ws.silentchat.de"
  async
></script>

Der Snippet lädt das Widget asynchron, sodass das Seitenrendering nicht blockiert wird.

WordPress

Am einfachsten mit unserem kostenlosen Plugin (WordPress ab 6.3, PHP ab 7.4):

  1. Laden Sie das Plugin als ZIP herunter und spielen Sie es unter Plugins → Neues Plugin hinzufügen → Plugin hochladen ein. Aktivieren Sie es.
  2. Tragen Sie unter Einstellungen → SilentChat Ihren Widget-Schlüssel ein (beginnt mit pk_) und speichern Sie.
  3. Fertig. Auf Wunsch blenden Sie den Chat auf einzelnen Seiten aus oder laden ihn erst beim Klick.

Plugin herunterladen (ZIP) ↓

Ohne Plugin geht es mit einem Header-/Footer-Plugin:

  1. Installieren Sie in Ihrer WordPress-Verwaltung ein Header-/Footer-Plugin, z. B. WPCode (früher „Insert Headers and Footers“), und öffnen Sie dessen Einstellungen für Kopf- und Fußbereich.
  2. Fügen Sie den Snippet in den Fußbereich (Footer) ein.
<!-- SilentChat Widget -->
<script
  src="https://cdn.silentchat.de/silentchat.min.js"
  data-widget-key="YOUR_KEY"
  data-api-url="https://api.silentchat.de"
  data-ws-url="wss://ws.silentchat.de"
  async
></script>
  1. Speichern Sie. Das Widget erscheint auf allen Seiten.

Den Snippet direkt in die footer.php Ihres Themes einzufügen funktioniert ebenfalls, geht aber beim nächsten Theme-Update verloren, wenn Sie kein Child-Theme verwenden.

Shopify

  1. Gehen Sie in Ihrer Shopify-Verwaltung zu Online-Shop → Themes und klicken Sie auf Aktionen → Code bearbeiten.
  2. Öffnen Sie theme.liquid und suchen Sie das schließende </body>-Tag.
  3. Fügen Sie den Snippet direkt vor </body> ein und klicken Sie auf Speichern.
<script
  src="https://cdn.silentchat.de/silentchat.min.js"
  data-widget-key="YOUR_KEY"
  data-api-url="https://api.silentchat.de"
  data-ws-url="wss://ws.silentchat.de"
  async
></script>
  1. Das Widget erscheint auf allen Seiten Ihres Shopify-Shops, einschließlich der Kasse (sofern Ihr Plan benutzerdefinierte Skripte unterstützt).

React

Verwenden Sie für React-Anwendungen die sc()-API, um das Widget nach dem Mounten der Komponente zu initialisieren.

import { useEffect } from 'react';


function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.silentchat.de/silentchat.min.js';
    script.setAttribute('data-widget-key', 'YOUR_KEY');
    script.setAttribute('data-api-url', 'https://api.silentchat.de');
    script.setAttribute('data-ws-url', 'wss://ws.silentchat.de');
    script.async = true;
    document.body.appendChild(script);


    return () => {
      document.body.removeChild(script);
    };
  }, []);


  return <>{/* your app content */}</>;
}

Fügen Sie <ChatWidget/> zu Ihrem Root-Layout oder der App-Komponente hinzu.

Vue

Die Vorgehensweise für Vue ist dieselbe wie bei React: Fügen Sie den Basis-Snippet zu Ihrer HTML-Datei hinzu und initialisieren Sie das Widget über eine Komponente.

<script setup>
import { onMounted, onUnmounted } from 'vue';


let scriptEl = null;


onMounted(() => {
  scriptEl = document.createElement('script');
  scriptEl.src = 'https://cdn.silentchat.de/silentchat.min.js';
  scriptEl.setAttribute('data-widget-key', 'YOUR_KEY');
  scriptEl.setAttribute('data-api-url', 'https://api.silentchat.de');
  scriptEl.setAttribute('data-ws-url', 'wss://ws.silentchat.de');
  scriptEl.async = true;
  document.body.appendChild(scriptEl);
});


onUnmounted(() => {
  if (scriptEl) {
    document.body.removeChild(scriptEl);
  }
});
</script>

Google Tag Manager

  1. Erstellen Sie in GTM ein neues Tag und wählen Sie Benutzerdefiniertes HTML als Tag-Typ.
  2. Fügen Sie den vollständigen Installations-Snippet (einschließlich des init-Aufrufs) in das HTML-Feld ein.
  3. Setzen Sie den Trigger auf Alle Seiten (oder einen spezifischen Seiten-Trigger, falls erforderlich).
<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://cdn.silentchat.de/silentchat.min.js';
    s.setAttribute('data-widget-key', 'YOUR_KEY');
    s.setAttribute('data-api-url', 'https://api.silentchat.de');
    s.setAttribute('data-ws-url', 'wss://ws.silentchat.de');
    s.async = true;
    document.body.appendChild(s);
  })();
</script>
  1. Speichern und veröffentlichen Sie den Container.

GTM fügt Skripte asynchron ein. Das Widget lädt korrekt, kann jedoch etwas später erscheinen als bei einer direkten HTML-Installation.

Installation überprüfen

  • Öffnen Sie Ihre Website in einem Browser — die SilentChat-Schaltfläche sollte in der Ecke der Seite erscheinen.
  • Senden Sie eine Testnachricht. Sie sollte in Ihrem SilentChat-Dashboard unter Unterhaltungen erscheinen.
  • Öffnen Sie die Browser-Entwicklerkonsole und bestätigen Sie, dass keine Fehler von silentchat angezeigt werden.

Wenn das Widget nicht erscheint, überprüfen Sie, ob Ihre Domain unter Einstellungen → Widgets → Erlaubte Domains aufgeführt ist.

Sprachnachrichten: Berechtigung auf Ihrer Website

Sprachnachrichten brauchen das Mikrofon des Besuchers. Wenn Ihre Website einen Permissions-Policy-Header sendet, der das Mikrofon nicht erlaubt, fragt der Browser den Besucher gar nicht erst — der Aufnahmeknopf erscheint, tut aber nichts. In der Browser-Konsole steht dann „Permissions policy violation: microphone is not allowed in this document". Erlauben Sie das Mikrofon Ihrer eigenen Seite:

Permissions-Policy: microphone=(self)

Sendet Ihre Website gar keinen Permissions-Policy-Header, ist nichts zu tun: Ohne Header gilt bereits „nur die eigene Seite darf", und das genügt. Die Einstellung betrifft ausschließlich Sprachnachrichten — ohne sie funktioniert das Widget vollständig, nur eben ohne Aufnahme.

So sehen Sie, was Ihre Seite aktuell sendet:

curl -sI https://ihre-domain.de | grep -i permissions-policy

Läuft das Widget in einem iframe, muss das umgebende Dokument die Berechtigung zusätzlich an den Rahmen weiterreichen:

<iframe src="..." allow="microphone"></iframe>
Widget-Installation | SilentChat