Hur du lägger till Asyntai AI-chattbot i CrafterCMS

Steg-för-steg-guide för CrafterCMS-webbplatser

Plattform:

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

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

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din Dashboard eftersom den innehåller ditt personliga widget-ID.

Steg 2: Lägg till i FreeMarker-mallen (rekommenderas)

CrafterCMS använder FreeMarker (.ftl)-mallar för att rendera sidor. Det enklaste sättet att lägga till chattboten på alla sidor är att redigera din huvudsidmall:

I Crafter Studio, gå till Webbplatsinstrumentpanel > Innehållstyper eller navigera till mallar
Öppna din huvudsidmall (t.ex. /templates/web/pages/home.ftl eller baslayouten)
Hitta den avslutande taggen </body>
Klistra in din Asyntai-inbäddningskod precis före taggen </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Spara filen och publicera via Crafter Studio

Tips: Att lägga till skriptet före den avslutande </body>-taggen säkerställer att det laddas efter sidinnehållet, vilket rekommenderas för chattwidgetar och inte bromsar sidladdningen.

Alternativ metod 1: Använda Crafter-mallkomponenter

För bättre organisation, skapa en dedikerad komponentmall för chattbot-widgeten:

I Crafter Studio, skapa en ny mallfil på /templates/web/components/asyntai-widget.ftl
Lägg till följande innehåll i komponentmallen:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Inkludera det i din huvudlayoutmall med ett FreeMarker-inkluderingsdirektiv:
<#include "/templates/web/components/asyntai-widget.ftl" />
Alternativt, om du använder Crafters komponentrenderingssystem, använd:
<@renderComponent component=contentModel.asyntaiWidget />
Spara båda filerna och publicera via Crafter Studio

Obs! Att använda en separat komponentmall gör det enkelt att aktivera eller inaktivera chatboten på hela din webbplats genom att kommentera bort en enda inkluderingsrad.

Alternativ metod 2: Använda Crafters Head/Scripts-konfiguration

CrafterCMS låter dig injicera skript globalt via webbplatskonfigurationen:

I Crafter Studio, navigera till Webbplatskonfiguration > Konfiguration
Öppna filen Engine Site Configuration (site-config.xml)
Lägg till en anpassad konfiguration för skriptinjicering:
<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>
Alternativt, redigera din bas-FreeMarker-layout för att läsa från webbplatskonfigurationen och injicera skript dynamiskt:
<#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>
Spara och publicera konfigurationsändringarna

Tips: Att använda webbplatskonfiguration gör att du kan hantera chattwidgeten utan att direkt ändra mallfiler, vilket gör det enklare att uppdatera eller ta bort senare.

Alternativ metod 3: Använda Groovy-kontrollenhet

CrafterCMS stödjer Groovy-skript för server-side-logik. Du kan använda en kontroller för att dynamiskt lägga till chattbotskriptet:

Skapa ett Groovy-skript i /scripts/pages/ (t.ex. /scripts/pages/home.groovy eller din övergripande kontroller)
Lägg till följande kod för att injicera skript-URL:en i mallmodellen:
// /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"
Referera sedan till modellvariablerna i din FreeMarker-mall:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Spara både Groovy-skriptet och mallfilen
Publicera ändringarna via Crafter Studio

Obs! Groovy-kontrollmetoden är användbar när du behöver villkorsstyrd logik (t.ex. aktivera chattboten bara för vissa användarroller eller sidtyper) eller när du vill hämta konfigurationsvärden från externa källor.

Steg 3: Publicera och verifiera

När du har gjort dina ändringar, publicera dem via Crafter Studio:

I Crafter Studio, gå till Webbplatsinstrumentpanel
Granska dina ändringar i avsnittet Min senaste aktivitet eller Väntar på godkännande
Klicka på Publicera för att göra ändringarna aktiva
Öppna din webbplats i en ny webbläsarflik eller ett inkognitofönster
Du bör se chattwidgetknappen i det nedre högra hörnet
Klicka på den för att kontrollera att den öppnas och fungerar korrekt

Ser du inte widgeten? Se till att du publicerade ändringarna via Crafter Studio. Kontrollera att du redigerar rätt mallfil som dina sidor använder. Rensa webbläsarens cache eller visa i ett inkognitofönster. Om du använder Crafters cachning, rensa Engine-cachen från Crafter Studio-instrumentpanelen.

Mallplats: Platsen för CrafterCMS-mallar kan variera beroende på din projektstruktur. Vanliga platser inkluderar /templates/web/pages/ för sidmallar, /templates/web/components/ för komponentmallar och /templates/web/ för layoutmallar. Kontrollera dina befintliga mallar för att hitta var </body>-taggen är definierad.