Ako pridať Asyntai AI Chatbot do Statamic

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

Platforma:

Krok 1: Ziskajte svoj vkladací kod

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii "Vkladaci kod". Skopirujte svoj jedinečný vkladací kod, ktory bude vyzerat takto:

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

Poznámka: Kod vyššie je len priklad. Musite skopirovat svoj vlastný jedinečný vkladací kod zo svojho Dashboardu, pretože obsahuje vase osobne 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
Open your layout file (usually layout.antlers.html)
Najdite uzatvaraci 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

If you're using Blade templates instead of Antlers, follow these steps:

Prejdite do adresára resources/views vášho projektu Statamic
Open your Blade layout file (e.g., layout.blade.php)
Najdite uzatvaraci 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 pamate 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.

Nevidite 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.

Dokumentacia