Как да добавите Asyntai AI чатбот в Grav

Ръководство стъпка по стъпка за Grav 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>

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

Стъпка 2: Добавете към шаблона на темата на Grav (Препоръчително)

Най-добрият начин да добавите чатбота към всички страници на вашия Grav сайт е като редактирате базовия Twig шаблон на вашата тема:

Навигирайте до директорията user/themes/yourtheme/templates/ на вашия Grav проект и отворете default.html.twig (или базовия шаблон, използван от вашата тема)
Добавете вашия Asyntai код за вграждане преди затварящия таг </body>:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <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>

Запазете файла

Съвет: Grav използва Twig като шаблонен механизъм. Базовият шаблон обикновено е default.html.twig или partials/base.html.twig в зависимост от вашата тема. Проверете структурата на темата си, за да намерите правилния файл, който съдържа затварящия таг </body>.

Алтернативен метод 1: Използване на Asset Manager на Grav

Вграденият Asset Manager на Grav предоставя чист начин за добавяне на JavaScript ресурси чрез Twig:

Отворете базовия Twig шаблон на вашата тема (напр. user/themes/yourtheme/templates/partials/base.html.twig)
Използвайте Asset Manager за добавяне на JavaScript:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Или добавете вграден JavaScript за динамично създаване на скрипт елемента в базовия си шаблон:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.body.appendChild(script);
})();
</script>
</body>
</html>

Забележка: Методът с Asset Manager е препоръчваният от Grav подход за управление на JavaScript ресурси. Той предоставя вградена поддръжка за конвейерна обработка, подреждане и групиране на ресурси.

Алтернативен метод 2: Използване на плъгин Custom JS

Ако предпочитате подход, базиран на плъгин, без да редактирате файловете на темата:

Инсталирайте плъгина custom-head чрез CLI или административния панел:

bin/gpm install custom-js

Отидете на Admin > Plugins > Custom JS
Добавете кода на скрипта за вграждане:

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

Запазете конфигурацията на плъгина

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

Алтернативен метод 3: Използване на Block Override в дъщерен шаблон

Ако вашата Grav тема използва наследяване на Twig блокове, можете да презапишете долния блок в дъщерен шаблон:

{% block bottom %}
    {{ parent() }}
    <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>
{% endblock %}

Създайте или отворете дъщерен шаблон, който разширява базовия шаблон на вашата тема
Добавете показаното по-горе презаписване на блока
Извикването на parent() гарантира, че цялото съществуващо съдържание в блока е запазено

Забележка: Този метод използва системата за наследяване на шаблони на Twig. Уверете се, че името на блока (напр. bottom) съвпада с блока, дефиниран в базовия шаблон на вашата тема. Общоприетите имена на блокове включват bottom, javascripts или footer.

Алтернативен метод 4: Използване на плъгина Custom Head на Grav

Друга опция, базирана на плъгин, е плъгинът Custom Head:

Инсталирайте плъгина custom-head чрез CLI или административния панел:

bin/gpm install custom-head

Отидете на Admin > Plugins > Custom Head
Добавете вашия 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>

Запазете конфигурацията

Съвет: Плъгинът Custom Head ви позволява да инжектирате код в секциите head или body на вашия сайт, без да докосвате файловете на темата. Проверете документацията на плъгина за правилната опция за позициониране, за да вмъкнете скрипта преди затварящия таг </body>.

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

След като добавите кода, изчистете кеша на Grav и проверете инсталацията:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

Отворете вашия Grav сайт в нов раздел на браузъра. Трябва да видите бутона на чат уиджета в долния десен ъгъл. Кликнете върху него, за да се уверите, че се отваря и функционира правилно.

Не виждате уиджета? Уверете се, че сте изчистили кеша на Grav с bin/grav clearcache или от административния панел. Проверете дали сте заменили YOUR_WIDGET_ID с вашия действителен ID на уиджета от таблото за управление. Изчистете кеша на браузъра или разгледайте в инкогнито режим. Отворете конзолата на браузъра (F12), за да проверите за JavaScript грешки. Проверете дали скриптът присъства в кода на страницата, като кликнете с десния бутон и изберете "View Page Source".

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