Cum să adăugați chatbot-ul AI Asyntai pe CrafterCMS

Ghid pas cu pas pentru site-urile CrafterCMS

Platformă:

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați Tabloul de bord Asyntai și derulați în jos până la secțiunea "Cod de încorporare". Copiați codul unic de încorporare care va arăta astfel:

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

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Pasul 2: Adăugați în șablonul FreeMarker (Recomandat)

CrafterCMS folosește șabloane FreeMarker (.ftl) pentru redarea paginilor. Cel mai simplu mod de a adăuga chatbot-ul pe toate paginile este prin editarea șablonului principal de pagină:

În Crafter Studio, mergeți la Site Dashboard > Content Types sau navigați la șabloane
Deschideți șablonul principal de pagină (de ex., /templates/web/pages/home.ftl sau layout-ul de bază)
Găsiți eticheta de închidere </body>
Lipiți codul de integrare Asyntai chiar înainte de eticheta </body>:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Salvați fișierul și publicați prin Crafter Studio

Sfat: Adăugarea scriptului înainte de eticheta de închidere </body> asigură că se încarcă după conținutul paginii, ceea ce este recomandat pentru widget-urile de chat și nu va încetini încărcarea paginii.

Metoda alternativă 1: Utilizarea componentelor de șablon Crafter

Pentru o organizare mai bună, creați un șablon de componentă dedicat pentru widget-ul chatbot:

În Crafter Studio, creați un fișier de șablon nou la /templates/web/components/asyntai-widget.ftl
Adăugați următorul conținut în șablonul componentei:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Includeți-l în șablonul de layout principal folosind o directivă include FreeMarker:
<#include "/templates/web/components/asyntai-widget.ftl" />
Alternativ, dacă folosiți sistemul de randare a componentelor Crafter, utilizați:
<@renderComponent component=contentModel.asyntaiWidget />
Salvați ambele fișiere și publicați prin Crafter Studio

Notă: Utilizarea unui șablon de componentă separat facilitează activarea sau dezactivarea chatbot-ului pe întregul site prin comentarea unei singure linii de includere.

Metoda alternativă 2: Utilizarea configurației Head/Scripts din Crafter

CrafterCMS vă permite să injectați scripturi global prin configurația site-ului:

În Crafter Studio, navigați la Site Config > Configuration
Deschideți fișierul Engine Site Configuration (site-config.xml)
Adăugați o configurație de injectare a scriptului personalizat:
<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>
Alternativ, editați layout-ul FreeMarker de bază pentru a citi din configurația site-ului și a injecta scripturi dinamic:
<#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>
Salvați și publicați modificările de configurație

Sfat: Utilizarea configurației site-ului vă permite să gestionați widget-ul chatbot fără a modifica direct fișierele de șablon, facilitând actualizarea sau eliminarea ulterioară.

Metoda alternativă 3: Utilizarea controlerului Groovy

CrafterCMS suportă scripturi Groovy pentru logica pe server. Puteți utiliza un controler pentru a adăuga dinamic scriptul chatbot-ului:

Creați un script Groovy în /scripts/pages/ (de ex., /scripts/pages/home.groovy sau controlerul pentru întregul site)
Adăugați următorul cod pentru a injecta URL-ul scriptului în modelul șablonului:
// /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"
Apoi referențiați variabilele modelului în șablonul FreeMarker:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Salvați atât scriptul Groovy, cât și fișierul de șablon
Publicați modificările prin Crafter Studio

Notă: Abordarea cu controlerul Groovy este utilă atunci când aveți nevoie de logică condiționată (de ex., activarea chatbot-ului doar pentru anumite roluri de utilizator sau tipuri de pagini) sau când doriți să preluați valori de configurare din surse externe.

Pasul 3: Publicați și verificați

După ce ați făcut modificările, publicați-le prin Crafter Studio:

În Crafter Studio, mergeți la Site Dashboard
Revizuiți modificările în secțiunea My Recent Activity sau Pending Approval
Faceți clic pe Publish pentru a implementa modificările pe site-ul dvs. live
Deschideți site-ul dvs. într-o filă nouă de browser sau fereastră incognito
Ar trebui să vedeți butonul widgetului de chat în colțul din dreapta jos
Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect

Nu vedeți widgetul? Asigurați-vă că ați publicat modificările prin Crafter Studio. Verificați că editați fișierul de șablon corect pe care îl folosesc paginile dvs. Goliți cache-ul browserului sau vizualizați într-o fereastră incognito. Dacă utilizați cache-ul Crafter, goliți cache-ul Engine din tabloul de bord Crafter Studio.

Locația șablonului: Locațiile șabloanelor CrafterCMS pot varia în funcție de structura proiectului dvs. Locațiile comune includ /templates/web/pages/ pentru șabloanele de pagini, /templates/web/components/ pentru șabloanele de componente și /templates/web/ pentru șabloanele de layout. Verificați șabloanele existente pentru a găsi unde este definită eticheta </body>.