Slik legger du til Asyntai AI-chatbot i CrafterCMS

Trinn-for-trinn-guide for CrafterCMS-nettsteder

Plattform:

Trinn 1: Hent innbyggingskoden din

Gå først til Asyntai-dashbordet ditt og bla ned til «Innbyggingskode»-seksjonen. Kopier din unike innbyggingskode som vil se slik ut:

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

Merk: Koden ovenfor er bare et eksempel. Du må kopiere din egen unike innbyggingskode fra Dashbordet ditt, da den inneholder din personlige widget-ID.

Trinn 2: Legg til i FreeMarker-mal (anbefalt)

CrafterCMS bruker FreeMarker (.ftl)-maler for å gjengi sider. Den enkleste måten å legge til chatboten på alle sider er ved å redigere hovedsidemalen din:

I Crafter Studio, gå til Site Dashboard > Content Types eller naviger til maler
Åpne hovedsidemalen din (f.eks. /templates/web/pages/home.ftl eller grunnlayouten)
Finn den avsluttende </body>-taggen
Lim inn Asyntai-innbyggingskoden rett før </body>-taggen:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Lagre filen og publiser gjennom Crafter Studio

Tips: Ved å legge til skriptet før den avsluttende </body>-taggen sikrer du at det lastes etter sideinnholdet, noe som anbefales for chatwidgeter og ikke vil bremse sidelastingen.

Alternativ metode 1: Bruk av Crafter-malkomponenter

For bedre organisering, opprett en dedikert komponentmal for chatwidgeten:

I Crafter Studio, opprett en ny malfil på /templates/web/components/asyntai-widget.ftl
Legg til følgende innhold i komponentmalen:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Inkluder den i hovedlayoutmalen din ved hjelp av et FreeMarker include-direktiv:
<#include "/templates/web/components/asyntai-widget.ftl" />
Alternativt, hvis du bruker Crafters komponentgjengivelsessystem, bruk:
<@renderComponent component=contentModel.asyntaiWidget />
Lagre begge filene og publiser gjennom Crafter Studio

Merk: Bruk av en separat komponentmal gjør det enkelt å aktivere eller deaktivere chatboten på hele nettstedet ved å kommentere ut en enkelt inkluderingslinje.

Alternativ metode 2: Bruk av Crafters Head/Scripts-konfigurasjon

CrafterCMS lar deg injisere skript globalt gjennom nettstedskonfigurasjon:

I Crafter Studio, naviger til Site Config > Configuration
Åpne filen Engine Site Configuration (site-config.xml)
Legg til en egendefinert skriptinjeksjonskonfigurasjon:
<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, rediger grunnleggende FreeMarker-layout for å lese fra nettstedskonfigurasjonen og injisere skript dynamisk:
<#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>
Lagre og publiser konfigurasjonsendringene

Tips: Bruk av nettstedskonfigurasjon lar deg administrere chatwidgeten uten å endre malfiler direkte, noe som gjør det enklere å oppdatere eller fjerne den senere.

Alternativ metode 3: Bruk av Groovy-kontroller

CrafterCMS støtter Groovy-skript for server-side-logikk. Du kan bruke en kontroller for å dynamisk legge til chatbot-skriptet:

Opprett et Groovy-skript i /scripts/pages/ (f.eks. /scripts/pages/home.groovy eller din nettstedsomfattende kontroller)
Legg til følgende kode for å injisere skript-URL-en i malmodellen:
// /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"
Deretter referer til modellvariablene i FreeMarker-malen din:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Lagre både Groovy-skriptet og malfilen
Publiser endringene gjennom Crafter Studio

Merk: Groovy-kontroller-tilnærmingen er nyttig når du trenger betinget logikk (f.eks. aktivere chatboten kun for bestemte brukerroller eller sidetyper) eller når du vil hente konfigurasjonsverdier fra eksterne kilder.

Trinn 3: Publiser og bekreft

Etter at du har gjort endringene, publiser dem gjennom Crafter Studio:

I Crafter Studio, gå til Site Dashboard
Se gjennom endringene dine i My Recent Activity- eller Pending Approval-seksjonen
Klikk på Publiser for å gjøre endringene aktive
Åpne nettstedet ditt i en ny nettleserfane eller inkognitovindu
Du bør se chat-widget-knappen i nedre høyre hjørne
Klikk på den for å sikre at den åpnes og fungerer korrekt

Ser du ikke widgeten? Sørg for at du har publisert endringene gjennom Crafter Studio. Bekreft at du redigerer riktig malfil som sidene dine bruker. Tøm nettleserens hurtigbuffer eller se i et inkognitovindu. Hvis du bruker Crafters bufring, tøm Engine-bufferen fra Crafter Studio-dashbordet.

Malplassering: Plasseringen av CrafterCMS-maler kan variere avhengig av prosjektstrukturen din. Vanlige plasseringer inkluderer /templates/web/pages/ for sidemaler, /templates/web/components/ for komponentmaler og /templates/web/ for layoutmaler. Sjekk eksisterende maler for å finne hvor </body>-taggen er definert.