So fügen Sie den Asyntai AI Chatbot zu BigCommerce hinzu

Schritt-für-Schritt-Anleitung für BigCommerce-Shops

Plattform:

Schritt 1: Ihren Einbettungscode erhalten

Gehen Sie zunächst zu Ihrem Asyntai Dashboard und scrollen Sie zum Abschnitt "Einbettungscode". Kopieren Sie Ihren einzigartigen Einbettungscode, der so aussieht:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Hinweis: Der obige Code ist nur ein Beispiel. Sie müssen Ihren eigenen einzigartigen Einbettungscode von Ihrem Dashboard kopieren, da er Ihre persönliche Widget-ID enthält.

Schritt 2: Installationsmethode wählen

Es gibt mehrere Möglichkeiten, das Chat-Widget zu BigCommerce hinzuzufügen. Wählen Sie die Methode, die am besten zu Ihnen passt:

Methode 1: Verwendung des Script Managers (Empfohlen)

Der Script Manager ist der einfachste und empfohlene Weg, benutzerdefinierte Skripte zu Ihrem BigCommerce-Shop hinzuzufügen. Er erfordert keine Programmierkenntnisse und bleibt bei Theme-Änderungen erhalten.

Melden Sie sich in Ihrem BigCommerce Control Panel an
Gehen Sie zu Storefront → Script Manager
Klicken Sie auf die Schaltfläche "Create a Script"
Konfigurieren Sie Ihr Skript mit diesen Einstellungen:
- Name: Asyntai AI Chatbot
- Beschreibung: KI-gestütztes Chat-Widget (optional)
- Platzierung: Footer
- Ort: Alle Seiten
- Skript-Kategorie: Functional
- Skript-Typ: Script
Fügen Sie im Feld "Script Contents" Ihren Asyntai-Einbettungscode ein
Klicken Sie auf "Save"

Warum den Script Manager verwenden? Skripte, die über den Script Manager hinzugefügt werden, werden getrennt von Ihrem Theme verwaltet. Sie werden nicht beeinträchtigt, wenn Sie Ihr Shop-Theme aktualisieren oder ändern.

Methode 2: Verwendung des Page Builders

Sie können den Page Builder von BigCommerce verwenden, um das Chat-Widget mit einem HTML-Element hinzuzufügen. Diese Methode ist nützlich, wenn Sie mehr Kontrolle darüber haben möchten, wo das Widget erscheint.

Melden Sie sich in Ihrem BigCommerce Control Panel an
Gehen Sie zu Storefront → My Themes
Click the "Customize" button on your active theme
Suchen Sie in der linken Seitenleiste des Page Builders das "HTML"-Element
Ziehen Sie das HTML-Element per Drag & Drop in den Footer-Bereich Ihrer Seitenvorlage
Click on the HTML element and select "Edit HTML"
Fügen Sie Ihren Asyntai-Einbettungscode ein
Klicken Sie auf "Save HTML"
Click "Publish" to apply changes to your live store

Hinweis: Wenn Sie den Chatbot auf allen Seiten haben möchten, müssen Sie ihn in einem globalen Bereich wie dem Footer hinzufügen. Die Script-Manager-Methode ist einfacher für eine seitenweite Installation.

Methode 3: Theme-Dateien bearbeiten (Stencil Themes)

Für Entwickler, die Stencil Themes verwenden, können Sie den Code direkt in Ihre Theme-Dateien einfügen. Dies erfordert Zugriff auf die Quelldateien Ihres Themes.

Verwendung des BigCommerce Control Panels

Gehen Sie zu Storefront → My Themes
Klicken Sie auf "Advanced" bei Ihrem aktiven Theme
Wählen Sie "Edit Theme Files"
Navigieren Sie zu templates → components → common
Öffnen Sie footer.html
Scrollen Sie zum Ende der Datei
Paste your Asyntai embed code just before the closing tag
Klicken Sie auf "Save & Apply File"

Verwendung der Stencil CLI (Lokale Entwicklung)

Wenn Sie lokal mit der Stencil CLI entwickeln:

Öffnen Sie die lokalen Dateien Ihres Themes
Navigate to templates/components/common/footer.html
Fügen Sie Ihren Asyntai-Einbettungscode vor den schließenden Tags ein
Übertragen Sie Ihre Änderungen mit stencil push

Wichtig: Änderungen an Theme-Dateien können beim Aktualisieren Ihres Themes überschrieben werden. Für eine dauerhafte Lösung, die bei Theme-Updates erhalten bleibt, verwenden Sie die Script-Manager-Methode.

Schritt 3: Installation überprüfen

Nachdem Sie den Code hinzugefügt haben, besuchen Sie Ihren BigCommerce-Shop in einem neuen Browser-Tab oder Inkognito-Fenster. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke Ihres Shops sehen. Klicken Sie darauf, um sicherzustellen, dass er sich öffnet und korrekt funktioniert.

Widget nicht sichtbar? Leeren Sie Ihren Browser-Cache und versuchen Sie es erneut. Wenn Sie Änderungen über den Theme-Editor vorgenommen haben, stellen Sie sicher, dass Sie auf "Publish" geklickt haben, um die Änderungen auf Ihren Live-Shop anzuwenden.

Dokumentation