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

Ръководство стъпка по стъпка за уебсайтове с MODX CMS

Платформа:

Стъпка 1: Вземете вашия код за вграждане

Първо, отидете във вашето табло на Asyntai и превъртете надолу до секцията „Embed Code“. Копирайте вашия уникален код за вграждане, който ще изглежда така:

<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: Добавяне към MODX шаблон (Препоръчително)

Препоръчителният начин за добавяне на чатбота е чрез редактиране на вашия MODX шаблон директно в MODX Manager:

Влезте в своя MODX Manager (административен панел)
В страничната лента вляво отидете на Elements > Templates
Отворете шаблона на вашия сайт (обикновено наречен "BaseTemplate" или вашия активен шаблон)
Намерете затварящия таг </body> в кода на шаблона
Поставете вашия Asyntai код за вграждане точно преди затварящия таг </body>
Щракнете върху "Save", за да запазите шаблона

<!-- Your existing template content -->

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

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

Алтернативен метод 1: Използване на MODX Chunk

Можете да използвате MODX Chunk, за да запазите кода за вграждане отделен и за многократна употреба:

В MODX Manager отидете на Elements > Chunks
Щракнете върху "New Chunk", за да създадете нов chunk
Наименувайте chunk-а "asyntaiWidget"
Поставете вашия Asyntai код за вграждане в областта за съдържание
Натиснете "Save"
Отворете вашия шаблон (под Elements > Templates)
Добавете извикването на chunk-а [[$asyntaiWidget]] точно преди затварящия таг </body>
Запазете шаблона

<!-- In your Template, before </body> -->
[[$asyntaiWidget]]
</body>
</html>

Съвет: Използването на Chunk улеснява управлението и актуализирането на кода за вграждане на едно място, особено ако използвате множество шаблони в сайта си.

Алтернативен метод 2: Използване на системните настройки на MODX (HTML Head/Footer)

Някои MODX инсталации включват контейнери за скриптове във футъра чрез системни настройки:

В MODX Manager отидете на System > System Settings
Филтрирайте по "htmlhead" или потърсете персонализирана системна настройка за скриптове във футъра
Ако вашата инсталация има контейнер за скриптове във футъра (като [[++footer_scripts]]), можете да го използвате
Задайте стойността на системната настройка на вашия Asyntai код за вграждане
Уверете се, че съответният контейнер [[++footer_scripts]] присъства във вашия шаблон преди затварящия таг </body>
Запазете системната настройка

<!-- In your Template, before </body> -->
[[++footer_scripts]]
</body>
</html>

Забележка: Този метод зависи от това дали вашата MODX инсталация има персонализирана системна настройка за скриптове във футъра. Ако такава не съществува, можете да създадете персонализирана системна настройка и да я посочите в шаблона си, използвайки синтаксиса [[++setting_key]].

Алтернативен метод 3: Използване на MODX плъгин (OnWebPagePrerender)

За по-напреднал подход можете да създадете MODX плъгин, който автоматично инжектира кода на чатбота във всяка страница:

В MODX Manager отидете на Elements > Plugins
Щракнете върху "New Plugin", за да създадете нов плъгин
Наименувайте плъгина "AsyntaiChatbot"
Поставете следния PHP код в областта за код на плъгина:

$output = &$modx->resource->_output;
$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>';
$output = str_replace('</body>', $script . '</body>', $output);

Щракнете върху раздела "System Events"
Поставете отметка до "OnWebPagePrerender", за да задействате този плъгин при това събитие
Натиснете "Save"

Важно: Заменете YOUR_WIDGET_ID с вашия действителен идентификатор на уиджет от таблото за управление на Asyntai. Този плъгин автоматично ще инжектира скрипта на чатбота във всяка страница на вашия MODX сайт, преди тя да бъде визуализирана.

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

След като добавите кода за вграждане, използвайки някой от горните методи, трябва да изчистите MODX кеша и да потвърдите инсталацията:

В MODX Manager отидете на Manage > Clear Cache (или щракнете върху иконата за изчистване на кеша в горното меню)
Отворете уебсайта си в нов раздел на браузъра или прозорец инкогнито
Трябва да видите бутона на чат уиджета в долния десен ъгъл на страницата си
Щракнете върху него, за да се уверите, че се отваря и работи правилно

Не виждате уиджета? Уверете се, че сте изчистили MODX кеша от Manage > Clear Cache в MODX Manager. Също опитайте да изчистите кеша на браузъра или да разгледате сайта в прозорец инкогнито. Ако сте използвали метода с плъгин, проверете дали системното събитие "OnWebPagePrerender" е отбелязано за вашия плъгин.