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

Ghid pas cu pas pentru site-urile CMS ProcessWire

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 fișierul de șablon (Recomandat)

ProcessWire folosește fișiere de șablon PHP localizate în directorul site/templates/. Cea mai simplă abordare este să adăugați codul de integrare direct în fișierul de șablon principal:

Accesați fișierele instalării ProcessWire prin FTP, SSH sau managerul de fișiere
Navigați la site/templates/
Deschideți fișierul de șablon principal — acesta este adesea _main.php sau basic-page.php în funcție de profilul site-ului
Dacă utilizați strategia de ieșire întârziată (implicită pentru majoritatea profilurilor de site), deschideți _main.php
Găsiți eticheta de închidere </body>
Lipiți codul de integrare Asyntai chiar înainte de acesta:

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

Sfat: Plasarea scriptului chiar înainte de eticheta de închidere </body> asigură că chatbot-ul se încarcă după conținutul paginii, ceea ce este recomandat pentru performanță optimă și nu va încetini randarea paginii.

Metoda alternativă 1: Utilizarea _foot.inc sau a fișierului de adăugare _main.php

Dacă site-ul ProcessWire folosește abordarea cu fișier de adăugare (frecventă în multe profiluri de site), puteți adăuga codul de integrare în include-ul de subsol partajat:

Navigați la site/templates/
Deschideți _foot.inc (sau fișierul include de subsol echivalent)
Lipiți codul de integrare Asyntai chiar înainte de eticheta de închidere </body>
Salvați fișierul

Strategia de ieșire întârziată a ProcessWire funcționează de obicei cu trei fișiere cheie:

_init.php — rulează înainte de fiecare șablon, inițializează variabilele
Fișierul dvs. de șablon (de ex., basic-page.php) — populează variabilele de conținut
_main.php — produce marcajul HTML final folosind acele variabile

Dacă site-ul dvs. folosește această abordare, adăugarea scriptului în _main.php înainte de </body> asigură că apare pe fiecare pagină.

Notă: Numele fișierelor _init.php și _main.php sunt configurate în site/config.php prin setările $config->prependTemplateFile și $config->appendTemplateFile. Verificați configurația dacă fișierele dvs. au nume diferite.

Metoda alternativă 2: Utilizarea array-ului $config->scripts

ProcessWire oferă un FilenameArray $config->scripts pe care îl puteți utiliza pentru a gestiona fișierele JavaScript. În _init.php sau fișierul de șablon individual, adăugați:

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

Apoi în _main.php (sau include-ul de subsol), parcurgeți array-ul de scripturi pentru a le afișa:

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

Important: Abordarea $config->scripts gestionează atributul src al scriptului, dar atributul data-asyntai-id trebuie gestionat separat. Va trebui fie să adăugați manual atributul data în ieșirea buclei, fie să utilizați metoda directă cu eticheta script din Pasul 2 pentru configurarea cea mai simplă.

Metoda alternativă 3: Utilizarea unui Hook (ready.php)

Pentru o abordare mai avansată, puteți utiliza sistemul de hook-uri ProcessWire pentru a injecta automat scriptul chatbot-ului pe fiecare pagină. Adăugați următoarele în fișierul site/ready.php:

<?php
$wire->addHookAfter('Page::render', function(HookEvent $event) {
    $html = $event->return;
    $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>';
    $html = str_replace('</body>', $script . '</body>', $html);
    $event->return = $html;
});
?>

Acest hook interceptează ieșirea HTML randată a fiecărei pagini și injectează automat scriptul Asyntai chiar înainte de eticheta de închidere </body>.

Sfat: Abordarea cu hook-ul ready.php este ideală dacă doriți chatbot-ul pe fiecare pagină fără a modifica fișierele de șablon. De asemenea, supraviețuiește modificărilor de șablon și actualizărilor de temă deoarece se află în afara fișierelor de șablon.

Pasul 3: Verificați instalarea

După ce ați salvat modificările, vizitați site-ul ProcessWire î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 salvat toate fișierele modificate. Încercați să goliți cache-ul browserului sau să vizualizați într-o fereastră incognito. Dacă cache-ul de șabloane ProcessWire este activat, este posibil să fie nevoie să îl goliți mergând la Modules → Core → Template Engine Cache sau adăugând ?nocache=1 la URL. De asemenea, verificați că fișierul de șablon este efectiv utilizat de paginile pe care le vizualizați.