Kako dodati Asyntai AI chatbot na Statamic

Vodič korak po korak za Statamic CMS web stranice

Platforma:

Korak 1: Nabavite svoj kod za ugradnju

Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:

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

Napomena: Gornji kod je samo primjer. Morate kopirati svoj vlastiti jedinstveni kod za ugradnju sa svoje Nadzorne ploče jer sadrži vaš osobni ID widgeta.

Korak 2: Odaberite metodu instalacije

Statamic podrzava i Antlers i Blade sustav predlozaka. Odaberite metodu na temelju toga koji sustav predlozaka koristite:

Metoda 1: Antlers raspored (Preporučeno)

Najlaksi nacin za dodavanje chatbota je ukljucivanje u glavnu datoteku rasporeda. Statamic koristi Antlers kao zadani sustav predlozaka.

Navigirajte do direktorija resources/views svog Statamic projekta
Otvorite datoteku rasporeda (obično layout.antlers.html)
Pronađite zatvarajuću oznaku </body>
Zalijepite svoj Asyntai kod za ugradnju neposredno prije oznake </body>
Spremite datoteku

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

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

Metoda 2: Blade raspored

Ako koristite Blade predloske umjesto Antlersa, slijedite ove korake:

Navigirajte do direktorija resources/views svog Statamic projekta
Otvorite svoju Blade datoteku rasporeda (npr. layout.blade.php)
Pronađite zatvarajuću oznaku </body>
Zalijepite svoj Asyntai kod za ugradnju neposredno prije oznake </body>
Spremite datoteku

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

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

Metoda 3: Korištenje djelomičnog predloška

Za bolju organizaciju mozete izraditi visekratni djelomicni predlozak za chatbot:

Korak 1: Izradite djelomični predložak

Izradite novu datoteku na resources/views/partials/_chatbot.antlers.html
Dodajte svoj Asyntai ugradni kod u ovu datoteku:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Korak 2: Uključite u svoj raspored

Otvorite datoteku rasporeda (layout.antlers.html)
Dodajte oznaku djelomičnog predloška prije </body>:
{{ partial:chatbot }} </body>

Zašto koristiti djelomični predložak? Djelomicni predlosci olaksavaju upravljanje vanjskim skriptama na jednom mjestu. Ako ikada trebate azurirati kod chatbota, trebate urediti samo jednu datoteku.

Korištenje više rasporeda

Ako vasa Statamic stranica koristi vise rasporeda (npr. razlicite rasporede za blog objave, odredisne stranice itd.), obavezno dodajte skriptu chatbota u svaku datoteku rasporeda gdje zelite da se widget pojavi.

Možete postaviti koji raspored stranica koristi na nekoliko načina:

U unosu: Dodajte layout: your_layout u front matter
U kolekciji: Postavite zadani raspored u YAML konfiguracijskoj datoteci kolekcije
U nacrtu: Dodajte polje rasporeda koje urednici mogu odabrati

Za Statamic početne pakete

Ako koristite Statamic pocetni paket, lokacija rasporeda moze se razlikovati. Uobicajene lokacije ukljucuju:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html s djelomicnim predloscima u resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Korak 3: Očistite predmemoriju i provjerite

Nakon dodavanja koda ocistite Statamic predmemoriju kako bi promjene stupile na snagu:

php artisan cache:clear
php please stache:refresh

Zatim posjetite svoju web stranicu u novoj kartici preglednika ili anonimnom prozoru. Trebali biste vidjeti gumb widgeta za razgovor u donjem desnom kutu. Kliknite ga kako biste provjerili otvara li se i radi li ispravno.

Ne vidite widget? Provjerite jeste li ocistili i Laravelovu predmemoriju i Statamicov Stache. Ako koristite staticno predmemoriranje, pokrenite i php please static:clear. Provjerite konzolu preglednika (F12) za JavaScript greske.

Važno: Ako koristite Statamicov generator staticnih stranica (ssg), obavezno regenerirajte staticne datoteke nakon dodavanja skripte chatbota pokretanjem php please ssg:generate.

Dokumentacija