Login
Registrieren

Anleitung 1:1 Live Video Chat Integration

Der 1:1 Live Video Chat kann global (Plugin) oder in einzelne Seiten (HTML-Code) integriert werden. Folgenden Anleitungen beschreiben Schritt für Schritt die Integration in dein System und wie der Video Chat funktioniert. Bei Fragen ruf uns ger an: +49 30 2191 8008 oder starte unseren Support Video Chat.

WordPress (global via Plugin)

  1. Logge dich in das 123.chat-Backend ein, klicke oben auf   und dann auf "LiveChat".
  2. klicke auf "Einstellungen" (oben), dann auf "WordPress Plugin" und kopiere die User ID.
  3. Logge dich in dein WordPress-Backend ein.
  4. klicke links auf "Plugins" und dann oben auf Plugins "Installieren".
  5. Im Suchfeld (rechts) nach "123" suchen - dir wird das 123.chat - Video Chat Plugin angezeigt.
  6. Installiere das Plugin und aktiviere es.
  7. klicke beim "123.chat" - Plugin auf "Einstellungen".
  8. Die kopierte User-ID (aus dem 123.chat-Backend) einfügen und speichern fertig.
  9. Und so funktioniert das 1:1 Live Video Chat Tool.

Video Anleitung

video chat wordpress plugin

WordPress (einzelne Seiten)

  1. Logge dich in das 123.chat-Backend ein, klicke oben auf   und dann auf "LiveChat".
  2. klicke auf "Einstellungen" (oben), dann auf "HTML Code" und kopiere das Code-Snippet.
  3. Logge dich in dein WordPress-Backend ein.
  4. klicke links auf "Seiten" und wähle anschliessend diese Seite(n), auf der der Video Chat erscheinen soll.
  5. Füge das Code-Snippet entweder als Text- oder HTML-Element ein speichern fertig.
  6. Und so funktioniert das 1:1 Live Video Chat Tool.

Video Anleitung

video chat wordpress tool tutorial

HTML (global oder einzelne Seiten)

  1. Logge dich in das 123.chat-Backend ein, klicke oben auf   und dann auf "LiveChat".
  2. klicke auf "Einstellungen" (oben), dann auf "HTML Code" und kopiere das Code-Snippet.
  3. Füge das Code-Snippet innerhalb des body-Tags auf jeder einzelnen Seite ein oder binde es per PHP-Befehl global ein speichern fertig.
  4. Und so funktioniert das 1:1 Live Video Chat Tool.

Video Anleitung

video chat website tool integration

Shopware 5

  1. Logge dich in das 123.chat-Backend ein, klicke oben auf   und dann auf "LiveChat".
  2. klicke auf "Einstellungen" (oben), dann auf "Shopware 5+6" und kopiere die User ID.
  3. Logge dich in dein Shopware5-Backend ein.
  4. klicke auf "Einstellungen" "Plugin-Manager".
  5. Suche nach "123" und dir wird das 123.chat - Video Chat Plugin angezeigt.
  6. klicke auf "Kostenlos" "Jetzt herunterladen" AGB bestätigen "Zahlungspflichtig bestellen".
  7. klicke auf "Installieren" füge unten bei "Konfiguration" die User-ID (aus dem 123.chat-Backend) ein "Aktivieren" Cache leeren bestätigen.
  8. klicke oben in der Navigation auf "Einstellungen" "Caches / Performance" Reiter "Cache" Häkchen bei "Theme kompilieren" unten rechts "Leeren" "Theme kompilieren" fertig.
  9. Und so funktioniert das 1:1 Live Video Chat Tool.

Video Anleitung

video chat shopware 5 plugin integration

Shopware 6

  1. Logge dich in das 123.chat-Backend ein, klicke oben auf   und dann auf "LiveChat".
  2. klicke auf "Einstellungen" (oben), dann auf "Shopware 5+6" und kopiere die User ID.
  3. Logge dich in dein Shopware6-Backend ein.
  4. klicke links auf "Erweiterungen" "Store" suche oben im Suchfeld nach "123chat" und klicke auf das Item 123.chat - 1:1 LIVE Video Chat
  5. Dann auf "Erweiterung hinzufügen" klicken AGB akzeptieren Erweiterung kostenlos hinzufügen und Schließen.
  6. Auf der linken Menüleiste auf "Meine Erweiterung" in der Mitte bei der "123.chat"-Erweiterung auf "App installieren" klicken und kurz warten.
  7. Anschliessend aktiviere die 123.chat-Erweiterung (kurz den autom. Reload abwarten) und klicke rechts auf den kleinen Button (drei Punkte) und dann auf "Konfiguration" die kopierte User-ID (aus dem 123.chat-Backen) einfügen Speichern fertig.
  8. Und so funktioniert das 1:1 Live Video Chat Tool.

Video Anleitung

video chat shopware 6 plugin integration

Shopify, Gambio, u.a. Shopsysteme

  1. Logge dich in das 123.chat-Backend ein, klicke oben auf   und dann auf "LiveChat".
  2. klicke auf "Einstellungen" (oben), dann auf "Shopify App" und kopiere das Code-Snippet.
  3. Logge dich in dein Shopify-Backend ein.
  4. klicke links auf "Themes" in der Mitte auf "Actions" im Dropdown-Menue auf "Edit Code".
  5. klicke auf der nächsten Seite beim Layout "theme.liquid" füge das Code-Snippet innerhalb des body-Tags ein Speichern fertig.
  6. Und so funktioniert das 1:1 Live Video Chat Tool.

