Hoe u de Asyntai AI-chatbot toevoegt aan CrafterCMS

Stapsgewijze handleiding voor CrafterCMS-websites

Platform:

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:

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

Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.

Stap 2: Toevoegen aan FreeMarker-template (aanbevolen)

CrafterCMS gebruikt FreeMarker (.ftl)-templates voor het renderen van pagina's. De eenvoudigste manier om de chatbot aan alle pagina's toe te voegen is door uw hoofdpaginatemplate te bewerken:

Ga in Crafter Studio naar Site Dashboard > Content Types of navigeer naar templates
Open uw hoofdpaginatemplate (bijv. /templates/web/pages/home.ftl of de basislay-out)
Zoek de afsluitende </body>-tag
Plak uw Asyntai-insluitcode net vóór de </body>-tag:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Sla het bestand op en publiceer via Crafter Studio

Tip: Het toevoegen van het script vóór de afsluitende </body>-tag zorgt ervoor dat het na de pagina-inhoud wordt geladen, wat aanbevolen is voor chatwidgets en het laden van uw pagina niet vertraagt.

Alternatieve methode 1: Crafter Template Components gebruiken

Maak voor een betere organisatie een speciaal componenttemplate voor de chatwidget:

Maak in Crafter Studio een nieuw templatebestand aan op /templates/web/components/asyntai-widget.ftl
Voeg de volgende inhoud toe aan het componenttemplate:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Neem het op in uw hoofdlay-outtemplate met een FreeMarker include-directief:
<#include "/templates/web/components/asyntai-widget.ftl" />
Als alternatief, als u Crafter's componentweergavesysteem gebruikt:
<@renderComponent component=contentModel.asyntaiWidget />
Sla beide bestanden op en publiceer via Crafter Studio

Opmerking: Het gebruik van een apart componenttemplate maakt het eenvoudig om de chatbot op uw gehele site in of uit te schakelen door één enkele include-regel uit te commentariëren.

Alternatieve methode 2: Crafter's Head/Scripts-configuratie gebruiken

CrafterCMS stelt u in staat om scripts globaal te injecteren via siteconfiguratie:

Navigeer in Crafter Studio naar Site Config > Configuration
Open het bestand Engine Site Configuration (site-config.xml)
Voeg een aangepaste scriptinjectieconfiguratie toe:
<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>
Bewerk als alternatief uw basis-FreeMarker-lay-out om vanuit de siteconfiguratie te lezen en scripts dynamisch te injecteren:
<#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>
Sla de configuratiewijzigingen op en publiceer ze

Tip: Het gebruik van siteconfiguratie stelt u in staat de chatwidget te beheren zonder templatebestanden rechtstreeks te wijzigen, waardoor het later eenvoudiger is om bij te werken of te verwijderen.

Alternatieve methode 3: Groovy Controller gebruiken

CrafterCMS ondersteunt Groovy-scripts voor server-side logica. U kunt een controller gebruiken om het chatbotscript dynamisch toe te voegen:

Maak een Groovy-script aan in /scripts/pages/ (bijv. /scripts/pages/home.groovy of uw sitewijde controller)
Voeg de volgende code toe om de script-URL in het templatemodel te injecteren:
// /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"
Verwijs vervolgens naar de modelvariabelen in uw FreeMarker-template:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Sla zowel het Groovy-script als het templatebestand op
Publiceer de wijzigingen via Crafter Studio

Opmerking: De Groovy-controlleraanpak is handig wanneer u voorwaardelijke logica nodig hebt (bijv. de chatbot alleen inschakelen voor bepaalde gebruikersrollen of paginatypen) of wanneer u configuratiewaarden uit externe bronnen wilt ophalen.

Stap 3: Publiceren en verifiëren

Na het aanbrengen van uw wijzigingen, publiceer ze via Crafter Studio:

Ga in Crafter Studio naar Site Dashboard
Bekijk uw wijzigingen in het gedeelte My Recent Activity of Pending Approval
Klik op Publiceren om de wijzigingen op uw live site te implementeren
Bezoek uw CrafterCMS-website in een nieuw browsertabblad of incognitovenster
U zou de chatwidgetknop in de rechteronderhoek moeten zien
Klik erop om te controleren of deze correct opent en werkt

Ziet u de widget niet? Zorg ervoor dat u de wijzigingen hebt gepubliceerd via Crafter Studio. Controleer of u het juiste templatebestand bewerkt dat uw pagina's gebruiken. Wis uw browsercache of bekijk in een incognitovenster. Als u de caching van Crafter gebruikt, wis dan de Engine-cache vanuit het Crafter Studio-dashboard.

Templatelocatie: De templatelocaties van CrafterCMS kunnen variëren afhankelijk van uw projectstructuur. Veelvoorkomende locaties zijn /templates/web/pages/ voor paginatemplates, /templates/web/components/ voor componenttemplates en /templates/web/ voor lay-outtemplates. Controleer uw bestaande templates om te vinden waar de </body>-tag is gedefinieerd.