Az Asyntai AI Chatbot hozzáadása a CrafterCMS-hez

Platform:

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

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

2. lépés: Hozzáadás FreeMarker sablonhoz (ajánlott)

A CrafterCMS FreeMarker (.ftl) sablonokat használ az oldalak megjelenítéséhez. A legegyszerűbb módja, hogy az összes oldalhoz hozzáadja a chatbotot, a fő oldalsablon szerkesztése:

1. A Crafter Studio-ban lépjen a Webhelyirányítópult > Tartalomtípusok menübe, vagy navigáljon a sablonokhoz
2. Nyissa meg a fő oldalsablont (pl. /templates/web/pages/home.ftl vagy az alap elrendezést)
3. Keresse meg a záró </body> taget
4. Illessze be az Asyntai beágyazási kódot közvetlenül a </body> tag elé:
   <!-- Asyntai AI Chatbot --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
5. Mentse el a fájlt, és tegye közzé a Crafter Studio-n keresztül

Alternatív 1. módszer: Crafter sablon komponensek használata

A jobb rendszerezés érdekében hozzon létre egy dedikált komponenssablont a chatbot widgethez:

1. A Crafter Studio-ban hozzon létre egy új sablonfájlt a /templates/web/components/asyntai-widget.ftl helyen
2. Adja hozzá a következő tartalmat a komponenssablonhoz:
   <!-- Asyntai AI Chatbot Component --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. Foglalja bele a fő elrendezési sablonba egy FreeMarker include direktíva segítségével:
   <#include "/templates/web/components/asyntai-widget.ftl" />
4. Alternatívaként, ha a Crafter komponens-megjelenítő rendszerét használja, alkalmazza:
   <@renderComponent component=contentModel.asyntaiWidget />
5. Mentse el mindkét fájlt, és tegye közzé a Crafter Studio-n keresztül

Alternatív 2. módszer: A Crafter Head/Scripts konfigurációjának használata

A CrafterCMS lehetővé teszi a szkriptek globális befecskendezését a webhely-konfiguráción keresztül:

1. A Crafter Studio-ban navigáljon a Webhely-konfiguráció > Konfiguráció menübe
2. Nyissa meg a Motor webhely-konfigurációs fájlt (site-config.xml)
3. Adjon hozzá egyéni szkriptbefecskendezési konfigurációt:
   <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. Alternatívaként szerkessze az alap FreeMarker elrendezést, hogy a webhely-konfigurációból olvasson és dinamikusan injectálja a szkripteket:
   <#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. Mentse el és tegye közzé a konfigurációs módosításokat

Alternatív 3. módszer: Groovy Controller használata

A CrafterCMS támogatja a Groovy szkripteket a szerver oldali logikához. Egy controller segítségével dinamikusan hozzáadhatja a chatbot szkriptet:

1. Hozzon létre egy Groovy szkriptet a /scripts/pages/ könyvtárban (pl. /scripts/pages/home.groovy vagy az egész webhelyre kiterjedő controller)
2. Adja hozzá a következő kódot a szkript URL-jének befecskendezéséhez a sablonmodellbe:
   // /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. Ezután hivatkozzon a modellváltozókra a FreeMarker sablonban:
   <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
4. Mentse el a Groovy szkriptet és a sablonfájlt is
5. Tegye közzé a módosításokat a Crafter Studio-n keresztül

3. lépés: Közzététel és ellenőrzés

A módosítások elvégzése után tegye közzé azokat a Crafter Studio-n keresztül:

1. A Crafter Studio-ban lépjen a Webhelyirányítópultra
2. Tekintse át módosításait a Legutóbbi tevékenységem vagy a Jóváhagyásra vár szakaszban
3. Kattintson a Közzététel gombra a módosítások éles webhelyen történő telepítéséhez
4. Látogasson el CrafterCMS webhelyére egy új böngészőlapon vagy inkognitóablakban
5. Látnia kell a chat widget gombot a jobb alsó sarokban
6. Kattintson rá, hogy megbizonyosodjon a helyes megnyitásról és működésről