SilentChat

Widget auf der Webseite einbinden

Zuletzt aktualisiert: 15. August 2026

Standard-Einbindung (HTML)

Fügen Sie den folgenden Code vor dem schließenden </body>-Tag ein:

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

Ersetzen Sie pk_IHR_WIDGET_KEY durch den Widget-Key Ihres Widgets (zu finden unter Einstellungen → Widgets → Snippet).

Single-Page-Apps (React, Vue, Angular)

Das Script kann auch im <head> platziert werden — es initialisiert sich automatisch, sobald das DOM bereit ist.

React-Beispiel:

// In Ihrer App.js oder Layout-Komponente
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://cdn.silentchat.de/silentchat.min.js';
  script.setAttribute('data-widget-key', 'pk_IHR_WIDGET_KEY');
  script.setAttribute('data-api-url', 'https://api.silentchat.de');
  script.setAttribute('data-ws-url', 'wss://ws.silentchat.de');
  script.async = true;
  document.head.appendChild(script);
  return () => document.head.removeChild(script);
}, []);

Mehrere Widgets auf einer Seite

Wenn Sie mehrere Widgets auf derselben Seite benötigen, verwenden Sie unterschiedliche Public Keys. Jedes Script lädt eine eigene Widget-Instanz.

Content Security Policy (CSP)

Falls Sie eine strikte CSP verwenden, fügen Sie folgende Einträge hinzu:

  • script-src: 'self' cdn.silentchat.de
  • connect-src: 'self' api.silentchat.de wss://ws.silentchat.de

Fehlerbehebung

Widget lädt nicht:

  • Browser-Konsole auf Fehler prüfen (F12 → Console)
  • Ad-Blocker deaktivieren und erneut testen
  • CSP-Header prüfen

Widget erscheint, aber Nachrichten werden nicht gesendet:

  • Prüfen Sie ob die Domain verifiziert ist
  • Prüfen Sie die Browser-Konsole auf Netzwerk-Fehler (F12 → Network)
Widget auf der Webseite einbinden — Help Center — SilentChat | SilentChat