Как да добавите Asyntai AI чатбот в Grav
Ръководство стъпка по стъпка за Grav CMS
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Docusaurus
Hugo
Kentico
Volusion
Craft CMS
Contentful
Strapi
Joomla
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Statamic
Umbraco
Moodle
SilverStripe
Grav
October CMS
ProcessWire
Sanity
ExpressionEngine
Sylius
Backdrop CMS
MODX
Bagisto
PayloadCMS
e107
CrafterCMS
Kirby
MedusaCMS
DatoCMS
GoDaddy
Framer
Bubble
Carrd
Jimdo
Strikingly
Kajabi
Teachable
Thinkific
ClickFunnels
Hostinger
Unbounce
Leadpages
Systeme.io
Instapage
Стъпка 1: Вземете вашия код за вграждане
Първо отидете на вашето Табло за управление на Asyntai и превъртете надолу до секцията "Код за вграждане". Копирайте уникалния си код за вграждане, който ще изглежда така:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Забележка: Кодът по-горе е само пример. Трябва да копирате собствения си уникален код за вграждане от вашето Табло за управление, тъй като съдържа вашия личен ID на уиджета.
Стъпка 2: Добавете към шаблона на темата на Grav (Препоръчително)
Най-добрият начин да добавите чатбота към всички страници на вашия Grav сайт е като редактирате базовия Twig шаблон на вашата тема:
- Навигирайте до директорията user/themes/yourtheme/templates/ на вашия Grav проект и отворете default.html.twig (или базовия шаблон, използван от вашата тема)
- Добавете вашия Asyntai код за вграждане преди затварящия таг </body>:
<!-- user/themes/yourtheme/templates/default.html.twig -->
...
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Запазете конфигурацията на плъгина
Съвет: Използването на плъгин за инжектиране на скриптове означава, че не е необходимо да модифицирате файлове на темата. Това улеснява превключването или актуализирането на теми, без да губите интеграцията на чатбота.
Алтернативен метод 3: Използване на Block Override в дъщерен шаблон
Ако вашата Grav тема използва наследяване на Twig блокове, можете да презапишете долния блок в дъщерен шаблон:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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".