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

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

Платформа:

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

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

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

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

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

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

Навигирайте до директорията resources/views на вашия Statamic проект
Отворете вашия файл за оформление (обикновено 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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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 проект
Отворете вашия Blade файл за оформление (напр. 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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

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

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

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

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

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

Можете да зададете кое оформление използва дадена страница по няколко начина:

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

За стартови комплекти на 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.

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