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

Ghid pas cu pas pentru site-urile October CMS

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 șablonul de layout (Recomandat)

Modul recomandat de a adăuga chatbot-ul este prin editarea layout-ului implicit în backend-ul October CMS:

Conectați-vă la backend-ul October CMS
Mergeți la CMS > Layouts în meniul principal
Deschideți layout-ul implicit (de obicei default.htm)
Găsiți închiderea </body> etichetei și {% scripts %} placeholder-ul
Adăugați codul de încorporare Asyntai chiar înainte de {% scripts %} și </body>:
<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> {% scripts %} </body>
Faceți clic pe "Save" pentru a aplica modificările

Sfat: Placing the script before {% scripts %} and </body> ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading.

Alternative Method 1: Using {% put scripts %} Block

Puteți utiliza substituientul de scripturi October CMS pentru a injecta chatbot-ul dintr-o pagină sau partial:

Deschideți orice pagină sau partial în editorul CMS
Adăugați următorul cod folosind {% put scripts %} bloc:
{% put scripts %} <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> {% endput %}
Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului din tabloul de bord
Faceți clic pe "Salvare"

Notă: For this method to work, your layout must include the {% scripts %} placeholder in its markup. This is where October CMS renders all injected scripts. Most default layouts already include this tag.

Metoda alternativă 2: Utilizarea componentei PHP

Dacă preferați o abordare programatică, puteți adăuga scriptul chatbot-ului printr-o componentă personalizată:

Creați sau modificați o componentă în pluginul October CMS
În metoda onRun() a componentei, utilizați metoda addJs():
public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); }
Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
Înregistrați componenta pe paginile unde doriți să apară chatbot-ul

Sfat: Utilizarea unei componente vă oferă control programatic asupra momentului și locului în care se încarcă chatbot-ul. Puteți adăuga logică condiționată în onRun() pentru a controla încărcarea pe baza rolurilor de utilizator, tipurilor de pagini sau altor criterii.

Metoda alternativă 3: Utilizarea unui partial

Puteți crea un partial reutilizabil pentru widget-ul chatbot:

Mergeți la CMS > Partials în backend-ul October CMS
Faceți clic pe "+ Add" pentru a crea un partial nou
Denumiți-l asyntai-widget.htm
Adăugați codul de integrare Asyntai în partial:
<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>
Faceți clic pe "Salvare"
Deschideți șablonul de layout și includeți partial-ul înainte de </body>:
{% partial 'asyntai-widget' %}
Salvați layout-ul

Sfat: Utilizarea unui partial facilitează activarea sau dezactivarea chatbot-ului pe întregul site prin simpla adăugare sau eliminare a includerii partial-ului din layout.

Pasul 3: Verificați instalarea

După ce ați salvat modificările, vizitați site-ul October CMS î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 modificările în backend-ul CMS. Goliți cache-ul browserului sau vizualizați într-o fereastră incognito. Dacă site-ul dvs. utilizează caching, goliți cache-ul October CMS rulând php artisan cache:clear din linia de comandă, sau utilizați opțiunea Settings > System > Clear Cache din backend.

Selecția layout-ului: Asigurați-vă că paginile unde doriți să apară chatbot-ul utilizează layout-ul corect. Puteți verifica ce layout folosește o pagină deschizând pagina în CMS > Pages și uitându-vă la meniul derulant Layout din setările paginii.