Wie man einen klickbaren Link zum Öffnen des Shopify Chat-Widgets erstellt: Eine Schritt-für-Schritt-Anleitung

Diese standardmäßige Shopify Inbox Chat-Blase ist in Ordnung, aber sie fügt sich nicht immer gut in das Design ein, an dem Sie für Ihren Shop so hart gearbeitet haben. Sie schwebt einfach nur da, verdeckt manchmal wichtige Informationen oder beißt sich mit Ihrem Branding. Vielleicht möchten Sie ein saubereres Design oder einen „Mit uns chatten“-Link direkt auf Ihrer Kontaktseite, in Ihrer Fußzeile oder auf einer Produktseite platzieren, wo Sie wissen, dass Käufer Fragen haben werden.

Und wenn Sie gegoogelt haben, wie Sie das beheben können, sind Sie wahrscheinlich auf eine Reihe von alten Forenbeiträgen mit Tricks gestoßen, die einfach nicht mehr funktionieren. Methoden wie das Hinzufügen von „/?chat“ am Ende einer URL sind veraltet und mittlerweile unzuverlässig.

Genau dafür ist dieser Leitfaden da. Wir führen Sie durch einen einfachen, schrittweisen Prozess mit einem kleinen Stück modernen JavaScripts. Es ist der zuverlässigste Weg, einen klickbaren Link zu erstellen, um Ihr Shopify-Chat-Widget von überall auf Ihrer Website aus zu öffnen, und gibt Ihnen die Kontrolle über das Design Ihres Shops zurück.

Was Sie benötigen, bevor Sie beginnen

Bevor wir loslegen, stellen wir sicher, dass Sie alles bereit haben. Keine Sorge, es ist eine kurze Liste:

• Einen Shopify-Shop, in dem die Shopify Inbox-App installiert ist und läuft.

• Admin-Zugriff auf Ihr Shopify-Konto, damit Sie in den Code Ihres Themes gelangen können.

• Etwa 10-15 Minuten Ihrer Zeit.

Warum alte Methoden nicht mehr funktionieren

Shopify aktualisiert seine Plattform ständig, was großartig ist, aber es bedeutet auch, dass inoffizielle Tricks und Workarounds plötzlich aufhören können zu funktionieren. Diese alten URL-Parameter wie „?show_chat“ waren clevere Hacks, die eine Weile funktioniert haben, aber Shopify hat seitdem die Art und Weise geändert, wie Apps wie Inbox in Ihrem Shop geladen werden. Sie heute auszuprobieren, führt normalerweise nur zu defekten Links und verwirrten Kunden.

Der technische Grund dafür ist, dass das Chat-Widget jetzt oft in einem sogenannten Shadow DOM oder einem Iframe geladen wird. Man kann es sich wie eine sichere kleine Box auf Ihrer Webseite vorstellen, die von allem anderen getrennt gehalten wird. Diese Einrichtung macht es für eine einfache URL schwierig, in diese Box zu gelangen und dem Widget zu sagen, dass es sich öffnen soll.

Deshalb benötigen wir einen modernen JavaScript-Ansatz. Die Methode, die wir Ihnen gleich zeigen werden, ist viel stabiler. Anstatt einen URL-Trick zu versuchen, findet sie den eigentlichen Chat-Button auf der Seite, wo auch immer er sich versteckt, und simuliert einen Klick. Es funktioniert genau so, als würde eine echte Person den Chat öffnen, was es auf lange Sicht zu einer weitaus zuverlässigeren Lösung macht.

So erstellen Sie in 4 Schritten einen klickbaren Shopify-Chat-Link

Der ganze Prozess läuft auf zwei Dinge hinaus: das Hinzufügen eines Links zu Ihrer Seite und das Einfügen eines kleinen Skripts in Ihr Theme, damit es funktioniert. Keine Entwicklererfahrung erforderlich, ich werde Sie durch jeden Klick führen.

Schritt 1: Sichern Sie Ihr Theme

Okay, bevor Sie irgendeinen Code anrühren, lassen Sie uns das Klügste tun: Sichern Sie Ihr Theme. Dies ist Ihr Sicherheitsnetz. Wenn etwas schiefgeht, können Sie die Sicherung mit einem einzigen Klick wiederherstellen und so tun, als wäre es nie passiert.

• Gehen Sie in Ihrer Shopify-Administration zu Onlineshop > Themes.

• Finden Sie Ihr aktuelles Theme (das, bei dem „Live“ steht). Klicken Sie auf das Drei-Punkte-Symbol (...) neben der Schaltfläche „Anpassen“.

• Wählen Sie Duplizieren aus dem Menü.

Shopify erstellt eine exakte Kopie. Jetzt können Sie das Original ohne Sorgen bearbeiten, da Sie wissen, dass Sie eine sichere Version parat haben, falls Sie sie benötigen.

Shopify-Admin-Panel, in dem Sie den Themes-Bereich finden, um Ihr Theme zu sichern.

Schritt 2: Fügen Sie Ihren benutzerdefinierten Link oder Button hinzu

