Как да добавите Asyntai AI чатбот към Statamic

Ръководство стъпка по стъпка за уебсайтове със Statamic CMS

Платформа:

Стъпка 1: Вземете вашия код за вграждане

Първо отидете на вашето Табло за управление на Asyntai и превъртете надолу до секцията "Код за вграждане". Копирайте уникалния си код за вграждане, който ще изглежда така:

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

Забележка: Кодът по-горе е само пример. Трябва да копирате собствения си уникален код за вграждане от вашето Табло за управление, тъй като съдържа вашия личен ID на уиджета.

Стъпка 2: Изберете метод за инсталация

Statamic поддържа и Antlers, и Blade шаблониране. Изберете метода въз основа на това кой шаблонен двигател използвате:

Метод 1: Antlers Layout (Препоръчително)

Най-лесният начин да добавите чатбота е да го включите в основния файл на оформлението. Statamic използва Antlers като шаблонен двигател по подразбиране.

Навигирайте до директорията resources/views на вашия Statamic проект
Open your layout file (usually layout.antlers.html)
Намерете затварящия таг </body>
Поставете вашия Asyntai код за вграждане точно преди тага </body>
Запазете файла

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

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

Метод 2: Blade Layout

Ако използвате Blade шаблони вместо Antlers, следвайте тези стъпки:

Навигирайте до директорията resources/views на вашия Statamic проект
Open your Blade layout file (e.g., layout.blade.php)
Намерете затварящия таг </body>
Поставете вашия Asyntai код за вграждане точно преди тага </body>
Запазете файла

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

Забележка: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Метод 3: Използване на частичен шаблон

За по-добра организация можете да създадете частичен шаблон за многократна употреба за чатбота:

Стъпка 1: Създайте частичния шаблон

Създайте нов файл на resources/views/partials/_chatbot.antlers.html
Добавете вашия Asyntai код за вграждане към този файл:
 <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Стъпка 2: Включете в оформлението

Отворете файла за оформление (layout.antlers.html)
Добавете тага за частичен шаблон преди </body>:
{{ partial:chatbot }} </body>

Защо да използвате частичен шаблон? Частичните шаблони улесняват управлението на външни скриптове на едно място. Ако някога трябва да актуализирате кода на чатбота, трябва да редактирате само един файл.

Използване на множество оформления

Ако вашият Statamic сайт използва множество оформления (напр. различни оформления за блог публикации, целеви страници и др.), уверете се, че добавяте скрипта на чатбота към всеки файл на оформление, където искате да се показва уиджетът.

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

В записа: Добавете layout: your_layout към метаданните в началото
В колекцията: Задайте оформление по подразбиране в YAML конфигурационния файл на колекцията
В план: Добавете поле за оформление, от което редакторите могат да избират

За стартови комплекти на Statamic

Ако използвате стартов комплект на Statamic, местоположението на оформлението може да варира. Често срещани местоположения включват:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html с частични шаблони в resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Стъпка 3: Изчистване на кеша и проверка

След като добавите кода, изчистете кеша на Statamic, за да се уверите, че промените влизат в сила:

php artisan cache:clear
php please stache:refresh

След това посетете уебсайта си в нов раздел на браузъра или в режим инкогнито. Трябва да видите бутона на чат уиджета в долния десен ъгъл. Щракнете върху него, за да се уверите, че се отваря и работи правилно.

Не виждате уиджета? Уверете се, че сте изчистили както кеша на Laravel, така и Stache на Statamic. Ако използвате статично кеширане, изпълнете също php please static:clear. Проверете конзолата на браузъра (F12) за JavaScript грешки.

Важно: Ако използвате генератора на статични сайтове на Statamic (ssg), уверете се, че регенерирате статичните си файлове след добавяне на скрипта на чатбота, като изпълните php please ssg:generate.

Документация