Come aggiungere il chatbot IA Asyntai a Statamic

Guida passo passo per siti web Statamic CMS

Piattaforma:

Passaggio 1: ottieni il tuo codice di incorporamento

Per prima cosa, vai alla tua Dashboard Asyntai e scorri fino alla sezione "Codice di incorporamento". Copia il tuo codice di incorporamento univoco che apparirà così:

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

Nota: Il codice sopra è solo un esempio. Devi copiare il tuo codice di incorporamento univoco dalla tua Dashboard poiché contiene il tuo ID widget personale.

Passaggio 2: Scegli il metodo di installazione

Statamic supporta sia il templating Antlers che Blade. Scegli il metodo in base al motore di templating che stai usando:

Metodo 1: layout Antlers (consigliato)

Il modo più semplice per aggiungere il chatbot è includerlo nel file di layout principale. Statamic utilizza Antlers come motore di templating predefinito.

Vai alla directory resources/views del tuo progetto Statamic
Open your layout file (usually layout.antlers.html)
Trova il tag di chiusura </body>
Incolla il codice di incorporamento Asyntai appena prima del tag </body>
Salva il file

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

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

Metodo 2: layout Blade

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

Vai alla directory resources/views del tuo progetto Statamic
Open your Blade layout file (e.g., layout.blade.php)
Trova il tag di chiusura </body>
Incolla il codice di incorporamento Asyntai appena prima del tag </body>
Salva il file

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

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

Metodo 3: uso di un partial

Per una migliore organizzazione, puoi creare un partial riutilizzabile per il chatbot:

Passaggio 1: crea il partial

Crea un nuovo file in resources/views/partials/_chatbot.antlers.html
Aggiungi il codice di incorporamento Asyntai a questo file:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Passaggio 2: includi nel tuo layout

Apri il tuo file di layout (layout.antlers.html)
Aggiungi il tag del partial prima di </body>:
{{ partial:chatbot }} </body>

Perché usare un partial? I partial rendono facile gestire gli script esterni in un unico posto. Se mai avessi bisogno di aggiornare il codice del chatbot, devi modificare un solo file.

Uso di layout multipli

Se il tuo sito Statamic utilizza layout multipli (es., layout diversi per articoli del blog, landing page, ecc.), assicurati di aggiungere lo script del chatbot a ogni file di layout in cui vuoi che appaia il widget.

Puoi impostare quale layout utilizza una pagina in diversi modi:

Nell'entry: aggiungi layout: your_layout al front matter
Nella collection: imposta un layout predefinito nel file di configurazione YAML della tua collection
In un blueprint: aggiungi un campo layout tra cui gli editor possono scegliere

Per gli Starter Kit di Statamic

Se stai usando uno Starter Kit di Statamic, la posizione del layout potrebbe variare. Le posizioni comuni includono:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html con partial in resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Passaggio 3: Svuota la cache e verifica

Dopo aver aggiunto il codice, svuota la cache di Statamic per assicurarti che le modifiche abbiano effetto:

php artisan cache:clear
php please stache:refresh

Quindi visita il tuo sito web in una nuova scheda del browser o in una finestra di navigazione in incognito. Dovresti vedere il pulsante del widget chat nell'angolo in basso a destra. Cliccaci sopra per assicurarti che si apra e funzioni correttamente.

Non vedi il widget? Assicurati di aver svuotato sia la cache di Laravel che lo Stache di Statamic. Se stai usando il caching statico, esegui anche php please static:clear. Controlla la console del browser (F12) per eventuali errori JavaScript.

Importante: Se stai usando il generatore di siti statici di Statamic (ssg), assicurati di rigenerare i tuoi file statici dopo aver aggiunto lo script del chatbot eseguendo php please ssg:generate.

Documentazione