Jak dodać chatbota AI Asyntai do Kirby

Przewodnik krok po kroku dla witryn Kirby CMS

Platforma:

Krok 1: Pobierz swój kod osadzania

Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

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

Uwaga: Powyższy kod to tylko przykład. Musisz skopiować swój własny unikalny kod osadzania z Panelu, ponieważ zawiera on Twój osobisty identyfikator widgetu.

Krok 2: Dodaj do fragmentu Kirby (zalecane)

Kirby to plikowy system CMS oparty na PHP, który używa fragmentow (snippets) jako wielokrotnie używanych części szablonu. Zalecanym podejsciem jest utworzenie dedykowanego fragmentu dla chatbota:

Utwórz nowy plik fragmentu w site/snippets/asyntai-widget.php
Wklej swój kod osadzania do pliku:

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

Następnie dołącz fragment w swoim głównym szablonie (np. site/templates/default.php) lub ukladzie, tuz przed zamykającym tagiem </body>:

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

Wskazówka: Jeśli korzystasz ze wspoldzielonego ukladu lub fragmentu stopki, możesz dodać tam wywolanie fragmentu, aby automatycznie pojawiał sie na każdej stronie. Na przykład dodaj go do fragmentu stopki tuz przed </body>.

Metoda alternatywna 1: Dodaj do fragmentu stopki

Jeśli Twoja witryna Kirby używa fragmentu stopki, możesz dodać kod osadzania bezpośrednio tam:

Otwórz site/snippets/footer.php (utwórz go, jeśli nie istnieje)
Dodaj kod osadzania przed zamykającym znacznikiem </body>:

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

Upewnij się, że Twoje szablony zawierają fragment stopki:

<?php snippet('footer') ?>

Uwaga: Jeśli fragment stopki jest juz dołączony we wszystkich szablonach, dodanie chatbota tutaj zapewnia jego wyświetlanie na każdej stronie bez modyfikowania poszczegolnych plików szablonów.

Metoda alternatywna 2: Użycie wtyczki Kirby

Możesz utworzyć wtyczkę Kirby, aby automatycznie wstrzykiwac skrypt chatbota na każda stronę bez modyfikowania szablonów:

Utwórz katalog wtyczki i plik w site/plugins/asyntai/index.php
Dodaj następujący kod, aby użyć hooków Kirby do wstrzyknięcia skryptu:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

Wskazówka: Podejście z wtyczka jest idealne, jeśli chcesz, aby chatbot ladowal sie automatycznie na każdej stronie bez edytowania plików szablonów lub fragmentow. Utrzymuje również integracje chatbota w sposób modularny i latwy do wlaczenia lub wylaczenia.

Metoda alternatywna 3: Użycie helpera js() Kirby

Kirby udostępnia wbudowany helper js() do ładowania plików JavaScript. Możesz go użyć w swoim szablonie lub fragmencie:

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

Lub dodaj skrypt bezpośrednio w pliku PHP szablonu przed </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 async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Uwaga: Jeśli używasz helpera js(), upewnij sie, ze jest umieszczony wewnątrz sekcji <body> szablonu, aby chatbot ladowal sie poprawnie.

Krok 3: Weryfikacja instalacji

Po dodaniu kodu osadzania do witryny Kirby odwiedź swoja stronę w nowej karcie przeglądarki lub w oknie incognito. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu. Kliknij go, aby upewnić sie, ze otwiera sie i działa poprawnie.

Nie widzisz widgetu? Upewnij sie, ze zamieniles YOUR_WIDGET_ID na swoj rzeczywisty identyfikator widgetu z panelu. Sprawdź, czy plik fragmentu lub wtyczki jest zapisany w prawidlowym katalogu. Jeśli używasz metody z wtyczka, upewnij sie, ze struktura katalogu wtyczki to site/plugins/asyntai/index.php. Wyczyść pamięć podręczna przeglądarki lub przetestuj w trybie incognito. Sprawdź konsolę programisty przeglądarki (F12) pod kątem błędów.