Come aggiungere il chatbot IA Asyntai a CrafterCMS

Piattaforma:

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

Passaggio 1: ottieni il tuo codice di incorporamento

Per prima cosa, vai alla tua Dashboard Asyntai e scorri fino alla sezione "Codice di incorporamento". Copia il tuo codice di incorporamento univoco che apparirà così:

Passaggio 2: Aggiungi al template FreeMarker (consigliato)

CrafterCMS utilizza template FreeMarker (.ftl) per il rendering delle pagine. Il modo più semplice per aggiungere il chatbot a tutte le pagine è modificare il template principale della pagina:

1. In Crafter Studio, vai su Site Dashboard > Content Types o naviga ai template
2. Apri il template principale della pagina (ad es., /templates/web/pages/home.ftl o il layout base)
3. Trova il tag di chiusura </body>
4. Incolla il codice di incorporamento Asyntai appena prima del tag </body>:
   <!-- Asyntai AI Chatbot --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
5. Salva il file e pubblica tramite Crafter Studio

Metodo alternativo 1: Utilizzo dei componenti template di Crafter

Per una migliore organizzazione, crea un template componente dedicato per il widget del chatbot:

1. In Crafter Studio, crea un nuovo file template in /templates/web/components/asyntai-widget.ftl
2. Aggiungi il seguente contenuto al template del componente:
   <!-- Asyntai AI Chatbot Component --> <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. Includilo nel template di layout principale utilizzando una direttiva include di FreeMarker:
   <#include "/templates/web/components/asyntai-widget.ftl" />
4. In alternativa, se utilizzi il sistema di rendering dei componenti di Crafter, usa:
   <@renderComponent component=contentModel.asyntaiWidget />
5. Salva entrambi i file e pubblica tramite Crafter Studio

Metodo alternativo 2: Utilizzo della configurazione Head/Scripts di Crafter

CrafterCMS ti consente di iniettare script globalmente tramite la configurazione del sito:

1. In Crafter Studio, vai su Site Config > Configuration
2. Apri il file Engine Site Configuration (site-config.xml)
3. Aggiungi una configurazione di iniezione di script personalizzata:
   <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. In alternativa, modifica il layout FreeMarker di base per leggere dalla configurazione del sito e iniettare gli script dinamicamente:
   <#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 e pubblica le modifiche alla configurazione

Metodo alternativo 3: Utilizzo del controller Groovy

CrafterCMS supporta gli script Groovy per la logica lato server. Puoi utilizzare un controller per aggiungere dinamicamente lo script del chatbot:

1. Crea uno script Groovy in /scripts/pages/ (ad es., /scripts/pages/home.groovy o il controller a livello di sito)
2. Aggiungi il seguente codice per iniettare l'URL dello script nel modello del template:
   // /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. Quindi fai riferimento alle variabili del modello nel tuo template FreeMarker:
   <#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
4. Salva sia lo script Groovy che il file del template
5. Pubblica le modifiche tramite Crafter Studio

Passaggio 3: Pubblica e verifica

Dopo aver apportato le modifiche, pubblicale tramite Crafter Studio:

1. In Crafter Studio, vai su Site Dashboard
2. Rivedi le modifiche nella sezione My Recent Activity o Pending Approval
3. Clicca su Publish per rendere le modifiche attive
4. Visita il tuo sito web CrafterCMS in una nuova scheda del browser o in una finestra di navigazione in incognito
5. Dovresti vedere il pulsante del widget chat nell'angolo in basso a destra della tua pagina
6. Cliccaci sopra per assicurarti che si apra e funzioni correttamente