Betreiben Sie Ihren Onlineshop mit Shoper? Diese Anleitung zeigt Ihnen Schritt für Schritt, wie Sie Smartsupp einbinden – von der einfachen Plugin-Installation bis zur manuellen Code-Integration.
Die Anleitung ist in folgende Themen gegliedert:
Smartsupp-Plugin installieren
Öffnen Sie im Shoper-Dashboard den Bereich Add-ons und Integrationen > Anwendungen. Scrollen Sie nach unten, suchen Sie Smartsupp (gelistet als Smartsupp - Live Czat, Czatbot, Mira AI i więcej narzędzi AI) und klicken Sie auf den Eintrag.
Klicken Sie auf Anwendung installieren.
Akzeptieren Sie die App-Store-Bedingungen und klicken Sie anschließend auf Installieren.
Sie erhalten eine Bestätigung, dass das Smartsupp-Plugin erfolgreich installiert wurde.
Smartsupp konfigurieren
Gehen Sie nach der Installation zu Add-ons und Integrationen > Meine Anwendungen und klicken Sie dort auf das Smartsupp-Symbol.
Sie können jetzt entweder ein neues Smartsupp-Konto einrichten oder sich in Ihr bestehendes Konto einloggen, um es mit Ihrem Shoper-Shop zu verbinden.
Sobald die Verbindung steht, können Sie mit Ihren Besuchern chatten oder die Smartsupp-Einstellungen mithilfe der Smartsupp API anpassen. Denken Sie daran, Ihre Änderungen zu speichern.
Tipp: Öffnen Sie nach dem Speichern Ihrer Einstellungen Ihren Shop in einem neuen Tab und laden Sie die Seite neu – das Smartsupp Chat-Widget sollte jetzt sichtbar sein.
Manuelle Code-Installation
Sollte die Plugin-Installation nicht möglich sein, können Sie Smartsupp alternativ als JavaScript-Snippet manuell einbinden.
Chat-Code kopieren
Ihren individuellen Smartsupp-Chat-Code finden Sie im Dashboard unter Einstellungen > Channels > Live-Chat > Installation > Code einfügen.
Code in Shoper einfügen
Öffnen Sie in Shoper den JavaScript-Snippet-Bereich und fügen Sie dort Ihren Smartsupp-Code ein. Entfernen Sie dabei unbedingt die <script>- und </script>-Tags – Shoper akzeptiert in diesem Feld keine HTML-Tags.
Hinweis: Das JavaScript-Feld in Shoper hat mitunter eine Zeichenbegrenzung – halten Sie den Code daher möglichst knapp. Verzichten Sie auf //-Kommentare, da Shoper diese ggf. als ungültig einstuft. Aktualisieren Sie nach dem Einfügen bitte Ihren Browser, um die Änderungen zu sehen.
API-Anpassung
Mit der Smartsupp JavaScript API können Sie das Chat-Widget in Ihrem Shoper-Shop individuell steuern. Hier ein paar typische Anwendungsbeispiele:
Chat-Widget über eigenen Button öffnen:
<button onclick="smartsupp('chat:open')">Chatten Sie mit uns</button>
Chat-Widget gezielt auf bestimmten Seiten ausblenden (z. B. im Warenkorb oder bei der Kasse):
if (location.pathname.startsWith('/cart') || location.pathname.startsWith('/checkout')) { _smartsupp.hideWidget = true; }
Standard-Chat-Button dauerhaft ausblenden, auch nach dem Schließen:
smartsupp('chat:hide'); smartsupp('on', 'chat:close', function() { smartsupp('chat:hide'); });
Hinweis: Das JavaScript-Feld in Shoper ist möglicherweise in der Zeichenzahl begrenzt und unterstützt keine //-Kommentare. Halten Sie den Code kurz und verzichten Sie auf HTML-Tags wie <script>.
Tipp: Eine vollständige Übersicht aller verfügbaren API-Methoden finden Sie in der Smartsupp API-Dokumentation.
Plugin deinstallieren
Wenn Sie das Smartsupp-Plugin entfernen möchten, wechseln Sie zu Add-ons und Integrationen > Meine Anwendungen und klicken Sie auf die Smartsupp App.
Klicken Sie auf App deinstallieren.
Bestätigen Sie anschließend die Deinstallation.
Hinweis: Smartsupp und Shoper sind unabhängige Dienste. Die Deinstallation des Plugins beendet nicht Ihr Smartsupp-Abonnement. Möchten Sie Ihr Abonnement kündigen, wenden Sie sich bitte an unser Support-Team.
Weitere Ressourcen:
Smartsupp-Installation – Alle Installationsmöglichkeiten im Überblick.
Google Tag Manager – Alternative Einbindung über den GTM.
Wie geht es weiter?
Grundlegende Chat-Box-Einstellungen – Farben, Position, Willkommensnachrichten und mehr individuell festlegen.
Status der Chat-Box – So funktioniert der Chat-Status und hier steuern Sie ihn gezielt.
Warum wird der Chat nicht auf meiner Website angezeigt? – Typische Installationsprobleme schnell lösen.
Plugins herunterladen – Alle verfügbaren Integrationen auf einen Blick entdecken.