Jak dodać chatbota AI Asyntai do CrafterCMS

Platforma:

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

Krok 1: Pobierz swój kod osadzania

Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

Krok 2: Dodaj do szablonu FreeMarker (zalecane)

CrafterCMS używa szablonów FreeMarker (.ftl) do renderowania stron. Najłatwiejszym sposobem dodania chatbota do wszystkich stron jest edycja głównego szablonu strony:

1. W Crafter Studio przejdź do Site Dashboard > Content Types lub przejdź do szablonów
2. Otwórz główny szablon strony (np. /templates/web/pages/home.ftl lub układ bazowy)
3. Znajdź zamykający znacznik </body>
4. Wklej kod osadzania Asyntai tuż przed znacznikiem </body>:
   <!-- Asyntai AI Chatbot --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
5. Zapisz plik i opublikuj przez Crafter Studio

Metoda alternatywna 1: Użycie komponentów szablonów Crafter

Dla lepszej organizacji utwórz dedykowany szablon komponentu dla widgetu chatbota:

1. W Crafter Studio utwórz nowy plik szablonu w /templates/web/components/asyntai-widget.ftl
2. Dodaj następującą treść do szablonu komponentu:
   <!-- Asyntai AI Chatbot Component --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. Dołącz go do głównego szablonu układu za pomocą dyrektywy include FreeMarker:
   <#include "/templates/web/components/asyntai-widget.ftl" />
4. Alternatywnie, jeśli używasz systemu renderowania komponentów Crafter, użyj:
   <@renderComponent component=contentModel.asyntaiWidget />
5. Zapisz oba pliki i opublikuj przez Crafter Studio

Metoda alternatywna 2: Użycie konfiguracji Head/Scripts Crafter

CrafterCMS pozwala globalnie wstrzykiwać skrypty przez konfigurację witryny:

1. W Crafter Studio przejdź do Site Config > Configuration
2. Otwórz plik Engine Site Configuration (site-config.xml)
3. Dodaj konfigurację wstrzykiwania własnego skryptu:
   <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. Alternatywnie edytuj bazowy układ FreeMarker, aby odczytywał konfigurację witryny i dynamicznie wstrzykiwał skrypty:
   <#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. Zapisz i opublikuj zmiany konfiguracji

Metoda alternatywna 3: Użycie kontrolera Groovy

CrafterCMS obsługuje skrypty Groovy dla logiki po stronie serwera. Możesz użyć kontrolera do dynamicznego dodawania skryptu chatbota:

1. Utwórz skrypt Groovy w /scripts/pages/ (np. /scripts/pages/home.groovy lub kontroler dla całej witryny)
2. Dodaj następujący kod, aby wstrzyknąć adres URL skryptu do modelu szablonu:
   // /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. Następnie odwołaj się do zmiennych modelu w szablonie FreeMarker:
   <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
4. Zapisz zarówno skrypt Groovy, jak i plik szablonu
5. Opublikuj zmiany przez Crafter Studio

Krok 3: Opublikuj i zweryfikuj

Po wprowadzeniu zmian opublikuj je przez Crafter Studio:

1. W Crafter Studio przejdź do Site Dashboard
2. Przejrzyj swoje zmiany w sekcji My Recent Activity lub Pending Approval
3. Kliknij Publish, aby wdrożyć zmiany na swojej stronie internetowej
4. Odwiedź swoją stronę CrafterCMS w nowej karcie przeglądarki lub w oknie incognito
5. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu
6. Kliknij go, aby upewnić się, że otwiera się i działa prawidłowo