Sådan tilføjer du Asyntai AI-chatbot til Statamic

Trin-for-trin-vejledning til Statamic CMS-websteder

Platform:

Trin 1: Hent din indlejringskode

Gå først til dit Asyntai Dashboard og rul ned til sektionen "Indlejringskode". Kopiér din unikke indlejringskode, der vil se sådan ud:

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

Bemærk: Koden ovenfor er blot et eksempel. Du skal kopiere din egen unikke indlejringskode fra dit Dashboard, da den indeholder dit personlige widget-ID.

Trin 2: Vælg installationsmetode

Statamic understøtter både Antlers- og Blade-skabeloner. Vælg metoden baseret på, hvilken skabelonmotor du bruger:

Metode 1: Antlers-layout (anbefalet)

Den nemmeste måde at tilføje chatbotten er at inkludere den i din primære layoutfil. Statamic bruger Antlers som sin standardskabelonmotor.

Naviger til dit Statamic-projekts resources/views-mappe
Åbn din layoutfil (normalt layout.antlers.html)
Find det afsluttende </body>-tag
Indsæt din Asyntai indlejringskode lige inden </body>-tagget
Gem 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>

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

Metode 2: Blade-layout

If you're using Blade templates instead of Antlers, follow these steps:

Naviger til dit Statamic-projekts resources/views-mappe
Åbn din Blade-layoutfil (f.eks. layout.blade.php)
Find det afsluttende </body>-tag
Indsæt din Asyntai indlejringskode lige inden </body>-tagget
Gem 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>

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

Metode 3: Brug af en partial

For bedre organisation kan du oprette en genanvendelig partial til chatbotten:

Trin 1: Opret partial'en

Opret en ny fil på resources/views/partials/_chatbot.antlers.html
Tilføj din Asyntai-indlejringskode til denne fil:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Trin 2: Inkluder i dit layout

Åbn din layoutfil (layout.antlers.html)
Tilføj partial-tagget før </body>:
{{ partial:chatbot }} </body>

Hvorfor bruge en partial? Partials gør det nemt at administrere eksterne scripts ét sted. Hvis du nogensinde har brug for at opdatere chatbot-koden, behøver du kun at redigere én fil.

Brug af flere layouts

Hvis dit Statamic-websted bruger flere layouts (f.eks. forskellige layouts til blogindlæg, landingssider osv.), skal du sørge for at tilføje chatbot-scriptet til hver layoutfil, hvor du ønsker, at widgetten skal vises.

Du kan angive, hvilket layout en side bruger, på flere måder:

I indlægget: Tilføj layout: your_layout til front matter
I samlingen: Angiv et standardlayout i samlingens YAML-konfigurationsfil
I en blueprint: Tilføj et layoutfelt, som redaktører kan vælge fra

Til Statamic Starter Kits

Hvis du bruger et Statamic Starter Kit, kan layoutplaceringen variere. Almindelige placeringer inkluderer:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

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

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Trin 3: Ryd cache og verificér

Efter at have tilføjet koden skal du rydde din Statamic-cache for at sikre, at ændringerne træder i kraft:

php artisan cache:clear
php please stache:refresh

Besøg derefter dit websted i en ny browserfane eller et inkognitovindue. Du bør se chat-widget-knappen i nederste højre hjørne. Klik på den for at sikre, at den åbner og fungerer korrekt.

Ser du ikke widget'en? Sørg for, at du har ryddet både Laravels cache og Statics Stache. Hvis du bruger statisk caching, skal du også køre php please static:clear. Tjek browserens konsol (F12) for eventuelle JavaScript-fejl.

Vigtigt: Hvis du bruger Statics statiske webstedsgenerator (ssg), skal du sørge for at regenerere dine statiske filer efter tilføjelse af chatbot-scriptet ved at køre php please ssg:generate.

Dokumentation