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 panoul de control Asyntai și derulați în jos până la secțiunea "Cod de integrare". Copiați codul dvs. unic de integrare, care va arăta astfel:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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
Deschideți fișierul de layout (de obicei 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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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
Deschideți fișierul de layout Blade (de ex., 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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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