Како додати Asyntai AI чатбот на SilverStripe

Водич корак по корак за SilverStripe CMS

Платформа:

Корак 1: Набавите свој код за уграђивање

Прво, идите на своју Asyntai контролну таблу и померите се до одељка „Код за уграђивање". Копирајте свој јединствени код за уграђивање који ће изгледати овако:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Напомена: Код изнад је само пример. Морате копирати свој јединствени код за уграђивање са своје Контролне табле јер садржи ваш лични ИД виџета.

Корак 2: Додајте у SilverStripe шаблон (препоручено)

Најједноставнији начин за додавање чатбота на ваш SilverStripe сајт је директно уређивање главног фајла шаблона ваше теме:

Отворите фајл шаблона ваше теме (нпр. themes/yourtheme/templates/Page.ss)
Додајте код за уградњу непосредно испред затварајуће ознаке </body>:

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Сачувајте фајл и очистите SilverStripe кеш додавањем ?flush=1 на URL вашег сајта

Савет: SilverStripe користи .ss фајлове шаблона са системом наслеђивања шаблона. Постављање скрипте у ваш основни Page.ss шаблон обезбеђује да се чатбот појави на свакој страници вашег сајта. Ако ваша тема користи Includes фасциклу, такође можете поставити скрипту у дељени include фајл.

Алтернативна метода 1: Коришћење Requirements класе у контролеру

SilverStripe пружа Requirements класу за програмско управљање JavaScript и CSS зависностима. Ово је препоручени приступ за програмере:

Отворите app/src/PageController.php (или ваш фајл контролера страница)
У методи init(), користите Requirements::customScript() за динамичко учитавање виџета:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            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.head.appendChild(script);
        JS);
    }
}

Сачувајте фајл и очистите кеш посећивањем yourdomain.com?flush=1

Напомена: Requirements класа је SilverStripe стандардни начин за укључивање скрипти и стилова. Коришћење Requirements::customScript() исписује inline JavaScript. Ова метода обезбеђује учитавање виџета на свакој страници којом управља ваш PageController.

Алтернативна метода 2: Коришћење Requirements у шаблону

Такође можете користити синтаксу SilverStripe шаблона за захтевање JavaScript фајлова директно у вашем .ss шаблону:

Отворите фајл шаблона ваше теме (нпр. themes/yourtheme/templates/Page.ss)
Додајте следеће близу дна шаблона, пре </body>:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

Савет: Синтакса <% require %> је SilverStripe начин на нивоу шаблона за укључивање средстава. Имајте на уму да ова метода нативно не подржава додавање прилагођених data атрибута на script ознаку, тако да додајемо мали иницијализациони исечак за постављање ID-а виџета.

Алтернативна метода 3: Коришћење SilverStripe конфигурације (YAML)

За приступ заснован на конфигурацији, можете користити SilverStripe YAML конфигурацију за додавање глобалних захтева:

Отворите или креирајте фајл app/_config/app.yml
Додајте конфигурацију за укључивање виџета путем прилагођеног проширења или подешавања контролера:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

Креирајте фајл проширења app/src/Extensions/AsyntaiChatbotExtension.php:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            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.head.appendChild(script);
        ");
    }
}

Примените проширење на ваш PageController у app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Покрените ?flush=1 да поново изградите кеш конфигурације

Напомена: Коришћење YAML конфигурације и проширења је најмодуларнији SilverStripe приступ. Одржава интеграцију чатбота одвојеном од ваше главне логике контролера и олакшава омогућавање или онемогућавање без мењања кода.

Корак 3: Верификујте инсталацију

Након додавања кода и чишћења SilverStripe кеша, отворите ваш сајт у новој картици прегледача. Требало би да видите дугме виџета за ћаскање у доњем десном углу. Кликните на њега да проверите да ли се отвара и функционише исправно.

Не видите виџет? Проверите да ли сте очистили кеш додавањем ?flush=1 на URL вашег сајта. Проверите да ли сте заменили YOUR_WIDGET_ID вашим стварним ID-ом виџета са контролне табле. Обришите кеш прегледача или прегледајте у инкогнито режиму. Отворите конзолу прегледача (F12) да проверите да ли постоје JavaScript грешке. Ако користите Requirements класу, потврдите да се метода init() вашег PageController-а исправно позива.