Als Nächstes entscheiden Sie, wo Ihr neuer Chat-Link platziert werden soll. Sie können ihn praktisch überall einfügen, wo HTML akzeptiert wird, wie auf einer Kontaktseite, in einer Produktbeschreibung oder in der Fußzeile Ihrer Website.

Sobald Sie einen Platz ausgewählt haben, fügen Sie diese einfache HTML-Zeile hinzu:

Mit unserem Team chatten  

Ändern Sie „Mit unserem Team chatten“ gerne in etwas, das für Sie Sinn ergibt. Der wirklich wichtige Teil ist "href="#open-chat"". Dies ist der einzigartige Anker, nach dem unser Skript suchen wird, um zu wissen, wann der Chat geöffnet werden soll. Es verlinkt nicht wirklich auf eine andere Seite; es ist nur eine Kennung für unseren Code.

Schritt 3: Fügen Sie den JavaScript-Code zu Ihrem Theme hinzu

Okay, das ist der Kern der Lösung. Wir müssen ein kleines Skript zu Ihrem Theme hinzufügen, das darauf wartet, dass jemand auf Ihren neuen Link klickt. Der beste Ort dafür ist Ihre „theme.liquid“-Datei, die sicherstellt, dass der Code auf jeder Seite Ihrer Website aktiv ist.

1. Gehen Sie in Ihrer Shopify-Administration zurück zu Onlineshop > Themes.

2. Klicken Sie auf das Drei-Punkte-Symbol (...) bei Ihrem Live-Theme und wählen Sie Code bearbeiten.

3. Öffnen Sie im Dateimenü auf der linken Seite den Ordner „Layout“ und klicken Sie auf „theme.liquid“.

4. Scrollen Sie ganz nach unten in der Datei. Fügen Sie direkt vor dem schließenden „“-Tag diesen Code-Schnipsel ein:

  

document.addEventListener('DOMContentLoaded', function() {  

  const customChatLinks = document.querySelectorAll('a[href="#open-chat"]');  

  if (customChatLinks.length > 0) {  

    const openShopifyChat = function(event) {  

      event.preventDefault();  

      const chatButton = document.querySelector('#ShopifyChat button[aria-controls="chat-ui"], #dummy-chat-button-iframe');  

      if (chatButton) {  

        chatButton.click();  

      } else {  

        // Fallback for when the button is inside an iframe  

        const iframe = document.querySelector('#dummy-chat-button-iframe');  

        if (iframe && iframe.contentWindow) {  

          const buttonInFrame = iframe.contentWindow.document.querySelector('button');  

          if (buttonInFrame) {  

            buttonInFrame.click();  

          } else {  

            console.warn('Shopify Chat button not found inside iframe.');  

          }  

        } else {  

          console.warn('Shopify Chat button not found.');  

        }  

      }  

    };  

    customChatLinks.forEach(link => {  

      link.addEventListener('click', openShopifyChat);  

    });  

  }  

});  

  

Was macht dieser Code also eigentlich? Er wartet einfach, bis die Seite geladen ist, und hält dann Ausschau nach jedem Link mit „href="#open-chat"“. Wenn jemand darauf klickt, verhindert das Skript, dass die Seite springt, und findet stattdessen den offiziellen Shopify Chat-Button und „klickt“ ihn für Sie. So einfach ist das.

Schritt 4: Testen Sie Ihren neuen Link

Klicken Sie auf die Schaltfläche „Speichern“ oben rechts im Code-Editor. Gehen Sie nun zu der Seite, auf der Sie Ihren benutzerdefinierten Link hinzugefügt haben, und probieren Sie ihn aus. Das Shopify Inbox Chat-Widget sollte aufklappen, genau als hätten Sie auf das schwebende Symbol geklickt.

Machen Sie ein paar Tests. Schließen Sie das Widget und klicken Sie erneut auf Ihren Link, um sicherzustellen, dass es reibungslos funktioniert.

Häufige Probleme und Fehlerbehebung

Obwohl dieses Skript ziemlich solide ist, kann die Arbeit mit benutzerdefiniertem Code manchmal ihre Tücken haben. Hier sind ein paar Dinge, die Sie beachten sollten.

