Како додати Asyntai АИ четбот у 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>

Напомена: Код изнад је само пример. Морате копирати свој јединствени код за уграђивање са своје Контролне табле јер садржи ваш лични ИД виџета.

Корак 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: Коришћење Grav менаџера ресурса

Уграђени Grav менаџер ресурса обезбеђује чист начин за додавање JavaScript ресурса путем Twig-а:

Отворите основни Twig шаблон теме (нпр. user/themes/yourtheme/templates/partials/base.html.twig)
Користите менаџер ресурса да додате 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>

Напомена: Метод менаџера ресурса је приступ који Grav препоручује за управљање JavaScript ресурсима. Обезбеђује уграђену подршку за обраду ресурса, редослед и груписање.

Алтернативни метод 2: Коришћење Custom JS додатка

Ако преферирате приступ заснован на додацима без уређивања фајлова теме:

Инсталирајте „Custom JS" додатак из Grav админ панела или путем CLI:

bin/gpm install custom-js

Идите на Админ > Додаци > 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: Коришћење преписивања блока у подшаблону

Ако ваша 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: Коришћење Grav Custom Head додатка

Још једна опција заснована на додатку је Custom Head додатак:

Инсталирајте custom-head додатак путем CLI или админ панела:

bin/gpm install custom-head

Идите на Админ > Додаци > 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 додатак вам омогућава да убаците код у заглавље или тело сајта без дирања фајлова теме. Проверите документацију додатка за тачну опцију позиционирања за убацивање скрипте пре затварајуће </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 стварним ИД-ом виџета са контролне табле. Обришите кеш претраживача или прегледајте у инкогнито режиму. Отворите конзолу претраживача (F12) да проверите да ли има JavaScript грешака. Верификујте да је скрипта присутна у извору странице десним кликом и избором „Прикажи извор странице".

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