Cum să adăugați Chatbot-ul AI Asyntai în Statamic

Ghid pas cu pas pentru site-urile CMS Statamic

Platformă:

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați Tabloul de bord Asyntai și derulați în jos până la secțiunea "Cod de încorporare". Copiați codul unic de încorporare care va arăta astfel:

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

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Pasul 2: Alegeți metoda de instalare

Statamic suportă atât șablonarea Antlers, cât și Blade. Alegeți metoda în funcție de motorul de șabloane pe care îl utilizați:

Metoda 1: Layout Antlers (Recomandat)

Cel mai simplu mod de a adăuga chatbot-ul este să îl includeți în fișierul de layout principal. Statamic folosește Antlers ca motor de șabloane implicit.

Navigați la directorul resources/views al proiectului Statamic
Open your layout file (usually layout.antlers.html)
Găsiți eticheta de închidere </body>
Inserați codul de încorporare Asyntai chiar înainte de eticheta </body>
Salvați fișierul

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

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

Metoda 2: Layout Blade

Dacă utilizați șabloane Blade în loc de Antlers, urmați acești pași:

Navigați la directorul resources/views al proiectului Statamic
Open your Blade layout file (e.g., layout.blade.php)
Găsiți eticheta de închidere </body>
Inserați codul de încorporare Asyntai chiar înainte de eticheta </body>
Salvați fișierul

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

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

Metoda 3: Utilizarea unui partial

Pentru o organizare mai bună, puteți crea un partial reutilizabil pentru chatbot:

Pasul 1: Creați partial-ul

Creați un fișier nou la resources/views/partials/_chatbot.antlers.html
Adăugați codul de integrare Asyntai în acest fișier:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Pasul 2: Includeți în layout

Deschideți fișierul de layout (layout.antlers.html)
Adăugați eticheta partial înainte de </body>:
{{ partial:chatbot }} </body>

De ce să utilizați un partial? Partial-urile facilitează gestionarea scripturilor externe într-un singur loc. Dacă trebuie vreodată să actualizați codul chatbot-ului, trebuie să editați un singur fișier.

Utilizarea layout-urilor multiple

Dacă site-ul Statamic folosește layout-uri multiple (de ex., layout-uri diferite pentru articole de blog, pagini de destinație, etc.), asigurați-vă că adăugați scriptul chatbot-ului în fiecare fișier de layout unde doriți să apară widget-ul.

Puteți seta ce layout folosește o pagină în mai multe moduri:

În intrare: Adăugați layout: your_layout în front matter
În colecție: Setați un layout implicit în fișierul YAML de configurare al colecției
Într-un blueprint: Adăugați un câmp de layout din care editorii pot alege

Pentru Statamic Starter Kits

Dacă utilizați un Statamic Starter Kit, locația layout-ului poate varia. Locațiile comune includ:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html cu partial-uri în resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Pasul 3: Goliți memoria cache și verificați

După adăugarea codului, goliți cache-ul Statamic pentru a vă asigura că modificările au efect:

php artisan cache:clear
php please stache:refresh

Apoi vizitați site-ul dvs. într-o filă nouă de browser sau într-o fereastră incognito. Ar trebui să vedeți butonul widget-ului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.

Nu vedeți widgetul? Asigurați-vă că ați golit atât cache-ul Laravel, cât și Stache-ul Statamic. Dacă utilizați cache static, rulați și php please static:clear. Verificați consola browserului (F12) pentru eventualele erori JavaScript.

Important: Dacă utilizați generatorul de site-uri statice Statamic (ssg), asigurați-vă că regenerați fișierele statice după adăugarea scriptului chatbot-ului rulând php please ssg:generate.

Documentație