Як додати 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: Отримайте код для вставки

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

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

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. Створiть новий файл: 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. У головному шаблонi макету включiть цей файл перед </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: Перевірте встановлення

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