Как да добавите Asyntai AI чатбот към 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: Редактиране на Master шаблон (Препоръчително)

Най-лесният начин да добавите чатбота на всички страници е чрез редактиране на вашия Master шаблон:

1. Влезте в Umbraco Backoffice
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. Във вашия Master шаблон добавете този код преди </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. Запазете както съдържанието, така и шаблона

Алтернатива: Използване на папка Scripts

Можете също да създадете JavaScript файл в Umbraco Backoffice:

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. Включете този скрипт във вашия Master шаблон преди </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

Алтернатива: За конкретна страница с RenderSection

Ако искате чатбота само на конкретни страници:

1. Във вашия Master шаблон добавете преди </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: Проверка на инсталацията

След като запазите промените, посетете уебсайта си в нов раздел на браузъра или в инкогнито прозорец. Трябва да видите бутона на чат уиджета в долния десен ъгъл. Кликнете върху него, за да се уверите, че се отваря и работи правилно.