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

Платформа:

Craft CMS

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Craft CMS Contentful Docusaurus Strapi Joomla Kentico Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Hugo Statamic Umbraco Volusion Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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

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

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

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

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

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. Збережіть файл

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

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

1. Створіть новий файл: templates/_includes/chatbot.twig (або .html)
2. Додайте код вбудовування 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>
3. У головному шаблоні макету включіть цей файл перед </body>:
   {% include '_includes/chatbot' %}
4. Збережіть обидва файли

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

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

1. У вашому шаблоні макету або сторінки використовуйте умови Twig:
   {% if entry.showChatbot ?? true %} <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> {% endif %}
2. Або перевірте конкретні розділи:
   {% if craft.app.request.segments[0] != 'admin' %} <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> {% endif %}

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

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