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

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

Платформа:

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

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

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

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

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

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

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

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

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

<!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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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
Відкрийте ваш файл макета Blade (наприклад, layout.blade.php)
Знайдіть закриваючий тег </body>
Вставте ваш код для вставки Asyntai безпосередньо перед тегом </body>
Збережіть файл

<!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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</body>
</html>

Примітка: 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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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: Очистіть кеш та перевірте

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

php artisan cache:clear
php please stache:refresh

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

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

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

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