So installieren und konfigurieren Sie Online-Chat-Widget

Veröffentlicht: 30 Januar 2023

Aktualisiert: 8 September 2026

Das Umnico-Widget ist eine Schaltfläche auf Ihrer Website, über die Besucher Sie per Online-Chat, Telegram, VKontakte und anderen Messengern kontaktieren können. Alle Nachrichten werden in einem einzigen Umnico-Fenster empfangen.

Um den Website-Chat zu installieren, erstellen und konfigurieren Sie das Widget im Bereich "Channels" → "Website chat", kopieren Sie den Code und fügen Sie ihn auf den Seiten Ihrer Website ein.

1. Gehen Sie zum Bereich "Channels" → "Website chat"

Klicken Sie im linken Menü auf "Channels". Auf der Seite stehen zwei Tabs zur Verfügung: "Main" — für Messenger und "Website chat" — zur Konfiguration des Widgets.

Öffnen Sie den Tab "Website chat". Der Tab "Website chat" befindet sich im Bereich "Communication channels".

Klicken Sie neben dem Tab auf "+ Website chat".

Vergeben Sie einen Namen für das Widget. Er wird nur in Ihrem Konto angezeigt — Besucher der Website sehen ihn nicht. Wenn Sie mehrere Websites oder Landingpages haben, benennen Sie die Widgets entsprechend ihrem Zweck, zum Beispiel: "Main website", "Landing page May 2025", "Online store". So können Sie die Widgets leichter voneinander unterscheiden.

Nach der Erstellung wird ein Editor mit mehreren Bereichen geöffnet. Konfigurieren Sie die Widget-Einstellungen in jedem dieser Bereiche.

Einstellungen

In diesem Bereich können Sie den Namen des Widgets, die Zeitzone, die Arbeitszeiten, die Farbe der Schaltfläche und die Position der Schaltfläche (links oder rechts) festlegen.

Online-Chat

Aktivieren Sie den Online-Chat, wählen Sie die Farbe des Fensters und der Nachrichten und konfigurieren Sie die automatische Öffnung des Chats nach N Sekunden.

Messenger

Fügen Sie Links zu Ihren Messengern hinzu — Telegram, VKontakte, MAX und anderen. Der Website-Besucher kann auswählen, wohin er eine Nachricht senden möchte.

Schnellantworten

Konfigurieren Sie Hinweise für Besucher — häufig gestellte Fragen, die sie mit einem Klick senden können. Verfügbare Sprachen: RU, EN, DE, ES, PT.

Scrollen Sie nach unten zum Bereich "Installation" und kopieren Sie den Code, um ihn auf Ihrer Website einzufügen. Im Bereich "Installation" befindet sich der für Ihr Konto eindeutige Code.

Verwenden Sie nicht den Code einer anderen Person: Jedes Konto hat seinen eigenen Hash. Der Code aus dem obigen Beispiel funktioniert nicht.

5. Installieren Sie den Code auf Ihrer Website

Fügen Sie den kopierten Code auf jeder Seite der Website vor dem schließenden </body>-Tag ein.

Wählen Sie Ihre Plattform:

Benutzerdefinierte Website

Öffnen Sie die Vorlagendatei, die auf allen Seiten eingebunden wird (normalerweise layout.html, base.html oder footer.php).
Suchen Sie das schließende </body>-Tag.
Fügen Sie den Widget-Code direkt davor ein.
Speichern Sie die Datei und überprüfen Sie Ihre Website — das Widget wird in der unteren rechten Ecke angezeigt.

Tilda

Öffnen Sie den Editor der gewünschten Website in Tilda.
Gehen Sie zu Site Settings → More → HTML code for insertion.
Fügen Sie im Feld "Code before </body>" den Widget-Code ein.
Klicken Sie auf "Save" und veröffentlichen Sie die Website.

Der Code wird einmal für die gesamte Website hinzugefügt — Sie müssen ihn nicht separat auf jeder Seite einfügen.

WordPress

Installieren Sie das Plugin Insert Headers and Footers (oder WPCode).
Gehen Sie zu Settings → Insert Headers and Footers.
Fügen Sie den Widget-Code in das Feld Scripts in Footer ein.
Klicken Sie auf "Save".

Wenn Sie Zugriff auf den Theme-Editor haben: Appearance → Editor → footer.php → fügen Sie den Code vor </body> ein. Das Plugin ist jedoch zuverlässiger — der Code wird bei einer Aktualisierung des Themes nicht entfernt.

Bitrix

Melden Sie sich im administrativen Bereich von Bitrix an.
Gehen Sie zu Settings → Sites and Servers → Sites.
Wählen Sie die gewünschte Website → Tab HTML code of pages.
Fügen Sie den Widget-Code in das Feld "Before </body>" ein.
Speichern Sie die Änderungen.

React

Wenn Ihre Anwendung Create React App verwendet, fügen Sie den Code in public/index.html vor </body> ein.

Wenn Sie Next.js verwenden, fügen Sie ihn über die Script-Komponente in _app.js oder layout.tsx hinzu.

6. Überprüfen Sie, ob der Website-Chat funktioniert

Öffnen Sie Ihre Website in einem Browser. Die Chat-Schaltfläche sollte in der unteren rechten Ecke angezeigt werden.

Klicken Sie auf die Schaltfläche und senden Sie eine Testnachricht. Sie wird im Bereich "Chats" Ihres Umnico-Kontos angezeigt.

Sie können das Senden von Nachrichten auch innerhalb der Umnico-Oberfläche testen. Klicken Sie dazu auf die Schaltfläche "Test chat".

Wird das Widget nicht angezeigt? Überprüfen Sie, ob: der Code auf allen Seiten eingefügt wurde (nicht nur auf der Startseite); der Hash vollständig und ohne zusätzliche Leerzeichen kopiert wurde; die Seite nach den Änderungen gespeichert und veröffentlicht wurde.

Hilfe & Support

Wenn Sie Fragen haben, können Sie uns gerne kontaktieren — wir helfen Ihnen gerne weiter. Um den Umnico-Support zu erreichen, klicken Sie auf die Sprechblase "Support" in der unteren rechten Ecke Ihres Bildschirms. Oder gehen Sie zum Abschnitt "Hilfe → Chat mit dem Support" in Ihr persönliches Konto.