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

Платформа:

Umbraco

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. Увійдіть до вашого бекофісу Umbraco
2. Перейдіть до Settings на лівій бічній панелі
3. Розгорніть Templates
4. Натисніть на ваш шаблон Master (або основний шаблон макета, який використовує ваш сайт)
5. Знайдіть закриваючий тег </body>
6. Вставте ваш код для вставки Asyntai безпосередньо перед тегом </body>
7. Натисніть "Save"

Альтернатива: Використання типу документа Site Settings

Для більшої гнучкості ви можете додати власне поле для управління скриптами футера:

1. Перейдіть до Settings → Document Types
2. Відредагуйте тип документа Site Settings (або створіть його, якщо він не існує)
3. Додайте нову властивість з назвою "Footer Scripts" з типом даних Textarea
4. Збережіть тип документа
5. Перейдіть до Content та відредагуйте вузол Site Settings
6. Вставте ваш код вбудовування Asyntai в поле Footer Scripts
7. У вашому головному шаблоні додайте цей код перед </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. Збережіть як контент, так і шаблон

Альтернатива: Використання папки Scripts

Ви також можете створити файл JavaScript у бекофісі Umbraco:

1. Перейдіть до Settings → Scripts
2. Натисніть правою кнопкою миші на Scripts та виберіть "Create"
3. Створіть новий файл з назвою asyntai-chatbot.js
4. Додайте наступний код:
   (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);
})();
5. Замініть YOUR_WIDGET_ID на ваш фактичний ID віджету
6. Збережіть файл
7. Включіть цей скрипт у ваш головний шаблон перед </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

Альтернатива: Для окремих сторінок з RenderSection

Якщо ви хочете чат-бот лише на конкретних сторінках:

1. У вашому головному шаблоні додайте перед </body>:
   @RenderSection("footerScripts", required: false)
2. У конкретному шаблоні сторінки, де ви хочете чат-бот, додайте:
   @section footerScripts {
  <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: Перевірте встановлення

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