Як додати AI чат-бот Asyntai до Statamic

Покрокова інструкція для вебсайтів на Statamic CMS

Платформа:

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

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

Примiтка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

Крок 2: Оберiть метод встановлення

Statamic підтримує шаблонізатори Antlers та Blade. Виберіть метод на основі того, який шаблонізатор ви використовуєте:

Метод 1: Макет Antlers (Рекомендовано)

Найпростіший спосіб додати чат-бот - включити його у ваш основний файл макета. Statamic використовує Antlers як шаблонізатор за замовчуванням.

Перейдіть до директорії resources/views вашого проекту Statamic
Відкрийте ваш файл макета (зазвичай layout.antlers.html)
Знайдiть закриваючий тег </body>
Вставте ваш код для вставки Asyntai безпосередньо перед тегом </body>
Збережiть файл

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

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

Метод 2: Макет Blade

Якщо ви використовуєте шаблони Blade замість Antlers, виконайте ці кроки:

Перейдіть до директорії resources/views вашого проекту Statamic
Open your Blade layout file (e.g., layout.blade.php)
Знайдiть закриваючий тег </body>
Вставте ваш код для вставки Asyntai безпосередньо перед тегом </body>
Збережiть файл

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

Примiтка: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Метод 3: Використання часткового шаблону

Для кращої організації ви можете створити частковий шаблон для багаторазового використання для чат-бота:

Крок 1: Створити частковий шаблон

Створіть новий файл за адресою resources/views/partials/_chatbot.antlers.html
Додайте код вбудовування Asyntai до цього файлу:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Крок 2: Включити до вашого макета

Відкрийте ваш файл макета (layout.antlers.html)
Додайте тег часткового шаблону перед </body>:
{{ partial:chatbot }} </body>

Навіщо використовувати частковий шаблон? Часткові шаблони дозволяють легко керувати зовнішніми скриптами в одному місці. Якщо вам потрібно оновити код чат-бота, потрібно відредагувати лише один файл.

Використання кількох макетів

Якщо ваш сайт Statamic використовує кілька макетів (наприклад, різні макети для блогу, лендінгів тощо), переконайтеся, що ви додали скрипт чат-бота до кожного файлу макета, де ви хочете, щоб віджет з'являвся.

Ви можете встановити, який макет використовує сторінка, кількома способами:

У записі: Додайте layout: your_layout до метаданих
У колекції: Встановіть макет за замовчуванням у YAML-файлі конфігурації вашої колекції
У блюпринті: Додайте поле макета, з якого редактори можуть обирати

Для стартових наборів Statamic

Якщо ви використовуєте стартовий набір Statamic, розташування макета може відрізнятися. Поширені розташування включають:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html з частковими шаблонами в resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Крок 3: Очистiть кеш та перевiрте

Після додавання коду очистіть кеш Statamic, щоб зміни набули чинності:

php artisan cache:clear
php please stache:refresh

Потім відвідайте ваш вебсайт у новій вкладці браузера або у вікні інкогніто. Ви повинні побачити кнопку чат-віджета у нижньому правому куті. Натисніть на неї, щоб переконатися, що вона відкривається та працює коректно.

Не бачите вiджет? Переконайтеся, що ви очистили як кеш Laravel, так і Stache Statamic. Якщо ви використовуєте статичне кешування, також виконайте php please static:clear. Перевірте консоль браузера (F12) на наявність помилок JavaScript.

Важливо: Якщо ви використовуєте генератор статичних сайтів Statamic (ssg), переконайтеся, що ви перегенерували статичні файли після додавання скрипта чат-бота, виконавши php please ssg:generate.

Документацiя