Ako pridať Asyntai AI Chatbot do Statamic

Podrobný návod pre webové stránky Statamic CMS

Platforma:

Krok 1: Získajte svoj vkladací kód

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:

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

Poznámka: Kód vyššie je len príklad. Musíte skopírovať svoj vlastný jedinečný vkladací kód zo svojho Dashboardu, pretože obsahuje vaše osobné ID widgetu.

Krok 2: Vyberte metodu inštalácie

Statamic podporuje šablónovanie Antlers aj Blade. Vyberte metódu podľa toho, ktorý šablónovací engine používate:

Metóda 1: Rozloženie Antlers (Odporúčané)

Najjednoduchší spôsob pridania chatbota je zahrnúť ho do hlavného súboru rozloženia. Statamic používa Antlers ako predvolený šablónovací engine.

Prejdite do adresára resources/views vášho projektu Statamic
Otvorte svoj súbor rozloženia (zvyčajne layout.antlers.html)
Nájdite uzatvárací tag </body>
Vložíte svoj vkladací kod Asyntai tesne pred tag </body>
Uložte súbor

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

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

Tip: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

Metóda 2: Rozloženie Blade

Ak používate Blade šablóny namiesto Antlers, postupujte podľa týchto krokov:

Prejdite do adresára resources/views vášho projektu Statamic
Otvorte svoj súbor rozloženia Blade (napr. layout.blade.php)
Nájdite uzatvárací tag </body>
Vložíte svoj vkladací kod Asyntai tesne pred tag </body>
Uložte súbor

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

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

Poznámka: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Metóda 3: Pomocou čiastočnej šablóny

Pre lepšiu organizáciu môžete vytvoriť opakovane použiteľnú čiastočnú šablónu pre chatbota:

Krok 1: Vytvorte čiastočnú šablónu

Vytvorte nový súbor na resources/views/partials/_chatbot.antlers.html
Pridajte svoj vkladací kod Asyntai do tohto súboru:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Krok 2: Zahrňte do svojho rozloženia

Otvorte svoj súbor rozloženia (layout.antlers.html)
Pridajte značku čiastočnej šablóny pred </body>:
{{ partial:chatbot }} </body>

Prečo používať čiastočnú šablónu? Čiastočné šablóny uľahčujú správu externých skriptov na jednom mieste. Ak niekedy budete musieť aktualizovať kód chatbota, stačí upraviť jeden súbor.

Používanie viacerých rozložení

Ak váš web Statamic používa viacero rozložení (napr. rôzne rozloženia pre blogové príspevky, vstupné stránky atď.), uistite sa, že pridáte skript chatbota do každého súboru rozloženia, kde chcete, aby sa widget zobrazoval.

Ktoré rozloženie stránka používa, môžete nastaviť viacerými spôsobmi:

V zázname: Pridajte layout: your_layout do front matter
V kolekcii: Nastavte predvolené rozloženie v konfiguračnom YAML súbore vašej kolekcie
V blueprinte: Pridajte pole rozloženia, z ktorého si môžu editori vybrať

Pre štartovacie sady Statamic

Ak používate štartovaciu sadu Statamic, umiestnenie rozloženia sa môže líšiť. Bežné umiestnenia zahŕňajú:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html s čiastočnými šablónami v resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Krok 3: Vymazanie vyrovnávacej pamäte a overenie

Po pridaní kódu vymažte vyrovnávaciu pamäť Statamic, aby sa zmeny prejavili:

php artisan cache:clear
php please stache:refresh

Potom navštívte svoj web v novej záložke prehliadača alebo v okne inkognito. V pravom dolnom rohu by ste mali vidieť tlačidlo chatového widgetu. Kliknite naň, aby ste sa uistili, že sa otvára a funguje správne.

Nevidíte widget? Uistite sa, že ste vymazali vyrovnávaciu pamäť Laravel aj Stache Statamic. Ak používate statickú vyrovnávaciu pamäť, spustite tiež php please static:clear. Skontrolujte konzolu prehliadača (F12), či neobsahuje chyby JavaScript.

Dôležité: Ak používate generátor statických stránok Statamic (ssg), uistite sa, že po pridaní skriptu chatbota regenerujete statické súbory spustením php please ssg:generate.

Dokumentácia