Hoe voegt u de Asyntai AI-chatbot toe aan Statamic

Stapsgewijze handleiding voor Statamic CMS-websites

Platform:

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:

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

Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.

Stap 2: Kies een installatiemethode

Statamic ondersteunt zowel Antlers- als Blade-templating. Kies de methode op basis van de template-engine die u gebruikt:

Methode 1: Antlers-layout (aanbevolen)

De eenvoudigste manier om de chatbot toe te voegen is deze op te nemen in uw hoofdlayoutbestand. Statamic gebruikt Antlers als standaard template-engine.

Navigeer naar de map resources/views van uw Statamic-project
Open uw layoutbestand (meestal layout.antlers.html)
Zoek de afsluitende </body>-tag
Plak uw Asyntai-insluitcode net vóór de </body>-tag
Sla het bestand op

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

Methode 2: Blade-layout

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

Navigeer naar de map resources/views van uw Statamic-project
Open uw Blade-layoutbestand (bijv. layout.blade.php)
Zoek de afsluitende </body>-tag
Plak uw Asyntai-insluitcode net vóór de </body>-tag
Sla het bestand op

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

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

Methode 3: Een partial gebruiken

Voor een betere organisatie kunt u een herbruikbare partial aanmaken voor de chatbot:

Stap 1: De partial aanmaken

Maak een nieuw bestand aan op resources/views/partials/_chatbot.antlers.html
Voeg uw Asyntai-insluitcode toe aan dit bestand:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Stap 2: Opnemen in uw layout

Open uw layoutbestand (layout.antlers.html)
Voeg de partial-tag toe vóór </body>:
{{ partial:chatbot }} </body>

Waarom een partial gebruiken? Partials maken het eenvoudig om externe scripts op één plek te beheren. Als u ooit de chatbotcode moet bijwerken, hoeft u slechts één bestand te bewerken.

Meerdere layouts gebruiken

Als uw Statamic-site meerdere layouts gebruikt (bijv. verschillende layouts voor blogberichten, landingspagina's, enz.), zorg er dan voor dat u het chatbotscript toevoegt aan elk layoutbestand waar u de widget wilt laten verschijnen.

You can set which layout a page uses in several ways:

In het item: Voeg layout: your_layout toe aan de front matter
In de collectie: Stel een standaardlayout in het YAML-configuratiebestand van uw collectie in
In een blauwdruk: Voeg een layoutveld toe waaruit redacteuren kunnen kiezen

Voor Statamic Starter Kits

Als u een Statamic Starter Kit gebruikt, kan de locatie van de layout variëren. Veelvoorkomende locaties zijn:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html met partials in resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Stap 3: Cache wissen en verifiëren

Wis na het toevoegen van de code uw Statamic-cache om ervoor te zorgen dat de wijzigingen van kracht worden:

php artisan cache:clear
php please stache:refresh

Bezoek vervolgens uw website in een nieuw browsertabblad of incognitovenster. U zou de chatwidget-knop in de rechteronderhoek moeten zien. Klik erop om te controleren of deze correct opent en werkt.

Ziet u de widget niet? Zorg ervoor dat u zowel de cache van Laravel als de Stache van Statamic hebt gewist. Als u statische caching gebruikt, voer dan ook php please static:clear uit. Controleer de console van uw browser (F12) op JavaScript-fouten.

Belangrijk: Als u de statische sitegenerator van Statamic (ssg) gebruikt, zorg er dan voor dat u uw statische bestanden opnieuw genereert na het toevoegen van het chatbotscript door php please ssg:generate uit te voeren.

Documentatie