Kako dodati klepetalnik Asyntai z UI v Kirby

Vodič po korakih za spletne strani Kirby CMS

Platforma:

Korak 1: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

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

Opomba: Zgornja koda je le primer. Svojo edinstveno vdelovalno kodo morate kopirati iz svoje Nadzorne plošče, saj vsebuje vaš osebni ID klepetalnika.

Korak 2: Dodajte v delček Kirby (priporočeno)

Kirby je CMS PHP z datotečnim sistemom, ki uporablja delčke za dele predlog za večkratno uporabo. Priporočeni pristop je ustvarjanje namenskega delčka za klepetalnik:

Ustvarite novo datoteko delčka na site/snippets/asyntai-widget.php
Prilepite svojo vdelovalno kodo v datoteko:

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

Nato vključite delček v svojo glavno predlogo (npr. site/templates/default.php) ali svojo postavitev, tik pred zaključno oznako </body>:

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

Nasvet: Če uporabljate skupno postavitev ali delček noge, lahko tja dodate klic delčka, da se samodejno prikaže na vsaki strani. Na primer, dodajte ga v delček noge tik pred </body>.

Alternativni način 1: Dodajte v delček noge

Če vaša stran Kirby uporablja delček noge, lahko tja neposredno dodate vdelovalno kodo:

Odprite site/snippets/footer.php (ustvarite jo, če ne obstaja)
Dodajte vdelovalno kodo pred zaključno oznako </body>:

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

Prepričajte se, da vaše predloge vključujejo delček noge:

<?php snippet('footer') ?>

Opomba: Če je delček noge že vključen v vseh vaših predlogah, dodajanje klepetalnika tukaj zagotavlja prikaz na vsaki strani brez spreminjanja posameznih datotek predlog.

Alternativni način 2: Uporaba vtičnika Kirby

Ustvarite lahko vtičnik Kirby za samodejno vstavljanje skripta klepetalnika na vsako stran brez spreminjanja kakršnihkoli predlog:

Ustvarite imenik vtičnika in datoteko na site/plugins/asyntai/index.php
Dodajte naslednjo kodo za uporabo kavljev Kirby za vstavljanje skripta:

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

Nasvet: Pristop z vtičnikom je idealen, če želite, da se klepetalnik samodejno naloži na vsaki strani brez urejanja kakršnihkoli datotek predlog ali delčkov. Prav tako ohranja integracijo klepetalnika modularno in enostavno za omogočanje ali onemogočanje.

Alternativni način 3: Uporaba pomočnika js() Kirby

Kirby zagotavlja vgrajen pomočnik js() za nalaganje datotek JavaScript. Uporabite ga lahko v svoji predlogi ali delčku:

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

Ali dodajte skript neposredno v svojo datoteko predloge PHP pred </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>

Opomba: Če uporabljate pomočnik js(), se prepričajte, da je umeščen znotraj razdelka <body> vaše predloge, da zagotovite pravilno nalaganje klepetalnika.

Korak 3: Preverite namestitev

Po dodajanju vdelovalne kode na svojo stran Kirby obiščite svojo spletno stran v novem zavihku brskalnika ali oknu brez beleženja. V spodnjem desnem kotu bi morali videti gumb klepetalnika. Kliknite ga, da preverite, ali se pravilno odpre in deluje.

Ne vidite klepetalnika? Prepričajte se, da ste zamenjali YOUR_WIDGET_ID s svojim dejanskim ID-jem klepetalnika z nadzorne plošče. Preverite, ali je datoteka delčka ali vtičnika shranjena v pravem imeniku. Če uporabljate način z vtičnikom, zagotovite, da je struktura imenika vtičnika site/plugins/asyntai/index.php. Počistite predpomnilnik brskalnika ali preizkusite v načinu brez beleženja. Preverite razvijalsko konzolo brskalnika (F12) za morebitne napake.