Как добавить ИИ-чат-бот 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>

Примечание: Код выше — всего лишь пример. Вы должны скопировать свой уникальный код для встраивания с вашей Панели управления, так как он содержит ваш персональный идентификатор виджета.

Шаг 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: Через шаблон partial

Для лучшей организации можно создать переиспользуемый partial для чат-бота:

Шаг 1: Создайте partial

Создайте новый файл по пути 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>

Зачем использовать partial? Фрагменты упрощают управление внешними скриптами в одном месте. Если вам когда-нибудь понадобится обновить код чат-бота, нужно отредактировать только один файл.

Использование нескольких макетов

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

Вы можете задать макет страницы несколькими способами:

В записи: добавьте layout: your_layout в блок front matter
В коллекции: задайте макет по умолчанию в 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.

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