Asyntai AI -chatbotin lisääminen CrafterCMS-alustalle

Vaiheittainen opas CrafterCMS-verkkosivustoille

Alusta:

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.

Vaihe 2: Lisää FreeMarker-malliin (suositeltu)

CrafterCMS käyttää FreeMarker (.ftl) -malleja sivujen renderöintiin. Helpoin tapa lisätä chatbot kaikille sivuille on muokata pääsivumalliasi:

Siirry Crafter Studiossa kohtaan Site Dashboard > Content Types tai siirry malleihin
Avaa pääsivumallisi (esim. /templates/web/pages/home.ftl tai perusasettelu)
Etsi sulkeva </body>-tagi
Liitä Asyntai-upotuskoodisi juuri ennen </body>-tagia:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Tallenna tiedosto ja julkaise Crafter Studion kautta

Vinkki: Skriptin lisääminen ennen sulkevaa </body>-tagia varmistaa, että se latautuu sivun sisällön jälkeen, mikä on suositeltavaa chat-widgeteille eikä hidasta sivun latautumista.

Vaihtoehtoinen tapa 1: Crafter-mallikomponenttien käyttö

Parempaa organisointia varten luo erillinen komponenttimalli chatbot-widgetille:

Luo Crafter Studiossa uusi mallitiedosto sijaintiin /templates/web/components/asyntai-widget.ftl
Lisää seuraava sisältö komponenttimalliin:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Sisällytä se pääasettelumalliin FreeMarker-sisällytysdirektiivillä:
<#include "/templates/web/components/asyntai-widget.ftl" />
Vaihtoehtoisesti, jos käytät Crafterin komponenttien renderöintijärjestelmää, käytä:
<@renderComponent component=contentModel.asyntaiWidget />
Tallenna molemmat tiedostot ja julkaise Crafter Studion kautta

Huomautus: Erillisen komponenttimallin käyttö helpottaa chatbotin käyttöönottoa tai poistamista koko sivustolla kommentoimalla yksi ainoa sisällytysrivi.

Vaihtoehtoinen tapa 2: Crafterin Head/Scripts-konfiguraation käyttö

CrafterCMS mahdollistaa skriptien lisäämisen globaalisti sivuston konfiguraation kautta:

Siirry Crafter Studiossa kohtaan Site Config > Configuration
Avaa Engine Site Configuration -tiedosto (site-config.xml)
Lisää mukautettu skriptin lisäyskonfiguraatio:
<site>   <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>
Vaihtoehtoisesti muokkaa FreeMarker-perusasetteluasi lukemaan sivuston konfiguraatiosta ja lisäämään skriptit dynaamisesti:
<#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>
Tallenna ja julkaise konfiguraatiomuutokset

Vinkki: Sivuston konfiguraation käyttö mahdollistaa chatbot-widgetin hallinnan ilman mallitiedostojen suoraa muokkaamista, mikä helpottaa päivittämistä tai poistamista myöhemmin.

Vaihtoehtoinen tapa 3: Groovy-kontrollerin käyttö

CrafterCMS tukee Groovy-skriptejä palvelinpuolen logiikkaan. Voit käyttää kontrolleria chatbot-skriptin dynaamiseen lisäämiseen:

Luo Groovy-skripti kansioon /scripts/pages/ (esim. /scripts/pages/home.groovy tai sivuston laajuinen kontrolleri)
Lisää seuraava koodi skriptin URL:n lisäämiseksi sivumalliin:
// /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"
Viittaa sitten mallimuuttujiin FreeMarker-mallissasi:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Tallenna sekä Groovy-skripti että mallitiedosto
Julkaise muutokset Crafter Studion kautta

Huomautus: Groovy-kontrollerilähestymistapa on hyödyllinen, kun tarvitset ehdollista logiikkaa (esim. chatbotin käyttöönotto vain tietyille käyttäjärooleille tai sivutyypeille) tai kun haluat hakea konfiguraatioarvoja ulkoisista lähteistä.

Vaihe 3: Julkaise ja vahvista

Kun olet tehnyt muutokset, julkaise ne Crafter Studion kautta:

Siirry Crafter Studiossa kohtaan Site Dashboard
Tarkista muutoksesi My Recent Activity tai Pending Approval -osiossa
Napsauta Publish ottaaksesi muutokset käyttöön
Avaa verkkosivustosi uudessa selainvälilehdessä tai incognito-ikkunassa
Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa
Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein

Etkö näe widgetiä? Varmista, että julkaisit muutokset Crafter Studion kautta. Tarkista, että muokkaat oikeaa mallitiedostoa, jota sivusi käyttävät. Tyhjennä selaimen välimuisti tai katso sivua incognito-ikkunassa. Jos käytät Crafterin välimuistia, tyhjennä Engine-välimuisti Crafter Studion hallintapaneelista.

Mallin sijainti: CrafterCMS:n mallien sijainnit voivat vaihdella projektisi rakenteesta riippuen. Yleisiä sijainteja ovat /templates/web/pages/ sivumalleille, /templates/web/components/ komponenttimalleille ja /templates/web/ asettelumalleille. Tarkista olemassa olevat mallisi löytääksesi, missä </body>-tagi on määritelty.