Ako pridať Asyntai AI chatbota do CrafterCMS

Návod krok za krokom pre webové stránky CrafterCMS

Platforma:

Krok 1: Získajte svoj vkladací kód

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:

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

Poznámka: Kód vyššie je len príklad. Musíte skopírovať svoj vlastný jedinečný vkladací kód zo svojho Dashboardu, pretože obsahuje vaše osobné ID widgetu.

Krok 2: Pridanie do šablóny FreeMarker (odporúčané)

CrafterCMS pouziva šablóny FreeMarker (.ftl) na vykreslovanie stránok. Najjednoduchší sposob pridania chatbota na všetky stránky je uprava vasej hlavnej šablóny stránky:

V Crafter Studio prejdite na Dashboard stránky > Typy obsahu alebo prejdite na šablóny
Otvorte svoju hlavnu šablónu stránky (napr. /templates/web/pages/home.ftl alebo zakladne rozloženie)
Nájdite uzatvárací tag </body>
Vložíte svoj vkladací kod Asyntai tesne pred tag </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Uložte súbor a publikujte cez Crafter Studio

Tip: Pridanie skriptu pred uzatvaraci tag </body> zabezpeci, ze sa nacita po obsahu stránky, co je odporúčané pre chatove widgety a nespomalí nacitanie vasej stránky.

Alternativna metoda 1: Použitie komponentov šablón Crafter

Pre lepšiu organizaciu vytvorte vyhradenu komponentnu šablónu pre widget chatbota:

V Crafter Studio vytvorte novy súbor šablóny v /templates/web/components/asyntai-widget.ftl
Pridajte nasledujuci obsah do komponentnej šablóny:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Zahrnte ju do svojej hlavnej šablóny rozloženia pomocou direktivy FreeMarker include:
<#include "/templates/web/components/asyntai-widget.ftl" />
Alternatívne, ak používate systém vykresľovania komponentov Crafter, použite:
<@renderComponent component=contentModel.asyntaiWidget />
Uložte oba súbory a publikujte cez Crafter Studio

Poznámka: Použitie samostatnej komponentnej šablóny uľahcuje povolenie alebo zakazanie chatbota na celom vasom webe zakomentovanim jedneho riadku zahrnutia.

Alternatívna metóda 2: Použitie konfigurácie hlavičky/skriptov Crafter

CrafterCMS vam umoznuje globalne vkladat skripty cez konfiguráciu stránky:

V Crafter Studio prejdite na Konfiguracia stránky > Konfiguracia
Otvorte súbor Konfiguracia Engine stránky (site-config.xml)
Pridajte vlastnú konfiguráciu vkladania skriptov:
<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>
Alternatívne upravte svoje základné rozloženie FreeMarker na čítanie z konfigurácie stránky a dynamické vkladanie skriptov:
<#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>
Uložte a publikujte konfiguračné zmeny

Tip: Použitie konfigurácie stránky vám umožňuje spravovať widget chatbota bez priamej úpravy súborov šablón, čo uľahčuje neskoršiu aktualizáciu alebo odstránenie.

Alternativna metoda 3: Použitie kontrolera Groovy

CrafterCMS podporuje skripty Groovy pre serverovu logiku. Môžete pouzit kontroler na dynamicke pridanie skriptu chatbota:

Vytvorte skript Groovy v /scripts/pages/ (napr. /scripts/pages/home.groovy alebo vas kontroler pre cely web)
Pridajte nasledujuci kod na vloženie URL skriptu do modelu šablóny:
// /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"
Potom odkazujte na premenne modelu vo vasej šablóne FreeMarker:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Uložte skript Groovy aj súbor šablóny
Publikujte zmeny cez Crafter Studio

Poznámka: Pristup s kontrolerom Groovy je uzitocny, ked potrebujete podmienenu logiku (napr. povolenie chatbota len pre určité role pouzivatelov alebo typy stránok) alebo ked chcete ziskavat konfiguračné hodnoty z externych zdrojov.

Krok 3: Publikovanie a overenie

Po vykonani zmien ich publikujte cez Crafter Studio:

V Crafter Studio prejdite na Dashboard stránky
Skontrolujte svoje zmeny v sekcii Moja nedavna aktivita alebo Cakajuce na schvalenie
Kliknite na Publikovat na zverejnenie zmien
Navštívte svoju webovú stránku CrafterCMS v novej záložke prehliadača alebo v okne inkognito
Mali by ste vidieť tlačidlo chatového widgetu v pravom dolnom rohu
Kliknite naň, aby ste sa uistili, že sa otvára a funguje správne

Nevidíte widget? Uistite sa, ze ste publikovali zmeny cez Crafter Studio. Overte, ze upravujete správny súbor šablóny, ktory pouzivaju vase stránky. Vymažte vyrovnávaciu pamat prehliadača alebo zobrazite web v okne inkognito. Ak používate ukladanie do vyrovnávacej pamate Crafter, vymažte vyrovnávaciu pamat Engine z dashboardu Crafter Studio.

Umiestnenie šablóny: Umiestnenia šablón CrafterCMS sa mozu lisit v zavislosti od struktury vasho projektu. Bezne umiestnenia zahrnuju /templates/web/pages/ pre šablóny stránok, /templates/web/components/ pre šablóny komponentov a /templates/web/ pre šablóny rozloženia. Skontrolujte svoje existujuce šablóny a najdite, kde je definovany tag </body>.