Asyntai AI Chatbot'u Grav'a Nasıl Eklersiniz

Grav 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: Grav Tema Şablonuna Ekleyin (Önerilen)

Chatbot'u Grav sitenizin tüm sayfalarına eklemenin en iyi yolu, temanızın temel Twig şablonunu düzenlemektir:

Grav projenizin user/themes/yourtheme/templates/ dizinine gidin ve default.html.twig dosyasını (veya temanızın kullandığı temel şablonu) açın
Asyntai yerleştirme kodunuzu kapanış </body> etiketinden önce ekleyin:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Dosyayı kaydedin

İpucu: Grav, şablon motoru olarak Twig kullanır. Temel şablon, temanıza bağlı olarak genellikle default.html.twig veya partials/base.html.twig olur. </body> kapanış etiketini içeren doğru dosyayı bulmak için temanızın yapısını kontrol edin.

Alternatif Yöntem 1: Grav Varlık Yöneticisi Kullanma

Grav'ın yerleşik Asset Manager'ı, Twig aracılığıyla JavaScript varlıklarını eklemenin temiz bir yolunu sunar:

Temanızın temel Twig şablonunu açın (örneğin, user/themes/yourtheme/templates/partials/base.html.twig)
JavaScript'i eklemek için Asset Manager'ı kullanın:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Veya temel şablonunuzda script öğesini dinamik olarak oluşturmak için satır içi JavaScript ekleyin:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  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.body.appendChild(script);
})();
</script>
</body>
</html>

Not: Asset Manager yöntemi, JavaScript varlıklarını yönetmek için Grav tarafından önerilen yaklaşımdır. Varlık boru hattı oluşturma, sıralama ve gruplama için yerleşik destek sağlar.

Alternatif Yöntem 2: Özel JS Eklentisi Kullanma

Tema dosyalarını düzenlemeden eklenti tabanlı bir yaklaşımı tercih ediyorsanız:

Grav yönetim panelinden veya CLI aracılığıyla "Custom JS" eklentisini yükleyin:

bin/gpm install custom-js

Admin > Plugins > Custom JS bölümüne gidin
Gömme komut dosyası kodunu ekleyin:

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

Eklenti yapılandırmasını kaydedin

İpucu: Komut dosyalarını eklemek için eklenti kullanmak, herhangi bir tema dosyasını değiştirmenize gerek olmadığı anlamına gelir. Bu, chatbot entegrasyonunuzu kaybetmeden temaları değiştirmeyi veya güncellemeyi kolaylaştırır.

Alternatif Yöntem 3: Alt Şablonda Blok Geçersiz Kılma Kullanma

Grav temanız Twig blok kalıtımı kullanıyorsa, bir alt şablonda bottom bloğunu geçersiz kılabilirsiniz:

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

Temanızın temel şablonunu genişleten bir alt şablon oluşturun veya açın
Yukarıda gösterilen blok geçersiz kılmayı ekleyin
parent() çağrısı, bloktaki mevcut tüm içeriğin korunmasını sağlar

Not: Bu yöntem Twig'in şablon kalıtım sistemini kullanır. Blok adının (örneğin, bottom) temanızın temel şablonunda tanımlanan blokla eşleştiğinden emin olun. Yaygın blok adları arasında bottom, javascripts veya footer bulunur.

Alternatif Yöntem 4: Grav Custom Head Eklentisini Kullanma

Eklenti tabanlı bir diğer seçenek Custom Head eklentisidir:

custom-head eklentisini CLI veya yönetim paneli üzerinden kurun:

bin/gpm install custom-head

Admin > Plugins > Custom Head bölümüne gidin
Eklenti yapılandırmasına Asyntai gömme kodunuzu ekleyin:

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

Yapılandırmayı kaydedin

İpucu: Custom Head eklentisi, tema dosyalarına dokunmadan sitenizin head veya body bölümlerine kod eklemenizi sağlar. Scripti kapanış </body> etiketinden önce eklemek için doğru yerleştirme seçeneğini eklenti belgelerinden kontrol edin.

Adım 3: Önbelleği Temizleyin ve Doğrulayın

Kodu ekledikten sonra Grav önbelleğini temizleyin ve kurulumu doğrulayın:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

Grav 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? Grav önbelleğini bin/grav clearcache komutuyla veya yönetim panelinden 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. Scriptin sayfa kaynağında mevcut olduğunu sağ tıklayıp "Sayfa Kaynağını Görüntüle" seçeneğini seçerek doğrulayın.

Belgeler

Asyntai AI Chatbot'u Grav'a Nasıl Eklersiniz

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

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

Alternatif Yöntem 1: Grav Varlık Yöneticisi Kullanma

Alternatif Yöntem 2: Özel JS Eklentisi Kullanma

Alternatif Yöntem 3: Alt Şablonda Blok Geçersiz Kılma Kullanma

Alternatif Yöntem 4: Grav Custom Head Eklentisini Kullanma

Adım 3: Önbelleği Temizleyin ve Doğrulayın