Asyntai AI -chatbotin lisääminen Statamiciin

Vaiheittainen opas Statamic CMS -verkkosivustoille

Alusta:

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

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

Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.

Vaihe 2: Valitse asennustapa

Statamic tukee sekä Antlers- että Blade-mallipohjia. Valitse menetelmä käyttämäsi mallipohjamoottorin perusteella:

Menetelmä 1: Antlers-asettelu (suositeltu)

Helpoin tapa lisätä chatbot on sisällyttää se pääasettelutiedostoosi. Statamic käyttää Antlersia oletusmallipohjamoottorinaan.

Siirry Statamic-projektisi resources/views-hakemistoon
Avaa asettelutiedostosi (yleensä layout.antlers.html)
Etsi sulkeva </body>-tagi
Liitä Asyntai-upotuskoodisi juuri ennen </body>-tagia
Tallenna tiedosto

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

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

Menetelmä 2: Blade-asettelu

Jos käytät Blade-mallipohjia Antlersin sijaan, seuraa näitä ohjeita:

Siirry Statamic-projektisi resources/views-hakemistoon
Avaa Blade-asettelutiedostosi (esim. layout.blade.php)
Etsi sulkeva </body>-tagi
Liitä Asyntai-upotuskoodisi juuri ennen </body>-tagia
Tallenna tiedosto

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

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

Menetelmä 3: Osittaistiedoston käyttö

Parempaa järjestystä varten voit luoda uudelleenkäytettävän osittaistiedoston chatbotille:

Vaihe 1: Luo osittaistiedosto

Luo uusi tiedosto polkuun resources/views/partials/_chatbot.antlers.html
Lisää Asyntai-upotuskoodisi tähän tiedostoon:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Vaihe 2: Sisällytä asettelutiedostoon

Avaa asettelutiedostosi (layout.antlers.html)
Lisää osittaistiedoston tagi ennen </body>-tagia:
{{ partial:chatbot }} </body>

Miksi käyttää osittaistiedostoa? Osittaistiedostot helpottavat ulkoisten skriptien hallintaa yhdessä paikassa. Jos chatbot-koodia täytyy päivittää, riittää yhden tiedoston muokkaaminen.

Useiden asettelujen käyttö

Jos Statamic-sivustosi käyttää useita asetteluja (esim. eri asettelut blogikirjoituksille, laskeutumissivuille jne.), muista lisätä chatbot-skripti jokaiseen asettelutiedostoon, jossa haluat widgetin näkyvän.

Voit määrittää sivun käyttämän asettelun useilla tavoilla:

Merkinnässä: Lisää layout: your_layout etutietoihin (front matter)
Kokoelmassa: Aseta oletusasettelu kokoelmasi konfiguraatio-YAML-tiedostossa
Blueprintissä: Lisää asettelukenttä, josta muokkaajat voivat valita

Statamic Starter Kit -paketeille

Jos käytät Statamic Starter Kit -pakettia, asettelutiedoston sijainti voi vaihdella. Yleisiä sijainteja ovat:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html ja osittaistiedostot kansiossa resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Vaihe 3: Tyhjennä välimuisti ja vahvista

Koodin lisäämisen jälkeen tyhjennä Statamic-välimuisti muutosten voimaantulon varmistamiseksi:

php artisan cache:clear
php please stache:refresh

Avaa sitten verkkosivustosi uudessa selaimen välilehdessä tai incognito-ikkunassa. Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.

Etkö näe widgetiä? Varmista, että olet tyhjentänyt sekä Laravelin välimuistin että Statamicin Stachen. Jos käytät staattista välimuistia, suorita myös php please static:clear. Tarkista selaimen konsoli (F12) mahdollisten JavaScript-virheiden varalta.

Tärkeää: Jos käytät Statamicin staattista sivustogeneraattoria (ssg), muista luoda staattiset tiedostosi uudelleen chatbot-skriptin lisäämisen jälkeen suorittamalla php please ssg:generate.

Dokumentaatio