Как да добавите Asyntai AI чатбот в 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 и превъртете надолу до секцията „Embed Code“. Копирайте вашия уникален код за вграждане, който ще изглежда така:

Стъпка 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. Във вашия baseof.html или partial добавете условна логика:
   {% 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 в нов раздел на браузъра или в инкогнито прозорец. Трябва да видите бутона на чат уиджета в долния десен ъгъл. Кликнете върху него, за да се уверите, че се отваря и работи правилно.