Asyntai AI -chatbotin lisääminen ProcessWireen

Vaiheittainen ohje ProcessWire CMS -verkkosivustoille

Alusta:

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

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

Huomautus: Yllä oleva koodi on vain esimerkki. Sinun on kopioitava oma yksilöllinen upotuskoodisi Hallintapaneelistasi, sillä se sisältää henkilökohtaisen widget-tunnuksesi.

Vaihe 2: Lisää mallitiedostoon (suositeltu)

ProcessWire käyttää PHP-mallitiedostoja, jotka sijaitsevat hakemistossa site/templates/. Helpoin tapa on lisätä upotuskoodi suoraan päämallitiedostoosi:

Käytä ProcessWire-asennustiedostojasi FTP:n, SSH:n tai tiedostonhallinnan kautta
Siirry kansioon site/templates/
Avaa päämallitiedostosi — tämä on usein _main.php tai basic-page.php sivustoprofiilisi mukaan
Jos käytät viivästettyä tulostusstrategiaa (oletusasetus useimmille sivustoprofiileille), avaa _main.php
Etsi sulkeva </body>-tagi
Liitä Asyntai-upotuskoodisi juuri ennen sitä:

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

Vinkki: Skriptin sijoittaminen juuri ennen sulkevaa </body>-tagia varmistaa, että chatbot latautuu sivun sisällön jälkeen, mikä on suositeltavaa optimaalisen suorituskyvyn kannalta eikä hidasta sivun renderöintiä.

Vaihtoehtoinen menetelmä 1: _foot.inc- tai _main.php-liitetiedoston käyttö

Jos ProcessWire-sivustosi käyttää liitetiedostomenetelmää (yleinen monissa sivustoprofiileissa), voit lisätä upotuskoodin jaettuun alatunnisteen sisällytystiedostoon:

Siirry kansioon site/templates/
Avaa _foot.inc (tai vastaava alatunnisteen sisällytystiedostosi)
Liitä Asyntai-upotuskoodisi juuri ennen sulkevaa </body>-tagia
Tallenna tiedosto

ProcessWiren viivästetty tulostusstrategia toimii tyypillisesti kolmen avaintiedoston kanssa:

_init.php — suoritetaan ennen jokaista mallitiedostoa, alustaa muuttujat
Mallitiedostosi (esim. basic-page.php) — täyttää sisältömuuttujat
_main.php — tulostaa lopullisen HTML-merkinnän näiden muuttujien avulla

Jos sivustosi käyttää tätä lähestymistapaa, skriptin lisääminen _main.php-tiedostoon ennen </body>-tagia varmistaa, että se näkyy jokaisella sivulla.

Huomautus: Tiedostonimet _init.php ja _main.php on määritetty site/config.php-tiedostossasi $config->prependTemplateFile- ja $config->appendTemplateFile-asetusten kautta. Tarkista asetuksesi, jos tiedostojesi nimet poikkeavat.

Vaihtoehtoinen menetelmä 2: $config->scripts-taulukon käyttö

ProcessWire tarjoaa $config->scripts FilenameArray-taulukon, jolla voit hallita JavaScript-tiedostoja. Lisää _init.php- tai yksittäiseen mallitiedostoosi:

<?php
$config->scripts->add('https://asyntai.com/static/js/chat-widget.js');
?>

Käy sitten _main.php-tiedostossasi (tai alatunnisteen sisällytystiedostossa) läpi skriptitaulukko niiden tulostamiseksi:

<?php foreach($config->scripts as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>

Tärkeää: $config->scripts-lähestymistapa käsittelee skriptin src-attribuutin, mutta data-asyntai-id-attribuutti on käsiteltävä erikseen. Sinun on joko lisättävä data-attribuutti manuaalisesti silmukan tulosteeseen tai käytettävä suoraa script-tagimenetelmää vaiheesta 2 yksinkertaisinta asennusta varten.

Vaihtoehtoinen menetelmä 3: Hookin käyttö (ready.php)

Edistyneempää lähestymistapaa varten voit käyttää ProcessWiren hook-järjestelmää chatbot-skriptin automaattiseen lisäämiseen jokaiselle sivulle. Lisää seuraava site/ready.php-tiedostoosi:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Tämä hook kaappaa jokaisen sivun renderöidyn HTML-tulosteen ja lisää Asyntai-skriptin automaattisesti juuri ennen sulkevaa </body>-tagia.

Vinkki: ready.php-hook-lähestymistapa on ihanteellinen, jos haluat chatbotin jokaiselle sivulle muokkaamatta mallitiedostoja. Se säilyy myös mallitiedostojen muutosten ja teemapäivitysten yli, koska se sijaitsee mallitiedostojen ulkopuolella.

Vaihe 3: Vahvista asennus

Tallenna muutoksesi ja avaa ProcessWire-sivustosi uudessa selaimen välilehdessä tai incognito-ikkunassa. Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein.

Etkö näe widgetiä? Varmista, että tallensit kaikki muokatut tiedostot. Kokeile tyhjentää selaimen välimuisti tai tarkastella sivua incognito-ikkunassa. Jos ProcessWiren mallivälimuisti on käytössä, sinun on ehkä tyhjennettävä se menemällä kohtaan Modules → Core → Template Engine Cache tai lisäämällä ?nocache=1 URL-osoitteeseesi. Varmista myös, että tarkastelemasi sivut todella käyttävät kyseistä mallitiedostoa.