Betreiben Sie Ihren Online-Shop mit Shoper? Diese Anleitung führt Sie durch alle Schritte zur Anbindung von Smartsupp — von der Plugin-Installation mit einem Klick bis zur manuellen Installation per Code.
Wir haben die Anleitung in folgende Abschnitte unterteilt:
Smartsupp-Plugin installieren
Gehen Sie in Ihrem Shoper-Dashboard zu Add-ons und Integrationen > Anwendungen. Scrollen Sie nach unten und suchen Sie nach Smartsupp - Live-Chat, Flow (ehemals Chatbots) & Video-Aufzeichnungen, und klicken Sie darauf.
Klicken Sie auf die Schaltfläche „Anwendung installieren“ .
Akzeptieren Sie die Geschäfts- & Nutzungsbedingungen des App Store und klicken Sie dann auf Installieren.
Sie sehen 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 auf das Smartsupp Symbol.
Sie können entweder ein neues Smartsupp-Konto erstellen oder sich in Ihr bestehendes Konto einloggen, um es mit Ihrem Shoper-Shop zu verbinden.
Sobald die Verbindung hergestellt ist, können Sie mit Ihren Besuchern chatten oder die Smartsupp-Einstellungen über die Smartsupp APIanpassen. Vergessen Sie nicht, Ihre Änderungen zu speichern.
Tipp: Öffnen Sie Ihren Shop nach dem Speichern in einem neuen Tab und aktualisieren Sie die Seite — das Smartsupp-Chat-Widget sollte jetzt sichtbar sein.
Manuelle Installation per Code
Wenn die Plugin-Installation nicht funktioniert, können Sie den Smartsupp-Code manuell als JavaScript-Snippet hinzufügen.
Chat Code kopieren
Sie finden Ihren individuellen Smartsupp Chat Code im dashboard unter Einstellungen > Channels > Live-Chat > Installation > Code einfügen.
Code in Shoper einfügen
Gehen Sie in Shoper zum Bereich für JavaScript-Snippets und fügen Sie Ihren Smartsupp-Code ein. Entfernen Sie unbedingt die <script> und </script> Tags — Shoper akzeptiert in diesem Feld keine HTML-Tags.
Hinweis: Das JavaScript-Feld in Shoper hat möglicherweise eine Zeichenbegrenzung. Halten Sie den Code daher so kurz wie möglich. Vermeiden Sie // Kommentare, da Shoper diese möglicherweise als nicht funktionsfähig behandelt. Aktualisieren Sie nach dem Einfügen Ihren Browser, um die Änderungen zu sehen.
Anpassung über die API
Mit der Smartsupp JavaScript API können Sie das Verhalten des Chat-Widgets in Ihrem Shoper-Shop anpassen. Hier sind einige gängige Beispiele:
Chat-Widget über eine benutzerdefinierte Schaltfläche öffnen:
<button onclick="smartsupp('chat:open')">Chat with us</button>
Chat-Widget auf bestimmten Seiten ausblenden (z. B. Warenkorb oder Kasse):
if (location.pathname.startsWith('/cart') || location.pathname.startsWith('/checkout')) { _smartsupp.hideWidget = true; }
Standard-Chat-Schaltfläche ausblenden und nach dem Schließen ausgeblendet lassen:
smartsupp('chat:hide'); smartsupp('on', 'chat:close', function() { smartsupp('chat:hide'); });
Hinweis: Das JavaScript-Feld in Shoper hat möglicherweise eine Zeichenbegrenzung und unterstützt keine // Kommentare. Halten Sie Ihren Code kurz und vermeiden Sie HTML-Tags wie <script>.
Tipp: Eine vollständige Liste der verfügbaren API-Methoden finden Sie in der Smartsupp API-Dokumentation.
Plugin deinstallieren
Wenn Sie das Smartsupp-Plugin deinstallieren möchten, gehen Sie zu Add-ons und Integrationen > Meine Anwendungen und klicken Sie auf die Smartsupp App.
Klicken Sie auf App deinstallieren.
Bestätigen Sie die Deinstallation.
Hinweis: Smartsupp und Shoper sind zwei separate Dienste. Durch die Deinstallation des Plugins wird Ihr Smartsupp-Abonnement nicht gekündigt. Um es zu kündigen, kontaktieren Sie bitte unser Support-Team.
Weiterführende Ressourcen:
Smartsupp-Installation — vollständige Übersicht aller Installationsmethoden.
Google Tag Manager — alternative Installationsmethode mit GTM.
Wie geht es weiter?
Grundeinstellungen der Chat-Box — Passen Sie Farben, Position, Begrüßungsnachrichten und mehr an.
Status der Chat-Box — Erfahren Sie, wie der Status des Chat-Widgets funktioniert und wie Sie ihn steuern können.
Warum kann ich den Chat auf meiner Website nicht sehen? — Beheben Sie die häufigsten Installationsprobleme.
Plugins herunterladen — Entdecken Sie alle verfügbaren Plattformintegrationen.