• Was ist, wenn der Link nicht funktioniert? Wenn Ihr Link nicht funktioniert, ist die wahrscheinlichste Ursache, dass Shopify den Code des Chat-Widgets aktualisiert und die ID des Buttons geändert hat. Der Selektor in unserem Skript („#ShopifyChat button...“) ist so konzipiert, dass er gängige Variationen verarbeiten kann, aber eine größere Plattformänderung könnte ihn unbrauchbar machen. Das ist der Hauptnachteil von jedem benutzerdefinierten Code: Er könnte in Zukunft eine kleine Anpassung benötigen.

• Barrierefreiheit ist der Schlüssel: Verwenden Sie immer klare, beschreibende Texte für Ihre Links. „Mit unserem Support-Team chatten“ ist für Benutzer mit Bildschirmlesegeräten viel hilfreicher als etwas Vages wie „Hier klicken“.

• Leistung: Keine Sorge, dieses Skript ist unglaublich leichtgewichtig und hat keine spürbaren Auswirkungen auf die Geschwindigkeit Ihrer Website. Es ist nur eine gute Erinnerung daran, dass jeder benutzerdefinierte Code eine weitere Sache ist, die Sie selbst verwalten müssen.

Über den Link hinaus: Was passiert als Nächstes?

Den Link in den Griff zu bekommen, ist ein tolles Gefühl. Sie haben das Design Ihrer Website aufgeräumt und es Kunden erleichtert, mit Ihnen in Kontakt zu treten. Aber... was passiert als Nächstes? Sobald sie auf diesen Link klicken, beginnt die eigentliche Arbeit.

Das ist der Teil, den ein einfacher Code-Schnipsel nicht lösen kann. Wer ist da, um diese Chats zu beantworten? Was ist der Plan, wenn eine Nachricht spät in der Nacht ankommt? Wie halten Ihre Agenten mit den immer gleichen Fragen Schritt, wie „Wo ist meine Bestellung?“, ohne auszubrennen? Ein benutzerdefinierter Link ist ein großartiger erster Schritt, aber die Erfahrung kann schnell enttäuschend sein, wenn auf der anderen Seite keine schnelle, hilfreiche Antwort erfolgt.

Hier stößt der manuelle Support normalerweise an seine Grenzen, und Sie beginnen, über einen besseren Weg nachzudenken.

Eine KI-Plattform wie eesel AI ist darauf ausgelegt, dort anzusetzen, wo der manuelle Support aufhört. Der eesel AI Chatbot hilft nicht nur, ein Gespräch zu beginnen; er löst es oft sofort.

Ein eesel AI Chatbot, der automatisierten Support bietet und den Lieferstatus einer Bestellung über seine Shopify-Integration überprüft.

Hier ist, wie es die Herausforderungen angeht, die ein benutzerdefinierter Link allein nicht bewältigen kann:

• In wenigen Minuten einsatzbereit (ernsthaft): Anstatt mit Theme-Code herumzuspielen, verbindet sich eesel AI mit wenigen Klicks mit Shopify. Die Einrichtung ist komplett selbstbedienend, sodass Sie einen KI-Agenten in weniger Zeit für sich arbeiten lassen können, als es dauert, eine Tasse Kaffee zu kochen.

• Geben Sie ihm all Ihr Wissen: Sie können Ihre KI mit allem trainieren, von Ihren Hilfe-Center-Artikeln über frühere Support-Tickets bis hin zu Ihrem gesamten Shopify-Produktkatalog. Sie kann dann detaillierte Produktfragen beantworten, Rücksendungen bearbeiten und Richtlinien eigenständig erklären.

• Lassen Sie ihn die Arbeit für Sie erledigen: eesel AI kann mit benutzerdefinierten Aktionen eingerichtet werden, um live Bestellinformationen nachzuschlagen direkt aus Shopify. Wenn ein Kunde fragt: „Wo ist meine Bestellung?“, erhält er eine sofortige Echtzeit-Antwort, zu jeder Tageszeit, ohne dass ein Mensch einen Finger rühren muss.

• Testen Sie es, bevor Sie es starten: Sie fragen sich, wie eine KI bei Ihren Kunden tatsächlich abschneiden wird? Der Simulationsmodus von eesel AI ermöglicht es Ihnen, Ihre Einrichtung an Tausenden Ihrer vergangenen Kundengespräche zu testen, bevor sie live geht. Sie erhalten eine klare Prognose, wie effektiv sie vom ersten Tag an sein wird.

Die Kontrolle über Ihren Kundenchat übernehmen

Sie haben jetzt eine solide, moderne Methode, um einen klickbaren Link zum Öffnen Ihres Shopify-Chat-Widgets zu erstellen, was Ihnen mehr Kontrolle über das Erscheinungsbild Ihres Shops gibt. Es ist eine fantastische Anpassung für eine sauberere, benutzerfreundlichere Website.

Aber wenn Ihr Shop wächst, werden Sie feststellen, dass die Reparatur des Chat-Buttons nur der Anfang ist. Der wahre Gewinn liegt in der Verbesserung des gesamten Chat-Erlebnisses. Benutzerdefinierter Code muss ständig überwacht werden, und selbst das engagierteste Support-Team kann nicht überall gleichzeitig sein.

Für Shopify-Shops, die sofortigen, genauen und markenkonformen Support anbieten möchten, der mit ihrem Geschäft skalieren kann, ist eine KI-gestützte Lösung der natürliche nächste Schritt. So verwandeln Sie den Kundenservice von einer täglichen Pflichtaufgabe in einen echten Wachstumsfaktor.

Bereit zu sehen, wie sich ein vollständig automatisiertes Support-Erlebnis anfühlt? Testen Sie eesel AI kostenlos und erstellen Sie Ihren ersten KI-Chatbot für Shopify in nur wenigen Minuten.