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

Plattform:

PrestaShop

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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:

Schritt 2: Benutzerdefiniertes Code-Modul verwenden (empfohlen)

Der einfachste Weg, den Chatbot hinzuzufügen, ist die Verwendung eines kostenlosen "Custom Code"-Moduls aus dem PrestaShop Addons-Marktplatz:

1. Melden Sie sich in Ihrem PrestaShop Back Office an
2. Gehen Sie zu Modules → Module Manager
3. Klicken Sie auf "Upload a module" oder suchen Sie im Marktplatz nach "Custom Code" oder "Header Footer Scripts"
4. Install a module like "Custom JS and CSS" or similar
5. Gehen Sie nach der Installation zur Konfiguration des Moduls
6. Finden Sie den Abschnitt "Footer Scripts" oder "Before </body>"
7. Fügen Sie Ihren Asyntai-Einbettungscode ein
8. Klicken Sie auf "Save"

Alternative: Theme-Vorlage bearbeiten (PrestaShop 1.7+/8)

Sie können den Code direkt zur Footer-Vorlage Ihres Themes hinzufügen:

1. Access your PrestaShop files via FTP or file manager
2. Navigieren Sie zu Ihrem Theme-Ordner: themes/your_theme/templates/_partials/
3. Öffnen Sie die Datei footer.tpl (oder überprüfen Sie bei manchen Themes templates/layouts/layout-both-columns.tpl)
4. Finden Sie das schließende </body>-Tag oder den Abschnitt {block name='javascript_bottom'}
5. Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dem schließenden </body>-Tag ein
6. Speichern Sie die Datei
7. Leeren Sie den PrestaShop-Cache: Advanced Parameters → Performance → Clear cache

Alternative: Benutzerdefinierte JavaScript-Datei des Themes verwenden

Many PrestaShop themes include a custom.js file for your own scripts:

1. Navigieren Sie zu: themes/your_theme/assets/js/
2. Suchen Sie nach einer Datei namens custom.js (erstellen Sie sie, falls sie nicht existiert)
3. Fügen Sie den folgenden Code hinzu, um den Chatbot dynamisch zu laden:
   (function() {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
})();
4. Replace YOUR_WIDGET_ID with your actual widget ID
5. Leeren Sie den PrestaShop-Cache

Alternative: Ein einfaches Modul erstellen (für Entwickler)

Für Entwickler können Sie ein einfaches Modul mit dem displayFooter-Hook erstellen:

1. Erstellen Sie einen Ordner: modules/asyntaichatbot/
2. Erstellen Sie asyntaichatbot.php mit folgendem Code:
   <?php
class AsyntaiChatbot extends Module {
  public function __construct() {
    $this->name = 'asyntaichatbot';
    $this->version = '1.0.0';
    $this->author = 'Your Name';
    parent::__construct();
    $this->displayName = 'Asyntai Chatbot';
  }
  public function install() {
    return parent::install() && $this->registerHook('displayFooter');
  }
  public function hookDisplayFooter($params) {
    return '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
  }
}
3. Replace YOUR_WIDGET_ID with your actual widget ID
4. Install the module via Modules → Module Manager

Schritt 3: Installation überprüfen

Nachdem Sie Ihre Änderungen gespeichert und den Cache geleert haben, besuchen Sie Ihren Shop in einem neuen Browser-Tab oder Inkognito-Fenster. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke sehen. Klicken Sie darauf, um sicherzustellen, dass er sich öffnet und korrekt funktioniert.