Asyntai AI Chatbot'u CrafterCMS'e Nasıl Eklersiniz

CrafterCMS web siteleri için adım adım kılavuz

Platform:

Adım 1: Yerleştirme Kodunuzu Alın

Önce Asyntai Dashboard'unuza gidin ve "Yerleştirme Kodu" bölümüne inin. Şuna benzeyen benzersiz yerleştirme kodunuzu kopyalayın:

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

Not: Yukarıdaki kod yalnızca bir örnektir. Kişisel widget kimliğinizi içerdiğinden, kendi benzersiz yerleştirme kodunuzu Dashboard'unuzdan kopyalamanız gerekir.

Adım 2: FreeMarker Şablonuna Ekleyin (Önerilen)

CrafterCMS, sayfaları oluşturmak için FreeMarker (.ftl) şablonlarını kullanır. Chatbot'u tüm sayfalara eklemenin en kolay yolu ana sayfa şablonunuzu düzenlemektir:

Crafter Studio içinde Site Dashboard > Content Types bölümüne gidin veya şablonlara gidin
Ana sayfa şablonunuzu açın (ör. /templates/web/pages/home.ftl veya temel düzen)
Kapanış </body> etiketini bulun
Asyntai yerleştirme kodunuzu </body> etiketinden hemen önce yapıştırın:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> </body>
Dosyayı kaydedin ve Crafter Studio üzerinden yayınlayın

İpucu: Komut dosyasını kapanış </body> etiketinin öncesine eklemek, sayfa içeriğinden sonra yüklenmesini sağlar; bu, sohbet widget'ları için önerilir ve sayfa yüklemenizi yavaşlatmaz.

Alternatif Yöntem 1: Crafter Şablon Bileşenlerini Kullanma

Daha iyi organizasyon için, chatbot widget'ı için özel bir bileşen şablonu oluşturun:

Crafter Studio'da, /templates/web/components/asyntai-widget.ftl konumunda yeni bir şablon dosyası oluşturun
Bileşen şablonuna aşağıdaki içeriği ekleyin:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Ana düzen şablonunuza bir FreeMarker include yönergesi kullanarak dahil edin:
<#include "/templates/web/components/asyntai-widget.ftl" />
Alternatif olarak, Crafter'ın bileşen oluşturma sistemini kullanıyorsanız, şunu kullanın:
<@renderComponent component=contentModel.asyntaiWidget />
Her iki dosyayı da kaydedin ve Crafter Studio üzerinden yayınlayın

Not: Ayrı bir bileşen şablonu kullanmak, tek bir include satırını yorum satırına alarak chatbot'u tüm sitenizde etkinleştirmeyi veya devre dışı bırakmayı kolaylaştırır.

Alternatif Yöntem 2: Crafter'ın Head/Scripts Yapılandırmasını Kullanma

CrafterCMS, site yapılandırması aracılığıyla komut dosyalarını genel olarak eklemenize olanak tanır:

Crafter Studio'da Site Config > Configuration bölümüne gidin
Engine Site Configuration dosyasını (site-config.xml) açın
Özel bir komut dosyası enjeksiyon yapılandırması ekleyin:
<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>
Alternatif olarak, site yapılandırmasından okumak ve komut dosyalarını dinamik olarak eklemek için temel FreeMarker düzeninizi düzenleyin:
<#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>
Yapılandırma değişikliklerini kaydedin ve yayınlayın

İpucu: Site yapılandırması kullanmak, şablon dosyalarını doğrudan değiştirmeden chatbot widget'ını yönetmenize olanak tanır ve daha sonra güncellemeyi veya kaldırmayı kolaylaştırır.

Alternatif Yöntem 3: Groovy Controller Kullanma

CrafterCMS, sunucu tarafı mantığı için Groovy komut dosyalarını destekler. Chatbot komut dosyasını dinamik olarak eklemek için bir denetleyici kullanabilirsiniz:

/scripts/pages/ içinde bir Groovy betiği oluşturun (ör. /scripts/pages/home.groovy veya site genelindeki denetleyiciniz)
Komut dosyası URL'sini şablon modeline eklemek için aşağıdaki kodu ekleyin:
// /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"
Ardından FreeMarker şablonunuzda model değişkenlerine referans verin:
<#if model.asyntaiEnabled?? && model.asyntaiEnabled> <script async src="${model.asyntaiScriptSrc}" data-asyntai-id="${model.asyntaiWidgetId}"></script> </#if>
Hem Groovy komut dosyasını hem de şablon dosyasını kaydedin
Değişiklikleri Crafter Studio üzerinden yayınlayın

Not: Groovy denetleyici yaklaşımı, koşullu mantığa ihtiyaç duyduğunuzda (ör. chatbot'u yalnızca belirli kullanıcı rolleri veya sayfa türleri için etkinleştirme) veya harici kaynaklardan yapılandırma değerlerini çekmek istediğinizde kullanışlıdır.

Adım 3: Yayınlayın ve Doğrulayın

Değişikliklerinizi yaptıktan sonra Crafter Studio üzerinden yayınlayın:

Crafter Studio'da Site Dashboard bölümüne gidin
Değişikliklerinizi My Recent Activity veya Pending Approval bölümünde inceleyin
Değişiklikleri canlı sitenize dağıtmak için Yayınla'ya tıklayın
Web sitenizi yeni bir tarayıcı sekmesinde veya gizli pencerede açın
Sağ alt köşede sohbet widget'ı düğmesini görmeniz gerekir
Düzgün açıldığından ve çalıştığından emin olmak için tıklayın

Widget'ı göremiyor musunuz? Değişiklikleri Crafter Studio aracılığıyla yayınladığınızdan emin olun. Sayfalarınızın kullandığı doğru şablon dosyasını düzenlediğinizi doğrulayın. Tarayıcı önbelleğinizi temizleyin veya gizli pencerede görüntüleyin. Crafter'ın önbellekleme özelliğini kullanıyorsanız, Crafter Studio kontrol panelinden Engine önbelleğini temizleyin.

Şablon Konumu: CrafterCMS şablon konumları proje yapınıza bağlı olarak değişebilir. Yaygın konumlar arasında sayfa şablonları için /templates/web/pages/, bileşen şablonları için /templates/web/components/ ve düzen şablonları için /templates/web/ bulunur. </body> etiketinin nerede tanımlandığını bulmak için mevcut şablonlarınızı kontrol edin.