Како додати Asyntai AI чатбот на Statamic

Водич корак по корак за Statamic CMS веб-сајтове

Платформа:

Корак 1: Набавите свој код за уграђивање

Прво идите на своју 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: Изаберите метод инсталације

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

Метода 1: Antlers распоред (препоручено)

Најлакши начин за додавање чатбота је укључивање у ваш главни фајл распореда. 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 распоред

Ако користите 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 у front matter
У колекцији: Поставите подразумевани распоред у YAML фајлу конфигурације ваше колекције
У нацрту: Додајте поље за распоред из којег уредници могу бирати

За Statamic Starter Kit пакете

Ако користите Statamic Starter Kit, локација распореда може варирати. Уобичајене локације укључују:

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 кеш и Statamic Stache. Ако користите статичко кеширање, покрените и php please static:clear. Проверите конзолу вашег прегледача (F12) за JavaScript грешке.

Важно: Ако користите Statamic генератор статичких сајтова (ssg), обавезно регенеришите ваше статичке фајлове након додавања скрипте чатбота покретањем php please ssg:generate.

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