Video Anleitung

video chat shopify plugin integration

EXPO-IP

  1. Logge dich in das 123.chat-Backend ein, klicke oben auf   und dann auf "LiveChat".
  2. klicke auf "Einstellungen" (oben), dann auf "HTML Code" und kopiere das Code-Snippet.
  3. Logge dich in dein EXPO-IP Backend ein.
  4. klicke links auf "Booths" und wähle rechts den Messestand (kleines Stiftsymbol) aus, auf dem der Video Chat integriert werden soll.
  5. klicke auf der nächsten Seite auf den Reiter "Settings" (oben) und scrolle runter bis zu "Chat implementation" füge das Code-Snippet ein Save fertig.
  6. Gehe auf deinen virtuellen Messestand (Quadrat mit Pfeil) und passe ggf. die Positionierung des Video Chats an. Gehe hierzu im 123.chat-Backend auf "Einstellungen" und wähle zwischen "rechst" und "links" bzw. gib die horizontalen und vertikalen Pixel bei Typ und Positionierung des Video-/TextChat - Buttons an Speichern fertig.
  7. Und so funktioniert das 1:1 Live Video Chat Tool.

Video Anleitung

video chat expo ip integration

HTML-Code (mit Übernahme des Username aus dem Expo-IP-System):

Bitte ersetze beim unten stehenden Code die letzte Zeile ( <script src="https://123.chat/embedded/website/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.js" async></script> ) durch dein eigenes Code-Snippet, welches dir im Backend unter Einstellungen angezeigt wird.

<script>
    var g_we_child = null;
    window["custom123chat"] = (we_child) => {
        g_we_child = we_child;
        g_we_child.load(sendExpoUserData);
    };

    function sendExpoUserData() {
        if (g_we_child != null && g_we_child.document.we_wsConn != null && g_we_child.document.we_wsConn.readyState) {
            setTimeout(()=>{
                g_we_child.wsSend("SetInfo", {"Key": "email", "Value": expo.user.email, "Mode": "silent"});
                g_we_child.wsSend("SetInfo", {"Key": "name", "Value": expo.user.userName, "Mode": "silent"});
            }, 300);
        } else {
            setTimeout(sendExpoUserData, 300);
        }
    }
</script>

<script src="https://livechat.123.chat/embedded/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.js" async></script>

So funktioniert das 1:1 Live Video Chat Tool

  1. Logge dich in das 123.chat-Backend ein, klicke oben auf   und dann auf "LiveChat".
  2. Teste zunächst Signalton und Kamera (Button rechts) - jetzt bist du startklar und kannst deinen Browser minimieren, um ganz normal weiter zu arbeiten.
  3. Schreibt dir ein Besucher über das Chatfenster von deiner Website/Onlineshop oder will mit dit videochatten, ertönt ein Signalton und du siehst zusätzlich ein kleines Hinweisfenster vom Browser (unten rechts). klicke dann auf diese Browsernotification oder wechsel in den Browsertab zum 123.chat-Backend.
  4. Wähle dann links oben den Anrufer aus (rot markiert) und klicke anschliessend in der Mitte auf den großen Button "VideoChat annehmen".
  5. Nachdem du Kamera und Mikrofon (einmalig) freigegeben hast, wirst du automatisch mit deinem Besucher verbunden.
  6. Die Kamera deines Besuchers ist zunächst deaktiviert und kann bei Bedarf von diesem aktiviert werden.

Video Anleitung

video chat tool anleitung

eigenes Empfangsvideo

Du kannst dein eigenes kleines Empfangsvideo für dein Video Chat Fenster hochladen und anzeigen lassen. Bitte nutzen dabei folgende Größe und Format:

  • Spieldauer/Länge: 10-20 Sekunden
  • Abmessungen (B+H): 398px x 224px
  • Dateigröße: ca 250kb - 400kb
  • Format: mp4

Hier kannst du eine Beispieldatei downloaden. Wenn du Hilfe brauchst, schicke uns dein Video an support@123.chat und wir bearbeiten es so, dass es passt - kostenlos!

IT-Spezifikation

Whitelisting für Firewalls in Unternehmens-Netzwerken oder VPNs

Der 1:1 Video Chat von 123.chat basiert auf WebRTC und kann ohne Software-Installation mit jedem gängigen und aktuellen Browser genutzt werden, wobei zur einfachen Handhabung der Google Chrome Browser präferiert wird. Einige Funktionen von 123.chat werden möglicherweise deaktiviert oder die Übertragungsqualität leidet, wenn dein Netzwerkadministrator (IT-Abteilung) die Video- und Audiodienste in Browsern blockiert.

Am häufigsten werden die Probleme gelöst, indem du dein VPN ausschaltest oder in ein Gast-WLAN gehst, wenn vorhanden.

Wenn du dein VPN nicht deaktivieren kannst, muss dein Netzwerkadministrator 123.chat zu deiner Liste der akzeptierten Verwendung hinzufügen, die allgemein als "Whitelisting" bezeichnet wird. Alle Informationen zu Domains und Ports findest du in der untenstehenden Tabelle.

Bei Fragen unterstützen wir dich: Mail an support@123.chat oder unter: +49 30 2191 8008 - oder komm in unseren Support Video Chat (rechts unten).

Firewall Portfreigabe und Web-Proxy Domainfreigabe (Ausnahme hinzufügen)

URL (Web-Proxy Ausnahme) IPv4 IPv6 Ports Protokoll Erklärung / Info