# Chat-Modul

Wünschen Sie einen Chat für Fragen zum Inhalt Ihres Livestream? Der Chat erlaubt die Möglichkeit der Interaktion der Zuschauer mit Ihnen und untereinander! Das Chat Modul lässt sich an jeder Position Ihrer Webseite einfügen (iFrame) und passt sich responsive der gewünschten Breite und Höhe an.  
  
Schauen Sie sich im folgenden gerne unsere Dokumentation an:

# Chat-Features & Screenshots

#### [![1200x400px-Chatmodul_Zeichenfläche-1.jpeg](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/eKL92n2sRoE2I84w-1200x400px-Chatmodul_Zeichenfla%CC%88che-1.jpeg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/eKL92n2sRoE2I84w-1200x400px-Chatmodul_Zeichenfla%CC%88che-1.jpeg)

#### Funktionsumfang des Chat-Moduls

Einfache Handhabung und smartes Design. Nutzer können "chatten" und sich austauschen.

**Aus Sicht des Besuchers:**

- Der Besucher kann ein Nutzername angeben und sich einloggen
- Damit die Ablenkung zum Livestream nicht zu groß wird, können Nutzer nur alle 3-7 Sekunden eine neue Nachricht senden und erhalten die Nachrichten der anderen Zuschauer.
- Mehrsprachig! Die Sprache ist auf Deutsch und Englisch einstellbar.
- Umfragen können beantwortet werden.
- Emojis support.

**Aus Sicht des Admins:**

- Extra login Link für den Admin (mehrere Admins möglich)
- Der gewählte Admin-Nutzername ist rot hervorgehoben
- Umfragen erstellen, freigeben (posten), auswerten, und bei Bedarf die Ergebnisse direkt im Chat veröffentlichen
- Sie können einzelne Nutzerbeiträge oder auch den gesamten Chat löschen
- Die gesamte Chat-Sitzung mit allen Anfragen im Anschluß speichern

**Zusätzliche Funktionen (Parameter):**

- Der Chat merkt sich den Nutzernamen, Spracheinstellungen, Aktivität (Nutzer aktiv oder inaktiv). Dies erfolgt durch ein Session-Cookie im Einklang mit dem deutschen Datenschutz (DSGVO, notwendig für die Nutzung des Chat).
- Vorgabe eines gewünschten Nutzernamen (gesteuert von Ihrer Webseite) für z.B. angemeldete Nutzer.
- Übergeben eines weiteren Wertes (zusätzlich zum angezeigten Namen) wie zum Beispiel eine Kundennummer oder E-Mail Adresse.
- Eine eigene CSS-Datei für Farb- und Layoutsteuerung kann dem iFrame übergeben werden.
- Da der Safari-Browser keine Cookies in einem iFrame erlaubt, wurde hierfür ein Workaround entwickelt, der leider nur teilweise funktioniert. Wir arbeiten an einer Lösung.
- Es kann auch Überschrift "Chatmodul" und der Platzhalter "Ihr Name (Nickname)" per Parameter angepasst werden.

**Screenshots:**

