Hur du lägger till Asyntai AI-chattbot i Statamic

Steg-för-steg-guide för Statamic CMS-webbplatser

Plattform:

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

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

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din instrumentpanel eftersom den innehåller ditt personliga widget-ID.

Steg 2: Välj installationsmetod

Statamic stöder både Antlers- och Blade-mallar. Välj metod baserat på vilken mallmotor du använder:

Metod 1: Antlers-layout (rekommenderas)

Det enklaste sättet att lägga till chattboten är att inkludera den i din huvudlayoutfil. Statamic använder Antlers som standardmallmotor.

Navigera till din Statamic-projekts katalog resources/views
Öppna din layoutfil (vanligtvis layout.antlers.html)
Hitta den avslutande taggen </body>
Klistra in din Asyntai-inbäddningskod precis före taggen </body>
Spara 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>.

Metod 2: Blade-layout

Om du använder Blade-mallar istället för Antlers, följ dessa steg:

Navigera till din Statamic-projekts katalog resources/views
Öppna din Blade-layoutfil (t.ex. layout.blade.php)
Hitta den avslutande taggen </body>
Klistra in din Asyntai-inbäddningskod precis före taggen </body>
Spara 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>

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

Metod 3: Använda en partial

För bättre organisation kan du skapa en återanvändbar del för chattboten:

Steg 1: Skapa partialen

Skapa en ny fil på resources/views/partials/_chatbot.antlers.html
Lägg till din Asyntai-inbäddningskod i den här filen:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Steg 2: Inkludera i din layout

Öppna din layoutfil (layout.antlers.html)
Lägg till partial-taggen före </body>:
{{ partial:chatbot }} </body>

Varför använda en partial? Partials gör det enkelt att hantera externa skript på ett ställe. Om du någonsin behöver uppdatera chattbotkoden behöver du bara redigera en fil.

Använda flera layouter

Om din Statamic-webbplats använder flera layouter (t.ex. olika layouter för blogginlägg, landningssidor osv.) se till att lägga till chattbot-skriptet i varje layoutfil där du vill att widgeten ska visas.

Du kan ange vilken layout en sida använder på flera sätt:

I posten: Lägg till layout: your_layout i front matter
I samlingen: Ange en standardlayout i samlingens konfigurations-YAML-fil
I en mall: Lägg till ett layoutfält som redaktörer kan välja från

För Statamic Starter Kits

Om du använder ett Statamic Starter Kit kan layoutplatsen variera. Vanliga platser inkluderar:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html med partiella vyer i resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Steg 3: Rensa cache och verifiera

Efter att du har lagt till koden, rensa din Statamic-cache för att säkerställa att ändringarna träder i kraft:

php artisan cache:clear
php please stache:refresh

Besök sedan din webbplats i en ny webbläsarflik eller ett inkognito-fönster. Du bör se chattwidgetknappen i det nedre högra hörnet. Klicka på den för att kontrollera att den öppnas och fungerar korrekt.

Ser du inte widgeten? Se till att du rensat både Laravels cache och Statamics Stache. Om du använder statisk caching, kör även php please static:clear. Kontrollera webbläsarens konsol (F12) för eventuella JavaScript-fel.

Viktigt: Om du använder Statamics statiska webbplatsgenerator (ssg), se till att regenerera dina statiska filer efter att du har lagt till chattbot-skriptet genom att köra php please ssg:generate.

Dokumentation