Повернутися до панелі керування

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

Дізнайтеся, як використовувати Asyntai

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

Покрокова інструкція для веб-сайтів Craft 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стить ваш особистий ID вiджета.

Крок 2: Редагування шаблону макету (Рекомендовано)

Найпростiший спосiб додати чат-бот на всi сторiнки - це редагування головного шаблону макету:

  1. Отримайте доступ до файлiв проекту Craft CMS через FTP, SSH або ваш редактор коду
  2. Перейдіть до каталогу templates/
  3. Знайдiть головний файл макету (зазвичай називається _layout.twig, _layout.html або знаходиться в templates/_layouts/)
  4. Знайдіть закриваючий тег </body>
  5. Вставте ваш код для вставки Asyntai безпосередньо перед тегом </body>
  6. Збережіть файл

Порада: Додавання скрипту перед закриваючим тегом </body> забезпечує його завантаження пiсля контенту сторiнки, що рекомендується для чат-вiджетiв i не сповiльнює завантаження сторiнки.

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS надає вбудований тег Twig для реєстрації JavaScript:

  1. Відкрийте головний шаблон макету
  2. Додайте наступний код перед закриваючим тегом </body>:
    {% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
  3. Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
  4. Збережіть файл

Примітка: The {% js %} tag automatically handles script registration and prevents duplicate loading if the same code appears multiple times.

Альтернатива: Створення окремого файлу включення

Для кращої організації створіть окремий файл включення:

  1. Створiть новий файл: templates/_includes/chatbot.twig (або .html)
  2. Додайте код вбудовування Asyntai до цього файлу:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. У головному шаблонi макету включiть цей файл перед </body>:
    {% include '_includes/chatbot' %}
  4. Збережіть обидва файли

Порада: Використання файлу включення дозволяє легко увiмкнути або вимкнути чат-бот на всьому сайтi, закоментувавши один рядок.

Альтернатива: Умовне завантаження

Щоб завантажити чат-бот лише на певних сторінках або в певних розділах:

  1. У вашому шаблоні макету або сторінки використовуйте умови Twig:
    {% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
  2. Або перевірте конкретні розділи:
    {% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

Крок 3: Перевірте встановлення

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

Не бачите віджет? Переконайтеся, що ви зберегли файл шаблону та що ви редагуєте правильний шаблон макету, який використовують вашi сторiнки. Очистiть кеш браузера або перегляньте в режимi iнкогнiто. Якщо використовується кешування шаблонiв, очистiть кеш Craft CMS з панелi керування в роздiлi Utilities > Clear Caches.

Розташування шаблону: Розташування шаблонiв Craft CMS може вiдрiзнятися залежно вiд налаштувань вашого проекту. Типовi мiсця включають templates/_layout.twig, templates/_layouts/main.twig або templates/_base.twig. Перевiрте iснуючi шаблони, щоб знайти, де визначений тег </body>.