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 sie do panelu Umbraco Backoffice
2. Przejdź do Settings na lewym pasku bocznym
3. Rozwin Templates
4. Kliknij szablon Master (lub główny szablon ukladu używany przez Twoja 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 nowa właściwość o nazwie "Footer Scripts" z typem danych Textarea
4. Zapisz typ dokumentu
5. Przejdź do Content i edytuj wezel 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. Replace YOUR_WIDGET_ID with your actual widget ID
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. In the specific page template where you want the chatbot, add:
   @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ź swoja witrynę w nowej karcie przeglądarki lub w oknie incognito. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu. Kliknij go, aby upewnić sie, ze otwiera sie i działa poprawnie.