Jak dodać chatbota Asyntai AI do Statamic

Instrukcja krok po kroku dla stron Statamic CMS

Platforma:

Krok 1: Pobierz swój kod osadzania

Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

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

Uwaga: Powyższy kod to tylko przykład. Musisz skopiować swój własny unikalny kod osadzania z Panelu, ponieważ zawiera on Twój osobisty identyfikator widgetu.

Krok 2: Wybierz metodę instalacji

Statamic obsługuje szablony Antlers i Blade. Wybierz metodę w zależności od uzytego silnika szablonów:

Metoda 1: Uklad Antlers (zalecana)

Najłatwiejszym sposobem dodania chatbota jest dołączenie go do głównego pliku ukladu. Statamic używa Antlers jako domyslnego silnika szablonów.

Przejdź do katalogu resources/views swojego projektu Statamic
Otwórz plik ukladu (zwykle layout.antlers.html)
Znajdź zamykający znacznik </body>
Wklej kod osadzania Asyntai tuz przed znacznikiem </body>
Zapisz plik

<!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>

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

Metoda 2: Uklad Blade

If you're using Blade templates instead of Antlers, follow these steps:

Przejdź do katalogu resources/views swojego projektu Statamic
Otwórz plik ukladu Blade (np. layout.blade.php)
Znajdź zamykający znacznik </body>
Wklej kod osadzania Asyntai tuz przed znacznikiem </body>
Zapisz plik

<!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>

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

Metoda 3: Użycie szablonu czesciowego (Partial)

Dla lepszej organizacji możesz utworzyć szablon częściowy wielokrotnego uzytku dla chatbota:

Krok 1: Utwórz szablon częściowy

Utwórz nowy plik w resources/views/partials/_chatbot.antlers.html
Dodaj kod osadzania Asyntai do tego pliku:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Krok 2: Dołącz do ukladu

Otwórz plik ukladu (layout.antlers.html)
Dodaj znacznik szablonu czesciowego przed </body>:
{{ partial:chatbot }} </body>

Dlaczego warto użyć szablonu czesciowego? Szablony czesciowe ulatwiaja zarządzanie zewnetrznymi skryptami w jednym miejscu. Jeśli kiedykolwiek bedziesz musial zaktualizowac kod chatbota, wystarczy edytować jeden plik.

Użycie wielu ukladow

Jeśli Twoja strona Statamic używa wielu ukladow (np. różnych ukladow dla wpisow na blogu, stron docelowych itp.), upewnij sie, ze dodałeś skrypt chatbota do każdego pliku ukladu, w którym chcesz wyświetlić widget.

Możesz ustawić, jakiego ukladu używa strona, na kilka sposobów:

We wpisie: Dodaj layout: your_layout do metadanych (front matter)
W kolekcji: Ustaw domyślny uklad w pliku konfiguracyjnym YAML kolekcji
W schemacie: Dodaj pole ukladu, z którego redaktorzy mogą wybierać

Dla zestawow startowych Statamic

Jeśli używasz zestawu startowego Statamic, lokalizacja ukladu może sie roznic. Typowe lokalizacje to:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html z szablonami czesciowymi w resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Krok 3: Wyczyść pamięć podręczną i zweryfikuj

Po dodaniu kodu wyczyść pamięć podręczna Statamic, aby upewnić sie, ze zmiany zostały zastosowane:

php artisan cache:clear
php please stache:refresh

Następnie odwiedź swoja stronę w nowej karcie przeglądarki lub w oknie incognito. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu. Kliknij go, aby upewnić sie, ze otwiera sie i działa poprawnie.

Nie widzisz widgetu? Upewnij sie, ze wyczysciles zarówno pamięć podręczna Laravel, jak i Stache Statamic. Jeśli używasz buforowania statycznego, uruchom również php please static:clear. Sprawdź konsolę przeglądarki (F12) pod kątem ewentualnych błędów JavaScript.

Ważne: Jeśli używasz generatora stron statycznych Statamic (ssg), upewnij sie, ze zregenerujesz pliki statyczne po dodaniu skryptu chatbota, uruchamiajac php please ssg:generate.

Dokumentacja