Statamic'e Asyntai AI Chatbot Nasıl Eklenir

Statamic CMS 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: Kurulum Yöntemini Seçin

Statamic hem Antlers hem de Blade şablonlamayı destekler. Kullandığınız şablonlama motoruna göre yöntemi seçin:

Yöntem 1: Antlers Düzeni (Önerilen)

Chatbot'u eklemenin en kolay yolu, ana düzen dosyanıza dahil etmektir. Statamic, varsayılan şablonlama motoru olarak Antlers'ı kullanır.

Statamic projenizin resources/views dizinine gidin
Düzen dosyanızı açın (genellikle layout.antlers.html)
Kapanış </body> etiketini bulun
Asyntai yerleştirme kodunuzu </body> etiketinin hemen öncesine yapıştırın
Dosyayı kaydedin

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

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

İpucu: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

Yöntem 2: Blade Düzeni

Antlers yerine Blade şablonları kullanıyorsanız, şu adımları izleyin:

Statamic projenizin resources/views dizinine gidin
Blade düzen dosyanızı açın (ör. layout.blade.php)
Kapanış </body> etiketini bulun
Asyntai yerleştirme kodunuzu </body> etiketinin hemen öncesine yapıştırın
Dosyayı kaydedin

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

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

Not: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Yöntem 3: Partial Kullanma

Daha iyi organizasyon için chatbot'a yönelik yeniden kullanılabilir bir partial oluşturabilirsiniz:

Adım 1: Partial Oluşturma

resources/views/partials/_chatbot.antlers.html konumunda yeni bir dosya oluşturun
Asyntai yerleştirme kodunuzu bu dosyaya ekleyin:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Adım 2: Düzeninize Dahil Etme

Düzen dosyanızı açın (layout.antlers.html)
Partial etiketini </body> etiketinden önce ekleyin:
{{ partial:chatbot }} </body>

Neden partial kullanmalısınız? Partial'lar, harici scriptleri tek bir yerden yönetmeyi kolaylaştırır. Chatbot kodunu güncellemeniz gerekirse, yalnızca bir dosyayı düzenlemeniz yeterlidir.

Birden Fazla Düzen Kullanma

Statamic siteniz birden fazla düzen kullanıyorsa (örneğin, blog yazıları, açılış sayfaları için farklı düzenler), chatbot scriptini widget'ın görünmesini istediğiniz her düzen dosyasına eklediğinizden emin olun.

You can set which layout a page uses in several ways:

Girişte: Front matter'a layout: your_layout ekleyin
Koleksiyonda: Koleksiyonunuzun yapılandırma YAML dosyasında varsayılan bir düzen ayarlayın
Blueprint'te: Editörlerin seçebileceği bir düzen alanı ekleyin

Statamic Başlangıç Kitleri İçin

Statamic Başlangıç Kiti kullanıyorsanız, düzen konumu farklılık gösterebilir. Yaygın konumlar şunlardır:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html ile resources/views/snippets/ dizinindeki partial'lar

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

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

Kodu ekledikten sonra, değişikliklerin geçerli olması için Statamic önbelleğini temizleyin:

php artisan cache:clear
php please stache:refresh

Ardından web sitenizi yeni bir tarayıcı sekmesinde veya gizli pencerede ziyaret edin. 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öremiyorsunuz mu? Hem Laravel önbelleğini hem de Statamic'in Stache'ini temizlediğinizden emin olun. Statik önbellekleme kullanıyorsanız, php please static:clear komutunu da çalıştırın. JavaScript hataları için tarayıcınızın konsolunu (F12) kontrol edin.

Önemli: Statamic'in statik site oluşturucusunu (ssg) kullanıyorsanız, chatbot scriptini ekledikten sonra php please ssg:generate komutunu çalıştırarak statik dosyalarınızı yeniden oluşturmayı unutmayın.

Belgeler