Cum să adăugați Chatbot-ul AI Asyntai în Kirby

Ghid pas cu pas pentru site-urile CMS Kirby

Platformă:

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați panoul de control Asyntai și derulați în jos până la secțiunea "Cod de integrare". Copiați codul dvs. unic de integrare, care va arăta astfel:

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

Notă: Codul de mai sus este doar un exemplu. Trebuie să copiați propriul cod unic de încorporare din Tabloul de bord, deoarece conține ID-ul personal al widgetului dvs.

Pasul 2: Adăugați în snippet-ul Kirby (Recomandat)

Kirby este un CMS PHP bazat pe fișiere plate care folosește snippet-uri pentru părți de șablon reutilizabile. Abordarea recomandată este să creați un snippet dedicat pentru chatbot:

Creați un fișier snippet nou la site/snippets/asyntai-widget.php
Lipiți codul de integrare în fișier:

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

Apoi includeți snippet-ul în șablonul principal (de ex., site/templates/default.php) sau layout-ul dvs., chiar înainte de eticheta de închidere </body>:

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

Sfat: Dacă utilizați un layout partajat sau un snippet footer, puteți adăuga apelul snippet-ului acolo, astfel încât să apară automat pe fiecare pagină. De exemplu, adăugați-l în snippet-ul footer chiar înainte de </body>.

Metoda alternativă 1: Adăugați în snippet-ul Footer

Dacă site-ul Kirby folosește un snippet footer, puteți adăuga codul de integrare direct acolo:

Deschideți site/snippets/footer.php (creați-l dacă nu există)
Adăugați codul de încorporare înainte de eticheta de închidere </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>

Asigurați-vă că șabloanele dvs. includ snippet-ul footer:

<?php snippet('footer') ?>

Notă: Dacă snippet-ul footer este deja inclus în toate șabloanele dvs., adăugarea chatbot-ului aici asigură că apare pe fiecare pagină fără a modifica fișierele de șablon individuale.

Metoda alternativă 2: Utilizarea pluginului Kirby

Puteți crea un plugin Kirby pentru a injecta automat scriptul chatbot-ului pe fiecare pagină fără a modifica niciun șablon:

Creați directorul și fișierul pluginului la site/plugins/asyntai/index.php
Adăugați următorul cod pentru a utiliza hook-urile Kirby pentru a injecta scriptul:

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);
        }
    ]
]);

Sfat: Abordarea cu plugin este ideală dacă doriți ca chatbot-ul să se încarce automat pe fiecare pagină fără a edita fișierele de șablon sau snippet. De asemenea, menține integrarea chatbot-ului modulară și ușor de activat sau dezactivat.

Metoda alternativă 3: Utilizarea helper-ului js() din Kirby

Kirby oferă un helper js() integrat pentru încărcarea fișierelor JavaScript. Îl puteți utiliza în șablonul sau snippet-ul dvs.:

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

Sau adăugați scriptul direct în fișierul PHP al șablonului înainte de </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>

Notă: Dacă utilizați helper-ul js(), asigurați-vă că este plasat în secțiunea <body> a șablonului pentru a asigura încărcarea corectă a chatbot-ului.

Pasul 3: Verificați instalarea

După adăugarea codului de integrare pe site-ul Kirby, vizitați site-ul dvs. într-o filă nouă de browser sau într-o fereastră incognito. Ar trebui să vedeți butonul widget-ului de chat în colțul din dreapta jos. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect.

Nu vedeți widgetul? Asigurați-vă că ați înlocuit YOUR_WIDGET_ID cu ID-ul real al widget-ului din tabloul de bord. Verificați că fișierul snippet sau plugin este salvat în directorul corect. Dacă utilizați metoda plugin, asigurați-vă că structura directorului pluginului este site/plugins/asyntai/index.php. Goliți cache-ul browserului sau testați în modul incognito. Verificați consola de dezvoltare a browserului (F12) pentru eventuale erori.