Slik legger du til Asyntai AI-chatbot i Statamic

Trinn-for-trinn-guide for Statamic CMS-nettsteder

Plattform:

Trinn 1: Hent innbyggingskoden din

Gå først til Asyntai-dashbordet ditt og bla ned til «Innbyggingskode»-seksjonen. Kopier din unike innbyggingskode som vil se slik ut:

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

Merk: Koden ovenfor er bare et eksempel. Du må kopiere din egen unike innbyggingskode fra Dashbordet ditt, da den inneholder din personlige widget-ID.

Trinn 2: Velg installasjonsmetode

Statamic støtter både Antlers- og Blade-maler. Velg metoden basert på hvilken malmotor du bruker:

Metode 1: Antlers-oppsett (anbefalt)

Den enkleste måten å legge til chatboten er å inkludere den i hovedoppsettfilen din. Statamic bruker Antlers som standard malmotor.

Naviger til Statamic-prosjektets resources/views-katalog
Åpne oppsettfilen din (vanligvis layout.antlers.html)
Finn den avsluttende </body>-taggen
Lim inn Asyntai-innbyggingskoden din rett før </body>-taggen
Lagre filen

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

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

Metode 2: Blade-oppsett

Hvis du bruker Blade-maler i stedet for Antlers, følg disse trinnene:

Naviger til Statamic-prosjektets resources/views-katalog
Åpne Blade-oppsettfilen din (f.eks. layout.blade.php)
Finn den avsluttende </body>-taggen
Lim inn Asyntai-innbyggingskoden din rett før </body>-taggen
Lagre filen

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

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

Metode 3: Bruk av en partial

For bedre organisering kan du opprette en gjenbrukbar partial for chatboten:

Trinn 1: Opprett partialen

Opprett en ny fil på resources/views/partials/_chatbot.antlers.html
Legg til Asyntai-innbyggingskoden i denne filen:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Trinn 2: Inkluder i oppsettet ditt

Åpne oppsettfilen din (layout.antlers.html)
Legg til partial-taggen før </body>:
{{ partial:chatbot }} </body>

Hvorfor bruke en partial? Partialer gjør det enkelt å administrere eksterne skript på ett sted. Hvis du noen gang trenger å oppdatere chatbot-koden, trenger du bare å redigere én fil.

Bruk av flere oppsett

Hvis Statamic-nettstedet ditt bruker flere oppsett (f.eks. forskjellige oppsett for blogginnlegg, landingssider osv.), sørg for å legge til chatbot-skriptet i hver oppsettfil der du vil at widgeten skal vises.

Du kan angi hvilket oppsett en side bruker på flere måter:

I oppføringen: Legg til layout: your_layout i front matter
I samlingen: Angi et standardoppsett i samlingens konfigurasjon-YAML-fil
I en blueprint: Legg til et oppsettfelt som redaktører kan velge fra

For Statamic Starter Kits

Hvis du bruker et Statamic Starter Kit, kan oppsettplasseringen variere. Vanlige plasseringer inkluderer:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html med partialer i resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Trinn 3: Tøm hurtigbuffer og bekreft

Etter at du har lagt til koden, tøm Statamic-bufferen for å sikre at endringene trer i kraft:

php artisan cache:clear
php please stache:refresh

Besøk deretter nettstedet ditt i en ny nettleserfane eller inkognitovindu. Du bør se chatwidget-knappen i nedre høyre hjørne. Klikk på den for å forsikre deg om at den åpnes og fungerer riktig.

Ser du ikke widgeten? Forsikre deg om at du har tømt både Laravels buffer og Statamics Stache. Hvis du bruker statisk bufring, kjør php please static:clear også. Sjekk nettleserens konsoll (F12) for eventuelle JavaScript-feil.

Viktig: Hvis du bruker Statamics statiske nettstedsgenerator (ssg), sørg for å regenerere de statiske filene dine etter at du har lagt til chatbot-skriptet ved å kjøre php please ssg:generate.

Dokumentasjon