Cum să adăugați chatbot-ul AI Asyntai pe CrafterCMS

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

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați panoul de control Asyntai și derulați în jos până la secțiunea "Cod de integrare". Copiați codul dvs. unic de integrare, care va arăta astfel:

Pasul 2: Adăugați în șablonul FreeMarker (Recomandat)

CrafterCMS folosește șabloane FreeMarker (.ftl) pentru redarea paginilor. Cel mai simplu mod de a adăuga chatbot-ul pe toate paginile este prin editarea șablonului principal de pagină:

1. În Crafter Studio, mergeți la Site Dashboard > Content Types sau navigați la șabloane
2. Deschideți șablonul principal de pagină (de ex., /templates/web/pages/home.ftl sau layout-ul de bază)
3. Găsiți eticheta de închidere </body>
4. Lipiți codul de integrare Asyntai chiar înainte de eticheta </body>:
   <!-- Asyntai AI Chatbot --> <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script> </body>
5. Salvați fișierul și publicați prin Crafter Studio

Metoda alternativă 1: Utilizarea componentelor de șablon Crafter

Pentru o organizare mai bună, creați un șablon de componentă dedicat pentru widget-ul chatbot:

1. În Crafter Studio, creați un fișier de șablon nou la /templates/web/components/asyntai-widget.ftl
2. Adăugați următorul conținut în șablonul componentei:
   <!-- Asyntai AI Chatbot Component --> <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
3. Includeți-l în șablonul de layout principal folosind o directivă include FreeMarker:
   <#include "/templates/web/components/asyntai-widget.ftl" />
4. Alternativ, dacă folosiți sistemul de randare a componentelor Crafter, utilizați:
   <@renderComponent component=contentModel.asyntaiWidget />
5. Salvați ambele fișiere și publicați prin Crafter Studio

Metoda alternativă 2: Utilizarea configurației Head/Scripts din Crafter

CrafterCMS vă permite să injectați scripturi global prin configurația site-ului:

1. În Crafter Studio, navigați la Site Config > Configuration
2. Deschideți fișierul Engine Site Configuration (site-config.xml)
3. Adăugați o configurație de injectare a scriptului personalizat:
   <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, editați layout-ul FreeMarker de bază pentru a citi din configurația site-ului și a injecta scripturi dinamic:
   <#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. Salvați și publicați modificările de configurație

Metoda alternativă 3: Utilizarea controlerului Groovy

CrafterCMS suportă scripturi Groovy pentru logica pe server. Puteți utiliza un controler pentru a adăuga dinamic scriptul chatbot-ului:

1. Creați un script Groovy în /scripts/pages/ (de ex., /scripts/pages/home.groovy sau controlerul pentru întregul site)
2. Adăugați următorul cod pentru a injecta URL-ul scriptului în modelul șablonului:
   // /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. Apoi referențiați variabilele modelului în șablonul FreeMarker:
   <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
4. Salvați atât scriptul Groovy, cât și fișierul de șablon
5. Publicați modificările prin Crafter Studio

Pasul 3: Publicați și verificați

După ce ați făcut modificările, publicați-le prin Crafter Studio:

1. În Crafter Studio, mergeți la Site Dashboard
2. Revizuiți modificările în secțiunea My Recent Activity sau Pending Approval
3. Faceți clic pe Publish pentru a implementa modificările pe site-ul dvs. live
4. Deschideți site-ul dvs. într-o filă nouă de browser sau fereastră incognito
5. Ar trebui să vedeți butonul widgetului de chat în colțul din dreapta jos
6. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect