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

Ръководство стъпка по стъпка за уебсайтове с ProcessWire 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: Добавяне към файла на шаблона (Препоръчително)

ProcessWire използва PHP файлове за шаблони, намиращи се в директорията site/templates/. Най-лесният подход е да добавите кода за вграждане директно в основния файл на шаблона:

Осъществете достъп до файловете на вашата ProcessWire инсталация чрез FTP, SSH или файлов мениджър
Навигирайте до site/templates/
Отворете основния файл на шаблона — това е обикновено _main.php или basic-page.php в зависимост от профила на вашия сайт
Ако използвате стратегията за отложен изход (по подразбиране за повечето профили на сайтове), отворете _main.php
Намерете затварящия таг </body>
Поставете вашия 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>
</body>

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

Алтернативен метод 1: Използване на _foot.inc или допълващ файл _main.php

Ако вашият ProcessWire сайт използва подхода с допълващ файл (често срещан в много профили на сайтове), можете да добавите кода за вграждане към споделеното включване на футъра:

Навигирайте до site/templates/
Отворете _foot.inc (или еквивалентния файл за включване на футъра)
Поставете вашия Asyntai код за вграждане точно преди затварящия таг </body>
Запазете файла

Стратегията за отложен изход на ProcessWire обикновено работи с три ключови файла:

_init.php — изпълнява се преди всеки шаблон, инициализира променливи
Вашият файл на шаблона (напр. basic-page.php) — попълва променливите за съдържание
_main.php — извежда крайния HTML код, използвайки тези променливи

Ако вашият сайт използва този подход, добавянето на скрипта в _main.php преди </body> гарантира, че той се показва на всяка страница.

Забележка: Имената на файловете _init.php и _main.php се конфигурират във вашия site/config.php чрез настройките $config->prependTemplateFile и $config->appendTemplateFile. Проверете конфигурацията си, ако вашите файлове са наименувани различно.

Алтернативен метод 2: Използване на масива $config->scripts

ProcessWire предоставя $config->scripts FilenameArray, който можете да използвате за управление на JavaScript файлове. Във вашия _init.php или индивидуален файл на шаблона добавете:

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

След това във вашия _main.php (или включване на футъра) обходете масива със скриптове, за да ги изведете:

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

Важно: Подходът с $config->scripts обработва атрибута src на скрипта, но атрибутът data-asyntai-id трябва да бъде обработен отделно. Ще трябва или да добавите атрибута data ръчно в изхода на цикъла, или да използвате метода с директен script таг от Стъпка 2 за най-простата настройка.

Алтернативен метод 3: Използване на хук (ready.php)

За по-напреднал подход можете да използвате системата за хукове на ProcessWire, за да инжектирате автоматично скрипта на чатбота във всяка страница. Добавете следното към вашия файл site/ready.php:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<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>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Този хук прихваща визуализирания HTML изход на всяка страница и инжектира Asyntai скрипта автоматично точно преди затварящия таг </body>.

Съвет: Подходът с хук в ready.php е идеален, ако искате чатбота на всяка страница без да модифицирате файлове на шаблони. Той също оцелява при промени в шаблоните и обновявания на темата, тъй като се намира извън файловете на шаблоните.

Стъпка 3: Проверка на инсталацията

След като запазите промените си, посетете вашия ProcessWire сайт в нов раздел на браузъра или в режим инкогнито. Трябва да видите бутона на чат уиджета в долния десен ъгъл. Щракнете върху него, за да се уверите, че се отваря и работи правилно.

Не виждате уиджета? Уверете се, че сте запазили всички модифицирани файлове. Опитайте да изчистите кеша на браузъра или да разгледате в прозорец инкогнито. Ако кешът на шаблоните на ProcessWire е активиран, може да се наложи да го изчистите, като отидете на Modules → Core → Template Engine Cache или като добавите ?nocache=1 към URL-а си. Също потвърдете, че файлът на шаблона действително се използва от страниците, които разглеждате.