[![Chat_Besucher_01.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/5dinmGb0DRMbEUb0-chat-uebersicht-landingpage.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/5dinmGb0DRMbEUb0-chat-uebersicht-landingpage.jpg)

[![Chat_Besucher_03.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/8N1c3u7Afc5RL2F8-chat-uebersicht-landingpage2.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/8N1c3u7Afc5RL2F8-chat-uebersicht-landingpage2.jpg)

[![Chat_Handy_Besucher_01.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/nZSGMagZj2Xp3ub6-Chat_Handy_Besucher_01.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/nZSGMagZj2Xp3ub6-Chat_Handy_Besucher_01.jpg)[![Chat_Handy_Besucher_02.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/wV6tBfPjhebvrfh6-Chat_Handy_Besucher_02.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/wV6tBfPjhebvrfh6-Chat_Handy_Besucher_02.jpg)

[![admin-umfage.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/CILuvCROSYq21yv8-admin-umfage.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/CILuvCROSYq21yv8-admin-umfage.jpg)

[![admin-umfage-managen.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/fgUtgO32fHG5gXlr-admin-umfage-managen.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/fgUtgO32fHG5gXlr-admin-umfage-managen.jpg)

[![admin-umfrage-liste.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/rQum0C1Y7RydBHdd-admin-umfrage-liste.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/rQum0C1Y7RydBHdd-admin-umfrage-liste.jpg)

[![admin-umfage-ergebnisse.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/52m6Ks7mYVjepFW4-admin-umfage-ergebnisse.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/52m6Ks7mYVjepFW4-admin-umfage-ergebnisse.jpg)

[![besucher-umfrage.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/7oekIZBFrY6Un4Zo-besucher-umfrage.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/7oekIZBFrY6Un4Zo-besucher-umfrage.jpg)

[![besucher-umfrage-ergenisse.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/scaled-1680-/g5gNaGSYDhhv6PCx-besucher-umfrage-ergenisse.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2020-08/g5gNaGSYDhhv6PCx-besucher-umfrage-ergenisse.jpg)

# Einbindung des Chats in eine bestehende Homepage

**Kurzanleitung:**  
Sie können den Chat per iFrame auf Ihrer Homepage einbetten.  
Beispiel iFrame HTML-Code:

```HTML
<iframe src="https://CHATSERVERxxxxx.de/?name=nhihueiuhbhbi43i5n7645" style="max-width:650px;width:100%;" width="100%" height="650px" frameborder="no" scrolling="no"></iframe>
```

**Eigenheit des Safari-Browsers:**  
Der Safari kann mit "Session Cookies" (allgemeiner Webstandard) nicht korrekt arbeiten. Es gibt ein Workaround, welches zusätzlichen Code auf der origin Seite (Ihrer Webseite, oder einer Landingpage) benötigt.

Sehen Sie dazu bitte auf folgender Seite weitere Erklärung und Beispiele: [https://docs.video-stream-hosting.de/books/chat-modul/page/einbindung-mit-script-workaround-fur-safari](https://docs.video-stream-hosting.de/books/chat-modul/page/einbindung-mit-script-workaround-fur-safari)

# Verfügbare Parameter

#### Im folgenden befindet sich eine Liste mit verschiedenen Parametern zum Anpassen des Chat-Moduls:   
  


<table border="1" id="bkmrk-parameter-funktion-%C2%A0" style="border-collapse: collapse; width: 100%; height: 203px;"><tbody><tr style="height: 29px;"><td style="width: 27.1605%; height: 29px;">#### **Parameter**

</td><td style="width: 72.8395%; height: 29px;">#### **Funktion**

</td></tr><tr style="height: 29px;"><td style="width: 27.1605%; height: 29px;">**&amp;cname=**</td><td style="width: 72.8395%; height: 29px;">Sie können in Ihrer Umgebung auch einen Kundennamen vorgeben. Beispielsweise <div><div>cname=MaxMustermann. Das Eingabefeld für den Namen wird in diesem Fall gesperrt und vorausgefüllt:</div><div>[![chat-cname.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/scaled-1680-/9PUMDzwxIfJQo3Tl-chat-cname.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/9PUMDzwxIfJQo3Tl-chat-cname.jpg)</div></div></td></tr><tr style="height: 29px;"><td style="width: 27.1605%; height: 29px;">**&amp;cid=** </td><td style="width: 72.8395%; height: 29px;">Ein Parameter, ähnlich wie cname - Primär aber ein versteckter Wert um beispielsweise eine Kundennummer zu übergeben. Diese wird nur dem Chatadmin anschließend im Download angezeigt.

[![Chat-MaxMustermann-eingeloggt.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/scaled-1680-/bPPZsBWdIHDq010X-chat-maxmustermann-eingeloggt.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/bPPZsBWdIHDq010X-chat-maxmustermann-eingeloggt.jpg)

*(Sicht vom Chat-Admin Zugang)*

[![chat-download.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/scaled-1680-/NuqDh8pVQNDmB76c-chat-download.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/NuqDh8pVQNDmB76c-chat-download.jpg)

*(Sicht auf Textdatei (heruntergeladen))*

</td></tr><tr style="height: 29px;"><td style="width: 27.1605%; height: 29px;">**&amp;cssurl=**</td><td style="width: 72.8395%; height: 29px;">Mit diesem Parameter können Sie Ihre eigene CSS Datei übergeben, mit der Sie beispielsweise Farben des Chats ändern können. Wichtig ist ein absoluter Pfad zur CSS Datei.

**Beispiel**: `&cssurl=https://ihrewebseite.de/custom.css`

</td></tr><tr style="height: 29px;"><td style="width: 27.1605%; height: 29px;">**&amp;h2heading=**

</td><td style="width: 72.8395%; height: 29px;">Übergeben Sie diesen Parameter mit, wenn Sie die Überschrift ändern möchten.

**Beispiel:** `&h2heading=Hauptversammlung Chatraum`

</td></tr><tr style="height: 29px;"><td style="width: 27.1605%; height: 29px;">**&amp;hplaceholder=**</td><td style="width: 72.8395%; height: 29px;">Übergeben Sie diesen Parameter mit, wenn Sie den Platzhalter im Input Feld ändern möchten. Statt "Ihr Name (Nickname)" zum Beispiel nur "Nickname

**Beispiel:** `&hplaceholder=Nickname`

**Vorher:**

[![chat-vorher.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/scaled-1680-/VdL373loXLwKN6oz-chat-vorher.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/VdL373loXLwKN6oz-chat-vorher.jpg)

**Nachher:**

[![chat-h2heading.jpg](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/scaled-1680-/j4vTNgx8CEfSrRVW-chat-h2heading.jpg)](https://docs.video-stream-hosting.de/uploads/images/gallery/2022-03/j4vTNgx8CEfSrRVW-chat-h2heading.jpg)

<p class="callout info">Hinweis: Mit dieser temporären Anpassung ist keine Übersetzung möglich. Sie legen sich hier für die zwei Wörter, auf Deutsch fest. </p>

</td></tr><tr><td style="width: 27.1605%;">**&amp;lang=  
&amp;lang=en**</td><td style="width: 72.8395%;">Mit diesem Parameter können Sie die Sprache en oder de forcen. Wichtig aber zu wissen: Der Chat wird ohnehin immer die Systemsprache verwendet. Deutsch bei Deutsch, alles andere immer Englisch. Es gibt nur die Sprachen Deutsch und Englisch.

</td></tr><tr><td style="width: 27.1605%;">**langswitch=0**</td><td style="width: 72.8395%;">Wenn dieser Parameter gesetzt ist, werden die Flaggen für die Sprachauswahl versteckt.

</td></tr></tbody></table>

#### Wichtig: Diese Parameter werden immer nur der URL beigefügt. Der restliche Code bleibt so bestehen:

`<iframe src="https://CHATSERVERxxxxx.de/?name=nhihueiuhbhbi43i5n7645&sourceurl=https://ihrewebseite.de<strong><span style="color: #ff0000;">&cname=MaxMustermann</span><span style="color: #800080;">&h2heading=Chatten</span><span style="color: #333399;">&hplaceholder=Nickname</span></strong>" style="max-width:650px;width:100%;" width="100%" height="650px" frameborder="no" scrolling="no"></iframe>`

##### Die URL:

`https://CHATSERVERxxxxx.de/?name=nhihueiuhbhbi43i5n7645&sourceurl=https://ihrewebseite.de<strong><span style="color: #ff0000;">&cname=MaxMustermann</span><span style="color: #800080;">&h2heading=Chatten</span><span style="color: #333399;">&hplaceholder=Nickname</span></strong>`

# Datenschutz Textvorlage

### **Datenschutz nach DSGVO** Da Sie unsere Dienste auf Ihrer Webseite einbinden, sind wir in der Lage auf bestimmte personenbezogene Daten Ihrer Webseitenbesucher zuzugreifen (insbesondere die IP-Adresse). Hierüber müssen Sie die Besucher Ihrer Webseite informieren.  
  
Aus diesem Grund übersenden wir Ihnen folgendes Muster, welches Sie für die Erstellung Ihrer Datenschutzerklärung nutzen können. Bitte beachten Sie, dass es sich um ein allgemeines Muster handelt für das wir keine Haftung übernehmen. Die Erstellung einer rechtskonformen Datenschutzerklärung obliegt allein Ihnen als Webseitenbetreiber. Wir sind nicht berechtigt Sie zu juristischen Fragen zu beraten und empfehlen, Ihre Datenschutzerklärung von einem Rechtsanwalt erstellen zu lassen.  
  


#### Videostreaming und Datenverkehr über Video-Stream-Hosting.de (Steinmann GbR)

<div id="bkmrk-auf-unseren-seiten-s"><div>Auf unseren Seiten sind Inhalte und Dienstleistungen von Firma STEINMANN (Video-Stream-Hosting), Sören und Linda Steinmann GbR, Am Sennehügel 20, 32052 Herford eingebunden. Im Folgenden STEINMANN benannt. Insbesondere ein Videoplayer, aber ggf. auch hiermit verbundene Dienste (Mediathek, Chat, Feedback-Modul, Formulare, etc.).</div>  
<div>STEINMANN ermöglicht uns Livestreams und Videos, Videoplayer, Chat, etc. auf der vorliegenden Webseite anzuzeigen.</div>  
<div>Bei der Darstellung der übertragenen Daten und Inhalte wird eine direkte Verbindung zwischen Ihrem Browser und den Servern hergestellt, die diese Dienste von STEINMANN bereitstellen. Ihr Browser sendet hierzu eine Anfrage inkl. Ihrer IP-Adresse und erhält die abgefragten Daten zurück. Beispielsweise der Abruf des Videoplayers beim Laden der Webseite, ein übertragener Videoinhalt oder die Chat-Texte sobald Sie diese abrufen.</div>  
<div>Die hierfür notwendige IP-Adresse wird von STEINMANN nur kurzzeitig gespeichert und für die Übertragung der Daten und die technische und sicherheitsbezogene Bereitstellung der Dienstleistung verwendet. Für eine längere Speicherung der IP-Adresse wird diese anonymisiert - hierdurch ist es STEINMANN nicht möglich, diese zu Ihrem Anschluss zurückzuverfolgen (d.h. diese ist nicht personenbezogen).</div>  
<div>Sollten Sie Text, Ihren Namen oder persönliche Daten per Chat-, Feedback-Modul, Formular, etc. eingeben, werden diese zur Nutzung des Dienstes verwendet und gespeichert. STEINMANN löscht diese Daten nach spätestens 7 Tagen, bietet aber ggf. die Möglichkeit, dass wir diese Daten speichern.</div>  
<div>Zudem speichert STEINMANN in Ihrem Browser sogenannte Cookies. Diese Cookies ermöglichen es, Ihren Browser zwischen einzelnen Anfragen sowie bei Ihrem nächsten Besuch der Webseite wiederzuerkennen. Hierüber können z.B. die Anzahl der Aufrufe gezählt werden. Dies dient der technischen und sicherheitsbezogenen Dienstleitung (Erkennung von Angriffen und illegitimer Abrufe) und der pseudonymisierten Erfassung von Statistikdaten.</div>  
<div>Sie können Ihren Browser so einstellen, dass Sie über das Setzen von Cookies informiert werden und Cookies nur im Einzelfall erlauben, die Annahme von Cookies für bestimmte Fälle oder generell ausschließen sowie das automatische Löschen der Cookies beim Schließen des Browsers aktivieren. Bei der Deaktivierung von Cookies kann die Funktionalität dieser Website eingeschränkt sein. Die Cookies verbleiben auf Ihrem Endgerät, bis Sie diese löschen.</div>  
<div>Der Einsatz der Dienste von Video-Stream-Hosting erfolgt im Interesse einer störungsfreien Bereitstellung und der Optimierung unserer Angebote. Dies stellt ein berechtigtes Interesse im Sinne des Art. 6 Abs. 1 lit. f DSGVO dar.</div>  
<div>Weitere Informationen hierzu finden Sie in der Datenschutzerklärung von STEINMANN unter https://www.video-stream-hosting.com/datenschutz/.</div></div>

# Videotour

### Im folgenden finden Sie eine kleine Video-Tour durch unser Chat-Modul:  
  


<div id="bkmrk-"><div><iframe allowfullscreen="allowfullscreen" data-mce-fragment="1" height="467" src="https://start.video-stream-hosting.de/player.html?serverip=213.239.228.208&serverapp=vsh-vod&streamname=chat-modul_tour.smil&timelinecolor=2b8eda" style="border: none;" width="830"></iframe>

</div><div></div></div>#### Videotour neue Nachrichten markieren Funktion:

Auf Anfrage schalten wir Ihnen gerne die Funktion frei, Nachrichten markieren zu können, zum Beispiel für ein zweiten Administrator. Mehr dazu im folgendem Video:

<div id="bkmrk--0"><iframe allowfullscreen="allowfullscreen" data-mce-fragment="1" height="467" src="https://start.video-stream-hosting.de/player.html?serverip=213.239.228.208&serverapp=vsh-vod&streamname=chat-favoriten-funktion-tour.smil&timelinecolor=2b8eda" style="border: none;" width="830"></iframe>

</div>

# Einbindung mit Script (Workaround für Safari, Edge oder restriktive Browser)

Der Safari-Browser sperrt seit geraumer Zeit Drittanbieter Cookies (sogar die normalen Session-Cookies) welche essenziell wichtig für die Funktionen wie ein "Login" sind. Die reine Hauptaufgabe eines Session-Cookies ist, die Speicherung des Logins/Sitzung vom Seitenbesucher. Ohne diesen "Cookie Speicher" muss der Besucher sich immer und immer wieder erneut anmelden, sobald versehentlich der Tab geschlossen wurde, oder man die Seite neu laden möchte.

Wir haben hierfür einen Workaround erarbeitet. Der Kunde bekommt nicht den typischen iFrame Code, sondern erhält ein Script-Code, wie es bei anderen Applikationen wie "Cookie Consent Managern" der Fall ist.

**Beispielsweise sieht der Code wie folgt aus:**

```HTML
<script type="text/javascript" src="https://chatserver.XXXXXXXXXXX.de/embed.js"></script>
<script>
    var vshurl = 'https://chatserver.XXXXXXXXXXX.de/?name=iEawyQs6iI4r8NAsQPsZTj8YTPsQVvtu'
    vshInit(vshurl,{modus: "chat"});
</script>
```

**Ablauf wie folgt:**

1\. Wir setzen ein Cookie (essenzieller Session Cookie), DSGVO-konform.   
2\. Initiieren den Chat und übergeben die Information, dass wir bereits ein Cookie haben, für den Chatserver  
3\. Der Chat im iFrame braucht so nicht mehr versuchen, einen Cookie zu setzen. Es gibt ihn schon.

Voilà, der Chat funktioniert, auch wenn man die Seite im Safari oder Chrome Browser (Inkognito Tab) neu lädt. Falls das nächste Mal der Seitenbesucher Probleme mit seinem Browser hat, kann er diesen beruhigt neu starten, er wird nicht mehr aus dem Chat ausgeloggt. Der Cookie speichert seinen Login für einen kurzen Zeitraum. Nach 10-15 Minuten, wenn er nicht wieder zurückgekommen ist, wird das Gegenstück des Cookies vom Server gelöscht. Beim erneuten Aufruf der Seite verschwindet der Cookie auch vom Gerät des Seitenbesuchers. Andernfalls verliert der Cookie nach sicheren 24 Stunden die Gültigkeit und wird automatisch im Browser des Seitenbesuchers gelöscht.