Jak dodać chatbota AI Asyntai do dowolnej strony internetowej

Universal guide for HTML, custom sites, and static generators

Platforma:

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:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Uwaga: Powyższy kod to tylko przykład. Musisz skopiować swój własny unikalny kod osadzania z Panelu, ponieważ zawiera on Twój osobisty identyfikator widgetu.

Krok 2: Dodaj do pliku HTML

Najprostszym sposobem dodania chatbota jest wklejenie kodu osadzania bezpośrednio do pliku HTML:

Otwórz plik HTML w edytorze tekstu
Znajdź zamykający znacznik </body>
Wklej kod osadzania Asyntai tuz przed znacznikiem </body>
Zapisz plik

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Wskazówka: Dodanie skryptu przed zamykającym tagiem </body> zapewnia jego załadowanie po zawartości strony, co jest optymalne dla wydajności i nie spowalnia ładowania strony.

Dla witryn wielostronicowych

Jeśli witryna sklada sie z wielu stron HTML, masz kilka opcji:

Opcja A: Dodaj do każdej strony

Dodaj kod osadzania do każdego pliku HTML, na którym chcesz wyświetlić chatbota.

Opcja B: Użyj wspolnego dolaczenia stopki

If you're using server-side includes (SSI), PHP includes, or similar:

Utwórz plik footer.html (lub footer.php)
Dodaj kod osadzania Asyntai do tego pliku
Dołącz ten plik stopki do wszystkich stron:
 <?php include 'footer.php'; ?>

Opcja C: Dynamiczne ładowanie JavaScript

Create a single JavaScript file that loads the chatbot on all pages:

Utwórz plik o nazwie asyntai-loader.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); })();
Replace YOUR_WIDGET_ID with your actual widget ID
Dołącz ten skrypt do wszystkich stron:
<script src="/js/asyntai-loader.js"></script>

Dla generatorow stron statycznych

Jeśli używasz generatora stron statycznych, dodaj kod osadzania do bazowego ukladu lub szablonu:

Jekyll

Dodaj do _includes/footer.html lub _layouts/default.html

Hugo

Dodaj do layouts/partials/footer.html lub layouts/_default/baseof.html

Gatsby

Add to gatsby-browser.js or use gatsby-ssr.js

Next.js

Dodaj do pages/_document.js lub użyj komponentu next/script

Nuxt.js

Dodaj do nuxt.config.js w sekcji head.script

Eleventy (11ty)

Dodaj do bazowego ukladu w _includes/

Astro

Dodaj do src/layouts/Layout.astro przed </body>

VuePress

Dodaj do .vuepress/config.js w sekcji head

Dla aplikacji React / Vue / Angular

W przypadku aplikacji jednostronicowych (SPA) możesz dodać skrypt do pliku index.html lub załadować go dynamicznie:

React (metoda index.html)

<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

React (metoda useEffect)

// In your App.js or a component
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.async = true;
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

Vue (w main.js lub App.vue)

// In mounted() or onMounted()
const script = document.createElement('script');
script.src = 'https://asyntai.com/static/js/chat-widget.js';
script.async = true;
script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
document.body.appendChild(script);

Angular (w index.html)

<!-- In src/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Krok 3: Weryfikacja instalacji

Po dodaniu kodu otwórz witrynę w nowej karcie przeglądarki lub w trybie incognito. Przycisk widgetu czatu powinien byc widoczny w prawym dolnym rogu. Kliknij go, aby upewnić sie, ze otwiera sie i działa poprawnie.

Nie widzisz widgetu? Sprawdź, czy skrypt jest prawidlowo umieszczony przed tagiem </body>. Upewnij sie, ze w konsoli przeglądarki nie ma błędów JavaScript (nacisnij F12, aby otworzyc narzedzia deweloperskie). Spróbuj wyczyść pamięć podręczna przeglądarki lub otwórz stronę w trybie incognito.

Ważne: Chatbot wymaga, aby witryna byla serwowana przez HTTP lub HTTPS (a nie otwierana bezpośrednio jako plik). Jeśli testujesz lokalnie, użyj lokalnego serwera deweloperskiego.

Dokumentacja