Как да добавите Asyntai AI чатбот в Kirby

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

Kirby е PHP CMS с плоски файлове, който използва snippets за части от шаблони за повторна употреба. Препоръчителният подход е да създадете специален snippet за чатбота:

Създайте нов snippet файл на адрес site/snippets/asyntai-widget.php
Поставете кода за вграждане във файла:

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

След това включете snippet-а в основния си шаблон (напр. site/templates/default.php) или оформлението си, точно преди затварящия таг </body>:

<?php snippet('asyntai-widget') ?>
</body>
</html>

Съвет: Ако използвате споделено оформление или footer snippet, можете да добавите извикването на snippet там, за да се появява автоматично на всяка страница. Например, добавете го към вашия footer snippet точно преди </body>.

Алтернативен метод 1: Добавете към Footer Snippet

Ако вашият Kirby сайт използва footer snippet, можете да добавите кода за вграждане директно там:

Отворете site/snippets/footer.php (създайте го, ако не съществува)
Добавете кода за вграждане преди затварящия таг </body>:

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

Уверете се, че вашите шаблони включват footer snippet:

<?php snippet('footer') ?>

Забележка: Ако footer snippet вече е включен във всичките ви шаблони, добавянето на чатбота тук гарантира, че той се появява на всяка страница, без да модифицирате отделни файлове на шаблони.

Алтернативен метод 2: Използване на Kirby плъгин

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

Създайте директорията и файла на плъгина на адрес site/plugins/asyntai/index.php
Добавете следния код, за да използвате куките (hooks) на Kirby за инжектиране на скрипта:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $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>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

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

Алтернативен метод 3: Използване на помощната функция js() на Kirby

Kirby предоставя вградена помощна функция js() за зареждане на JavaScript файлове. Можете да я използвате в шаблона или snippet-а си:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

Или добавете скрипта директно във вашия PHP файл на шаблона преди </body>:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

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

Забележка: Ако използвате помощната функция js(), уверете се, че тя е поставена вътре в секцията <body> на вашия шаблон, за да се зареди чатботът правилно.

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

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

Не виждате уиджета? Уверете се, че сте заменили YOUR_WIDGET_ID с вашия действителен ID на уиджета от таблото за управление. Проверете дали snippet или файлът на плъгина е запазен в правилната директория. Ако използвате метода с плъгин, уверете се, че структурата на директорията на плъгина е site/plugins/asyntai/index.php. Изчистете кеша на браузъра или тествайте в инкогнито режим. Проверете конзолата за разработчици на браузъра (F12) за грешки.