Jak přidat Asyntai AI chatbota na jakýkoli web

Univerzální návod pro HTML, vlastní weby a statické generátory

Platforma:

Krok 1: Získejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

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

Poznámka: Kód výše je pouze příklad. Musíte zkopírovat svůj vlastní unikátní kód pro vložení z vašeho Dashboardu, protože obsahuje vaše osobní ID widgetu.

Krok 2: Přidání do vašeho HTML souborů

Nejjednodušší způsob přidání chatbota je vložit embed kód přímo do vašeho HTML souborů:

Otevřete HTML soubor v textovém editoru
Najděte uzavírací značku </body>
Vložte svůj Asyntai embed kód těsně před značku </body>
Uložte soubor

<!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>

Tip: Přidání skriptů před uzavírací značku </body> zajistí jeho načtení po obsahu stránky, což je optimální pro výkon a nezpomalí vaši stránku.

Pro vícestránkové weby

Pokud má váš web více HTML stránek, máte několik možností:

Možnost A: Přidání na každou stránku

Přidejte embed kód do každého HTML souborů, kde chcete chatbota zobrazit.

Možnost B: Použití společného vkládání zápatí

Pokud používáte server-side includes (SSI), PHP includes nebo podobné:

Vytvořte soubor footer.html (nebo footer.php)
Přidejte Asyntai embed kód do tohoto souborů
Zahrňte tento soubor zápatí do všech svých stránek:
 <?php include 'footer.php'; ?>

Možnost C: Dynamické načítání JavaScriptem

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

Vytvořte soubor s názvem 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); })();
Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu
Zahrňte tento skript do všech svých stránek:
<script src="/js/asyntai-loader.js"></script>

Pro statické generátory webů

Pokud používáte statický generátor webů, přidejte embed kód do základního rozložení nebo šablony:

Jekyll

Přidejte do _includes/footer.html nebo _layouts/default.html

Hugo

Přidejte do layouts/partials/footer.html nebo layouts/_default/baseof.html

Gatsby

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

Next.js

Přidejte do pages/_document.js nebo použijte komponentu next/script

Nuxt.js

Přidejte do nuxt.config.js pod head.script

Eleventy (11ty)

Přidejte do základního rozložení v _includes/

Astro

Přidejte do src/layouts/Layout.astro před </body>

VuePress

Přidejte do .vuepress/config.js pod head

Pro aplikace React / Vue / Angular

Pro jednostránkové aplikace (SPA) můžete skript přidat do index.html nebo jej načíst dynamicky:

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 (v main.js nebo 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 (v 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: Ověřte instalaci

Po přidání kódu otevřete svůj web v nové záložce prohlížeče nebo v anonymním okně. V pravém dolním rohu byste měli vidět tlačítko chatovacího widgetu. Klikněte na něj a ověřte, že se správně otevírá a funguje.

Nevidíte widget? Zkontrolujte, že je skript správně umístěn před značkou </body>. Ujistěte se, že v konzoli prohlížeče nejsou žádné chyby JavaScriptu (stiskněte F12 pro otevření vývojářských nástrojů). Zkuste vymazat mezipaměť prohlížeče nebo web zobrazte v anonymním okně.

Důležité: Chatbot vyžaduje, aby byl váš web poskytován přes HTTP nebo HTTPS (ne otevřen přímo jako soubor). Pokud testujete lokálně, použijte lokální vývojový server.

Dokumentace