Jak přidat Asyntai AI Chatbota na CrafterCMS

Průvodce krok za krokem pro weby CrafterCMS

Platforma:

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

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

Poznámka: Kód výše je pouze příklad. Musíte zkopírovat svůj vlastní unikátní kód pro vložení z vašeho Dashboardu, protože obsahuje vaše osobní ID widgetu.

Krok 2: Přidání do šablony FreeMarker (doporučeno)

CrafterCMS používá šablony FreeMarker (.ftl) pro vykreslování stránek. Nejjednodušší způsob, jak přidat chatbota na všechny stránky, je úprava hlavní šablony stránky:

V Crafter Studio přejděte na Site Dashboard > Content Types nebo přejděte na šablony
Otevřete svou hlavní šablonu stránky (např. /templates/web/pages/home.ftl nebo základní rozvržení)
Najděte uzavírací značku </body>
Vložte svůj Asyntai embed kód těsně před značku </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Uložte soubor a publikujte přes Crafter Studio

Tip: Přidání skriptu před uzavírací značku </body> zajistí, že se načte po obsahu stránky, což je doporučeno pro chatovací widgety a nezpomalí načítání stránky.

Alternativní metoda 1: Použití komponent šablon Crafter

Pro lepší organizaci vytvořte samostatnou šablonu komponenty pro widget chatbota:

V Crafter Studio vytvořte nový soubor šablony na /templates/web/components/asyntai-widget.ftl
Přidejte následující obsah do šablony komponenty:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Vložte ji do své hlavní šablony rozvržení pomocí FreeMarker include direktivy:
<#include "/templates/web/components/asyntai-widget.ftl" />
Případně, pokud používáte systém vykreslování komponent Crafter, použijte:
<@renderComponent component=contentModel.asyntaiWidget />
Uložte oba soubory a publikujte přes Crafter Studio

Poznámka: Použití samostatné šablony komponenty usnadňuje zapnutí nebo vypnutí chatbota na celém webu zakomentováním jediného include řádku.

Alternativní metoda 2: Použití konfigurace Head/Scripts v Crafter

CrafterCMS umožňuje globální vkládání skriptů prostřednictvím konfigurace webu:

V Crafter Studio přejděte na Site Config > Configuration
Otevřete soubor Engine Site Configuration (site-config.xml)
Přidejte konfiguraci pro vkládání vlastního skriptu:
<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>
Alternativně upravte svou základní FreeMarker šablonu rozvržení tak, aby četla z konfigurace webu a dynamicky vkládala skripty:
<#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 změny konfigurace

Tip: Použití konfigurace webu umožňuje spravovat widget chatbota bez přímé úpravy souborů šablon, což usnadňuje pozdější aktualizaci nebo odebrání.

Alternativní metoda 3: Použití Groovy controlleru

CrafterCMS podporuje Groovy skripty pro serverovou logiku. Můžete použít controller pro dynamické přidání skriptů chatbota:

Vytvořte Groovy skript v /scripts/pages/ (např. /scripts/pages/home.groovy nebo váš celostránkový controller)
Přidejte následující kód pro vložení URL skriptů do modelu šablony:
// /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"
Poté odkazujte na proměnné modelu ve své FreeMarker šabloně:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Uložte Groovy skript i soubor šablony
Publikujte změny přes Crafter Studio

Poznámka: Přístup s Groovy controllerem je užitečný, když potřebujete podmíněnou logiku (např. povolení chatbota pouze pro určité uživatelské role nebo typy stránek) nebo když chcete načítat konfigurační hodnoty z externích zdrojů.

Krok 3: Publikování a ověření

Po provedení změn je publikujte přes Crafter Studio:

V Crafter Studio přejděte na Site Dashboard
Zkontrolujte své změny v sekci My Recent Activity nebo Pending Approval
Klikněte na Publish pro nasazení změn na váš živý web
Otevřete svůj web v nové záložce prohlížeče nebo v anonymním okně
Měli byste vidět tlačítko chatovacího widgetu v pravém dolním rohu
Klikněte na něj a ověřte, že se správně otevírá a funguje

Nevidíte widget? Ujistěte se, že jste změny publikovali přes Crafter Studio. Ověřte, že upravujete správný soubor šablony, který vaše stránky používají. Vymažte mezipaměť prohlížeče nebo stránku zobrazte v anonymním okně. Pokud používáte kešování Crafter, vymažte mezipaměť Engine z dashboardu Crafter Studio.

Umístění šablony: Umístění šablon CrafterCMS se může lišit v závislosti na struktuře vašeho projektu. Běžná umístění zahrnují /templates/web/pages/ pro šablony stránek, /templates/web/components/ pro šablony komponent a /templates/web/ pro šablony rozvržení. Zkontrolujte své stávající šablony a najděte, kde je definována značka </body>.