SilverStripe'a Asyntai AI Chatbot Nasıl Eklenir

SilverStripe CMS 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: SilverStripe Şablonuna Ekleme (Önerilen)

SilverStripe sitenize chatbot'u eklemenin en basit yolu, temanızın ana şablon dosyasını doğrudan düzenlemektir:

Temanızın şablon dosyasını açın (ör. themes/yourtheme/templates/Page.ss)
Kapanış </body> etiketinden hemen önce gömme kodunu ekleyin:

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

Dosyayı kaydedin ve site URL'nize ?flush=1 ekleyerek SilverStripe önbelleğini temizleyin

İpucu: SilverStripe, şablon kalıtım sistemi ile .ss şablon dosyalarını kullanır. Scripti temel Page.ss şablonunuza yerleştirmek, chatbot'un sitenizin her sayfasında görünmesini sağlar. Temanız bir Includes klasörü kullanıyorsa, scripti paylaşılan bir include dosyasına da yerleştirebilirsiniz.

Alternatif Yöntem 1: Controller'da Requirements Sınıfı Kullanma

SilverStripe, JavaScript ve CSS bağımlılıklarını programatik olarak yönetmek için bir Requirements sınıfı sağlar. Bu, geliştiriciler için önerilen yaklaşımdır:

app/src/PageController.php dosyasını (veya sayfa denetleyici dosyanızı) açın
init() yönteminde, widget'ı dinamik olarak yüklemek için Requirements::customScript() kullanın:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        JS);
    }
}

Dosyayı kaydedin ve yourdomain.com?flush=1 adresini ziyaret ederek önbelleği temizleyin

Not: Requirements sınıfı, SilverStripe'ta script ve stil sayfalarını dahil etmenin standart yoludur. Requirements::customScript() kullanmak satır içi JavaScript çıktılar. Bu yöntem, PageController'ınız tarafından işlenen her sayfada widget'ın yüklenmesini sağlar.

Alternatif Yöntem 2: Şablonda Requirements Kullanma

SilverStripe'ın şablon sözdizimini kullanarak JavaScript dosyalarını doğrudan .ss şablonunuzda da talep edebilirsiniz:

Temanızın şablon dosyasını açın (ör. themes/yourtheme/templates/Page.ss)
Aşağıdakini şablonun alt kısmına, </body> etiketinden önce ekleyin:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

İpucu: <% require %> sözdizimi, SilverStripe'ın şablon düzeyinde varlıkları dahil etme yoludur. Bu yöntemin script etiketine özel data öznitelikleri eklemeyi yerel olarak desteklemediğini unutmayın; bu yüzden widget kimliğini ayarlamak için küçük bir başlatma snippet'i ekliyoruz.

Alternatif Yöntem 3: SilverStripe Config Kullanma (YAML)

Yapılandırma odaklı bir yaklaşım için, genel gereksinimleri eklemek üzere SilverStripe'ın YAML yapılandırmasını kullanabilirsiniz:

app/_config/app.yml dosyasını açın veya oluşturun
Widget'ı özel bir uzantı veya denetleyici kurulumu aracılığıyla dahil etmek için yapılandırma ekleyin:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

app/src/Extensions/AsyntaiChatbotExtension.php uzantı dosyasını oluşturun:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        ");
    }
}

Uzantıyı app/_config/app.yml dosyasında PageController'ınıza uygulayın:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Yapılandırma önbelleğini yeniden oluşturmak için ?flush=1 komutunu çalıştırın

Not: YAML yapılandırması ve uzantılar kullanmak en modüler SilverStripe yaklaşımıdır. Chatbot entegrasyonunuzu ana denetleyici mantığınızdan ayırır ve kod değiştirmeden etkinleştirmeyi veya devre dışı bırakmayı kolaylaştırır.

Adım 3: Kurulumu Doğrulayın

Kodu ekledikten ve SilverStripe önbelleğini temizledikten sonra, sitenizi yeni bir tarayıcı sekmesinde açın. Sağ alt köşede sohbet widget düğmesini görmelisiniz. Doğru şekilde açıldığından ve çalıştığından emin olmak için üzerine tıklayın.

Widget'ı göremiyor musunuz? Site URL'nize ?flush=1 ekleyerek önbelleği temizlediğinizden emin olun. YOUR_WIDGET_ID'yi kontrol panelindeki gerçek widget kimliğinizle değiştirdiğinizi kontrol edin. Tarayıcı önbelleğinizi temizleyin veya gizli modda görüntüleyin. JavaScript hatalarını kontrol etmek için tarayıcı konsolunu (F12) açın. Requirements sınıfını kullanıyorsanız, PageController'ınızın init() yönteminin doğru şekilde çağrıldığını doğrulayın.