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

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

Препоръчителният начин за добавяне на чатбота е чрез редактиране на оформлението по подразбиране в бекенда на October CMS:

Влезте в бекенда на October CMS
Отидете на CMS > Layouts в главното меню
Отворете оформлението по подразбиране (обикновено default.htm)
Намерете затварящия </body> таг и {% scripts %} контейнера
Добавете вашия Asyntai код за вграждане точно преди {% scripts %} и </body>:
<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> {% scripts %} </body>
Щракнете върху "Save", за да приложите промените си

Съвет: Placing the script before {% scripts %} and </body> ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading.

Alternative Method 1: Using {% put scripts %} Block

Можете да използвате контейнера за скриптове на October CMS, за да инжектирате чатбота от страница или частичен шаблон:

Отворете произволна страница или частичен шаблон в CMS редактора
Добавете следния код, като използвате {% put scripts %} блок:
{% put scripts %} <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> {% endput %}
Заменете YOUR_WIDGET_ID с вашия действителен ID на уиджета от таблото за управление
Натиснете "Save"

Забележка: For this method to work, your layout must include the {% scripts %} placeholder in its markup. This is where October CMS renders all injected scripts. Most default layouts already include this tag.

Алтернативен метод 2: Използване на Component PHP

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

Създайте или модифицирайте компонент във вашия October CMS плъгин
В метода onRun() на компонента използвайте метода addJs():
public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); }
Заменете YOUR_WIDGET_ID с вашия действителен ID на уиджета
Регистрирайте компонента на страниците, където искате да се показва чатботът

Съвет: Използването на компонент ви дава програмен контрол кога и къде се зарежда чатботът. Можете да добавите условна логика вътре в onRun(), за да контролирате зареждането въз основа на потребителски роли, типове страници или други критерии.

Алтернативен метод 3: Използване на частичен шаблон

Можете да създадете частичен шаблон за многократна употреба за чат уиджета:

Отидете на CMS > Partials в бекенда на October CMS
Щракнете върху "+ Add", за да създадете нов частичен шаблон
Наименувайте го asyntai-widget.htm
Добавете вашия 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>
Натиснете "Save"
Отворете вашия шаблон за оформление и включете частичния шаблон преди </body>:
{% partial 'asyntai-widget' %}
Запазете оформлението

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

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

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

Не виждате уиджета? Уверете се, че сте запазили всички промени в CMS бекенда. Изчистете кеша на браузъра или разгледайте в прозорец инкогнито. Ако сайтът ви използва кеширане, изчистете кеша на October CMS, като изпълните php artisan cache:clear от командния ред, или използвайте опцията Settings > System > Clear Cache в бекенда.

Избор на оформление: Уверете се, че страниците, на които искате да се показва чатботът, използват правилното оформление. Можете да проверите кое оформление използва дадена страница, като я отворите в CMS > Pages и погледнете падащото меню Layout в настройките на страницата.