SPChat Logo SPCHAT.EU
Livedemo
EN
Installation

Installation & Einrichtung

Installieren Sie SPChat in 5 Minuten auf Ihrem Shared-Hosting. Download aus dem Kundencenter, PHP 8.2+, MySQL. Kein VPS oder Root-Zugriff erforderlich.

Live-Demo jetzt testen Zu den Integrationsschritten

Systemvoraussetzungen

SPChat läuft auf fast jedem Shared-Hosting-Paket.

PHP 8.2+
pdo_mysql, mbstring, json, fileinfo, curl
MySQL / MariaDB
InnoDB · utf8mb4
Apache, Nginx oder LiteSpeed
Rewrite auf public/index.php
Speicherplatz
für Anwendung, Uploads und optionale Module
Schritt für Schritt

Installation in 5 Minuten

1

SPChat herunterladen

Den Download finden Sie im STREAMPANEL-Kundencenter. SPCast-Kunden finden ihn ebenfalls dort. Einfach das ZIP-Paket herunterladen und entpacken.

Kundencenter, Meine Produkte, Bei SPChat auf Produktverwaltung öffnen klicken, Download
2

Dateien hochladen

Laden Sie alle Dateien per FTP auf Ihren Webserver. Das Verzeichnis public/ muss der Document-Root sein. Bei den meisten Hostern erfolgt das über den Dateimanager in cPanel oder Plesk, oder über einen FTP-Client wie FileZilla.

3

Datenbank anlegen

Legen Sie über cPanel, Plesk oder phpMyAdmin eine leere MySQL-Datenbank mit einem dedizierten Benutzer an. Notieren Sie die Zugangsdaten für Schritt 4.

4

Webinstaller starten

Rufen Sie /install/ in Ihrem Browser auf. Der Installer prüft die PHP-Erweiterungen, konfiguriert die Datenbank, führt Migrationen durch und legt den ersten Admin-Account an.

https://deine-domain.de/install/
5

Fertig. SPChat ist live.

Nach der Installation können Sie sich direkt einloggen. Unter /admin/ richten Sie Räume ein, laden Benutzer ein und konfigurieren SMTP, GIPHY, Custom CSS und mehr.

Integration

SPChat in Website und OBS einbinden

Die öffentliche Chat-URL ist der Ausgangspunkt. Sie lässt sich verlinken, bei passender Frame-Richtlinie einbetten oder in OBS als Browser-Quelle laden.

Chat mit einer externen Website verbinden

SPChat lässt sich über einen Chat-Link, ein iframe oder die integrierten Widgets einbinden. Nutzen Sie zum Beispiel Chatbox, Online-Liste, Raumübersicht, Statistik oder Nachrichtenticker.

  1. Öffentliche Chat-URL festlegen

    Nutzen Sie eine HTTPS-Adresse unter Ihrer lizenzierten Domain, zum Beispiel https://chat.mein-radio.de/. Öffnen Sie die Adresse zuerst direkt im Browser und prüfen Sie Anmeldung, Räume und mobile Darstellung.

  2. Chat-Link auf der Website setzen

    Platzieren Sie den Link in Navigation, Player oder Sendungsseite. Ein neuer Tab hält Website und Chat technisch sauber getrennt.

    <a href="https://chat.mein-radio.de/" target="_blank" rel="noopener">Community-Chat öffnen</a>

  3. iframe oder Chat-Widget einbinden

    Für den Hauptchat steuern security.allow_iframe und security.x_frame_options die Einbettung. Die Beispielkonfiguration erlaubt externe Einbettungen. Die Widget-Endpunkte benötigen widgets.enabled. Prüfen Sie die Einstellungen Ihrer Installation vor der Einbindung.

    <iframe src="https://chat.mein-radio.de/widget/chatbox" title="Community-Chat" width="1200" height="800" loading="lazy"></iframe>

  4. Einbettung im privaten Fenster testen

    Prüfen Sie Anmeldung, Abmeldung, Raumwechsel, Dateiupload und die Darstellung auf Smartphone und Desktop. Blockiert der Browser das iframe, kontrollieren Sie Content-Security-Policy und X-Frame-Options der Chat-Domain.

Wichtig: Widgets werden über /widget/ bereitgestellt, etwa /widget/online, /widget/rooms und /widget/ticker. JavaScript-Loader sind unter den zugehörigen .js-Adressen verfügbar. Halten Sie die eigenständige Chatansicht zusätzlich erreichbar.

Chat in OBS Studio als Overlay anzeigen

OBS Studio kann eine Webadresse als Browser-Quelle laden. Dafür ist kein eigenes SPChat-Plug-in nötig. Für die Sendung sollte ein separates Benutzerkonto ohne Moderationsrechte verwendet werden.

  1. Browser-Quelle anlegen

    Öffnen Sie die gewünschte Szene, wählen Sie bei den Quellen das Pluszeichen und dann Browser. Geben Sie der Quelle einen eindeutigen Namen, zum Beispiel SPChat Overlay.

  2. Chat-URL und Größe eintragen

    Tragen Sie die öffentliche Chat-URL ein. Stellen Sie Breite und Höhe passend zur Szene ein, etwa 480 mal 900 Pixel für eine schmale Chatspalte.

  3. Overlay optisch reduzieren

    Nutzen Sie das Custom-CSS-Feld von OBS für einen transparenten Hintergrund. Weitere Anpassungen nehmen Sie mit dem Custom CSS im SPChat-Adminbereich vor. Verwenden Sie nur Selektoren, die Sie an Ihrer Installation geprüft haben.

    body { background: transparent; overflow: hidden; }

  4. Verbindungsverhalten festlegen

    Deaktivieren Sie in OBS die Option zum Beenden der Quelle, wenn sie nicht sichtbar ist, falls der Chat beim Szenenwechsel verbunden bleiben soll. Aktivieren Sie das Neuladen beim Szenenwechsel nur, wenn ein frischer Seitenstart gewünscht ist.

  5. Testaufnahme prüfen

    Senden Sie Testnachrichten und kontrollieren Sie Schriftgröße, Kontrast, Zuschnitt und längere Nutzernamen. Prüfen Sie das Ergebnis auch bei schneller Nachrichtenfolge.

Wichtig: Die Browser-Quelle und ihr Custom-CSS-Feld sind Funktionen von OBS Studio. Details stehen in der offiziellen OBS-Dokumentation.

SPChat vor der Einrichtung ansehen

Testen Sie Oberfläche und Chatfluss in der Live-Demo. Auf der Preisseite finden Sie Hosted-Chat und Downloadlizenz.

Live-Demo jetzt testen Eigenen Chat auswählen