Kako dodati Asyntai AI chatbot na CrafterCMS

Vodič korak po korak za CrafterCMS web stranice

Platforma:

Korak 1: Nabavite svoj kod za ugradnju

Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:

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

Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.

Korak 2: Dodajte u FreeMarker predložak (Preporučeno)

CrafterCMS koristi FreeMarker (.ftl) predloške za prikazivanje stranica. Najlakši način za dodavanje chatbota na sve stranice je uređivanje glavnog predloška stranice:

U Crafter Studiju idite na Site Dashboard > Content Types ili navigirajte do predložaka
Otvorite svoj glavni predložak stranice (npr. /templates/web/pages/home.ftl ili osnovni raspored)
Pronađite zatvarajuću oznaku </body>
Zalijepite svoj Asyntai ugradni kod neposredno prije oznake </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Spremite datoteku i objavite putem Crafter Studija

Savjet: Dodavanje skripte prije zavrsne oznake </body> osigurava ucitavanje nakon sadrzaja stranice, sto je preporuceno za widgete za razgovor i nece usporiti ucitavanje stranice.

Alternativna metoda 1: Korištenje komponenti predložaka Craftera

Za bolju organizaciju, izradite namjenski predložak komponente za chatbot widget:

U Crafter Studiju izradite novu datoteku predloška na /templates/web/components/asyntai-widget.ftl
Dodajte sljedeći sadržaj u predložak komponente:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Uključite ga u svoj glavni predložak rasporeda koristeći FreeMarker direktivu za uključivanje:
<#include "/templates/web/components/asyntai-widget.ftl" />
Alternativno, ako koristite Crafterov sustav prikazivanja komponenti, koristite:
<@renderComponent component=contentModel.asyntaiWidget />
Spremite obje datoteke i objavite putem Crafter Studija

Napomena: Korištenje zasebnog predloška komponente olakšava omogućavanje ili onemogućavanje chatbota na cijeloj stranici komentiranjem jednog retka za uključivanje.

Alternativna metoda 2: Korištenje Crafterove konfiguracije Head/Scripts

CrafterCMS vam omogućuje globalno ubacivanje skripti putem konfiguracije stranice:

U Crafter Studiju navigirajte do Site Config > Configuration
Otvorite datoteku Engine Site Configuration (site-config.xml)
Dodajte prilagođenu konfiguraciju ubacivanja skripte:
<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>
Alternativno, uredite svoj osnovni FreeMarker raspored za čitanje iz konfiguracije stranice i dinamičko ubacivanje skripti:
<#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>
Spremite i objavite promjene konfiguracije

Savjet: Korištenje konfiguracije stranice omogućuje upravljanje chatbot widgetom bez izravnog mijenjanja datoteka predložaka, što olakšava kasnija ažuriranja ili uklanjanje.

Alternativna metoda 3: Korištenje Groovy kontrolera

CrafterCMS podržava Groovy skripte za logiku na strani poslužitelja. Možete koristiti kontroler za dinamičko dodavanje skripte chatbota:

Izradite Groovy skriptu u /scripts/pages/ (npr. /scripts/pages/home.groovy ili vaš kontroler za cijelu stranicu)
Dodajte sljedeći kod za ubacivanje URL-a skripte u model predloška:
// /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"
Zatim referencirajte varijable modela u svom FreeMarker predlošku:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Spremite i Groovy skriptu i datoteku predloška
Objavite promjene putem Crafter Studija

Napomena: Pristup s Groovy kontrolerom koristan je kada trebate uvjetnu logiku (npr. omogućavanje chatbota samo za određene korisničke uloge ili tipove stranica) ili kada želite povući konfiguracijske vrijednosti iz vanjskih izvora.

Korak 3: Objavite i provjerite

Nakon što napravite promjene, objavite ih putem Crafter Studija:

U Crafter Studiju idite na Site Dashboard
Pregledajte svoje promjene u odjeljku My Recent Activity ili Pending Approval
Kliknite Publish za postavljanje promjena na živi web
Posjetite svoju CrafterCMS web stranicu u novoj kartici preglednika ili anonimnom prozoru
Trebali biste vidjeti gumb chat widgeta u donjem desnom kutu
Kliknite ga kako biste provjerili otvara li se i radi li ispravno

Ne vidite widget? Provjerite jeste li objavili promjene putem Crafter Studija. Potvrdite da uređujete ispravnu datoteku predloška koju vaše stranice koriste. Očistite predmemoriju preglednika ili pregledavajte u anonimnom prozoru. Ako koristite Crafterovo predmemoriranje, očistite predmemoriju Enginea iz nadzorne ploče Crafter Studija.

Lokacija predloška: Lokacije predložaka CrafterCMS-a mogu se razlikovati ovisno o strukturi projekta. Uobičajene lokacije uključuju /templates/web/pages/ za predloške stranica, /templates/web/components/ za predloške komponenti i /templates/web/ za predloške rasporeda. Provjerite postojeće predloške da pronađete gdje je definirana oznaka </body>.