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

Plattform:

CrafterCMS

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Docusaurus Hugo Kentico Volusion Craft CMS Contentful Strapi Joomla Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Statamic Umbraco 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: Zum FreeMarker-Template hinzufügen (Empfohlen)

CrafterCMS verwendet FreeMarker (.ftl) Templates zum Rendern von Seiten. Der einfachste Weg, den Chatbot zu allen Seiten hinzuzufügen, ist die Bearbeitung Ihres Haupt-Seiten-Templates:

1. Gehen Sie in Crafter Studio zu Site Dashboard > Content Types oder navigieren Sie zu den Templates
2. Öffnen Sie Ihr Haupt-Seiten-Template (z.B. /templates/web/pages/home.ftl oder das Basis-Layout)
3. Suchen Sie das schließende </body>-Tag
4. Fügen Sie Ihren Asyntai-Einbettungscode direkt vor dem </body>-Tag ein:
   <!-- Asyntai AI Chatbot --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
5. Speichern Sie die Datei und veröffentlichen Sie über Crafter Studio

Alternative Methode 1: Verwendung von Crafter-Template-Komponenten

Für eine bessere Organisation erstellen Sie ein dediziertes Komponenten-Template für das Chatbot-Widget:

1. Erstellen Sie in Crafter Studio eine neue Template-Datei unter /templates/web/components/asyntai-widget.ftl
2. Fügen Sie den folgenden Inhalt zum Komponenten-Template hinzu:
   <!-- Asyntai AI Chatbot Component --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. Binden Sie es in Ihr Haupt-Layout-Template mit einer FreeMarker-Include-Direktive ein:
   <#include "/templates/web/components/asyntai-widget.ftl" />
4. Alternativ, wenn Sie Crafters Komponenten-Rendering-System verwenden:
   <@renderComponent component=contentModel.asyntaiWidget />
5. Speichern Sie beide Dateien und veröffentlichen Sie über Crafter Studio

Alternative Methode 2: Crafters Head/Scripts-Konfiguration verwenden

CrafterCMS ermöglicht das globale Einbinden von Skripten über die Website-Konfiguration:

1. Navigieren Sie in Crafter Studio zu Site Config > Configuration
2. Öffnen Sie die Datei Engine Site Configuration (site-config.xml)
3. Fügen Sie eine benutzerdefinierte Skript-Injektionskonfiguration hinzu:
   <site> <!-- Existing configuration... --> <!-- Custom Scripts --> <scripts> <script> <src>https://asyntai.com/static/js/chat-widget.js</src> <async>true</async> <data-asyntai-id>YOUR_WIDGET_ID</data-asyntai-id> </script> </scripts> </site>
4. Alternativ bearbeiten Sie Ihr Basis-FreeMarker-Layout, um aus der Website-Konfiguration zu lesen und Skripte dynamisch einzubinden:
   <#if siteConfig.getString("scripts.script.src", "")?has_content> <script async src="${siteConfig.getString("scripts.script.src")}" data-asyntai-id="${siteConfig.getString("scripts.script.data-asyntai-id")}"></script> </#if>
5. Speichern und veröffentlichen Sie die Konfigurationsänderungen

Alternative Methode 3: Verwendung eines Groovy-Controllers

CrafterCMS unterstützt Groovy-Skripte für serverseitige Logik. Sie können einen Controller verwenden, um das Chatbot-Skript dynamisch hinzuzufügen:

1. Erstellen Sie ein Groovy-Skript in /scripts/pages/ (z.B. /scripts/pages/home.groovy oder Ihren seitenweiten Controller)
2. Fügen Sie den folgenden Code hinzu, um die Skript-URL in das Template-Modell einzufügen:
   // /scripts/pages/home.groovy import org.craftercms.engine.service.context.SiteContext def siteContext = SiteContext.current // Add Asyntai chatbot configuration to the model model.asyntaiEnabled = true model.asyntaiWidgetId = "YOUR_WIDGET_ID" model.asyntaiScriptSrc = "https://asyntai.com/static/js/chat-widget.js"
3. Referenzieren Sie dann die Modellvariablen in Ihrem FreeMarker-Template:
   <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
4. Speichern Sie sowohl das Groovy-Skript als auch die Template-Datei
5. Veröffentlichen Sie die Änderungen über Crafter Studio

Schritt 3: Veröffentlichen und überprüfen

Veröffentlichen Sie Ihre Änderungen nach der Bearbeitung über Crafter Studio:

1. Gehen Sie in Crafter Studio zum Site Dashboard
2. Überprüfen Sie Ihre Änderungen im Abschnitt My Recent Activity oder Pending Approval
3. Klicken Sie auf Veröffentlichen, um die Änderungen auf Ihrer Live-Website bereitzustellen
4. Besuchen Sie Ihre CrafterCMS-Website in einem neuen Browser-Tab oder Inkognito-Fenster
5. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke sehen
6. Klicken Sie darauf, um sicherzustellen, dass es korrekt öffnet und funktioniert