Jak dodać chatbota AI Asyntai do Umbraco

Platforma:

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

Krok 1: Pobierz swój kod osadzania

Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

Krok 2: Edycja szablonu głównego (zalecane)

Najłatwiejszym sposobem dodania chatbota do wszystkich stron jest edycja szablonu głównego (Master):

1. Zaloguj się do panelu Umbraco Backoffice
2. Przejdź do Settings na lewym pasku bocznym
3. Rozwiń Templates
4. Kliknij szablon Master (lub główny szablon układu używany przez Twoją witrynę)
5. Znajdź zamykający znacznik </body>
6. Wklej kod osadzania Asyntai tuz przed znacznikiem </body>
7. Kliknij "Save"

Alternatywa: Użycie typu dokumentu Site Settings

Aby uzyskać większą elastyczność, możesz dodać własne pole do zarządzania skryptami w stopce:

1. Przejdź do Settings → Document Types
2. Edytuj typ dokumentu Site Settings (lub utwórz go, jeśli nie istnieje)
3. Dodaj nową właściwość o nazwie "Footer Scripts" z typem danych Textarea
4. Zapisz typ dokumentu
5. Przejdź do Content i edytuj węzeł Site Settings
6. Wklej kod osadzania Asyntai w polu Footer Scripts
7. W szablonie Master dodaj ten kod przed </body>:
   @Html.Raw(Model.Value("footerScripts"))
8. Zapisz zarówno treść, jak i szablon

Alternatywa: Użycie folderu Scripts

Możesz również utworzyć plik JavaScript w panelu Umbraco Backoffice:

1. Przejdź do Settings → Scripts
2. Kliknij prawym przyciskiem myszy na Scripts i wybierz "Create"
3. Utwórz nowy plik o nazwie asyntai-chatbot.js
4. Dodaj następujący kod:
   (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. Zamień YOUR_WIDGET_ID na rzeczywisty identyfikator widgetu
6. Zapisz plik
7. Dołącz ten skrypt w szablonie Master przed </body>:
   <script src="/scripts/asyntai-chatbot.js"></script>

Alternatywa: Dla konkretnej strony z RenderSection

Jeśli chcesz umieścić chatbota tylko na określonych stronach:

1. W szablonie Master dodaj przed </body>:
   @RenderSection("footerScripts", required: false)
2. W konkretnym szablonie strony, w którym chcesz umieścić chatbota, dodaj:
   @section footerScripts {
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
}

Krok 3: Weryfikacja instalacji

Po zapisaniu zmian odwiedź swoją witrynę w nowej karcie przeglądarki lub w oknie incognito. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu. Kliknij go, aby upewnić się, że otwiera się i działa poprawnie.