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

Ghid pas cu pas pentru CMS Grav

Platformă:

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

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

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></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 temei Grav (Recomandat)

Cel mai bun mod de a adăuga chatbot-ul pe toate paginile site-ului Grav este prin editarea șablonului Twig de bază al temei:

Navigați la directorul user/themes/yourtheme/templates/ al proiectului Grav și deschideți default.html.twig (sau șablonul de bază utilizat de tema dvs.)
Adăugați codul de integrare Asyntai înainte de eticheta de închidere </body>:

<!-- user/themes/yourtheme/templates/default.html.twig -->
...
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Salvați fișierul

Sfat: Grav folosește Twig ca motor de șabloane. Șablonul de bază este de obicei default.html.twig sau partials/base.html.twig, în funcție de tema dvs. Verificați structura temei pentru a găsi fișierul corect care conține eticheta de închidere </body>.

Metoda alternativă 1: Utilizarea Grav Asset Manager

Asset Manager-ul integrat Grav oferă o modalitate curată de a adăuga resurse JavaScript prin Twig:

Deschideți șablonul Twig de bază al temei (de ex., user/themes/yourtheme/templates/partials/base.html.twig)
Utilizați Asset Manager pentru a adăuga JavaScript:

{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}

Sau adăugați JavaScript inline pentru a crea elementul script dinamic în șablonul de bază:

<!-- user/themes/yourtheme/templates/partials/base.html.twig -->
...
{% block bottom %}
    {{ assets.js('bottom') }}
{% endblock %}

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://asyntai.com/static/js/chat-widget.js';
  script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
  script.async = true;
  document.body.appendChild(script);
})();
</script>
</body>
</html>

Notă: Metoda Asset Manager este abordarea recomandată de Grav pentru gestionarea resurselor JavaScript. Oferă suport integrat pentru pipeline-ul de resurse, ordonare și grupare.

Metoda alternativă 2: Utilizarea pluginului Custom JS

Dacă preferați o abordare bazată pe plugin fără a edita fișierele temei:

Instalați pluginul \"Custom JS\" din panoul de administrare Grav sau prin CLI:

bin/gpm install custom-js

Mergeți la Admin > Plugins > Custom JS
Adăugați codul scriptului de integrare:

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

Salvați configurația pluginului

Sfat: Utilizarea unui plugin pentru a injecta scripturi înseamnă că nu trebuie să modificați fișierele temei. Aceasta facilitează schimbarea sau actualizarea temelor fără a pierde integrarea chatbot-ului.

Metoda alternativă 3: Utilizarea suprascrierii de blocuri în șablonul copil

Dacă tema Grav folosește moștenirea de blocuri Twig, puteți suprascrie blocul inferior într-un șablon copil:

{% block bottom %}
    {{ parent() }}
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}

Creați sau deschideți un șablon copil care extinde șablonul de bază al temei dvs.
Adăugați suprascrierea de bloc prezentată mai sus
Apelul parent() se asigură că tot conținutul existent din bloc este păstrat

Notă: Această metodă utilizează sistemul de moștenire a șabloanelor Twig. Asigurați-vă că numele blocului (de ex., bottom) corespunde blocului definit în șablonul de bază al temei. Numele comune de blocuri includ bottom, javascripts sau footer.

Metoda alternativă 4: Utilizarea pluginului Grav Custom Head

O altă opțiune bazată pe plugin este pluginul Custom Head:

Instalați pluginul custom-head prin CLI sau panoul de administrare:

bin/gpm install custom-head

Mergeți la Admin > Plugins > Custom Head
Adăugați codul scriptului de integrare Asyntai în configurația pluginului:

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

Salvați configurația

Sfat: Pluginul Custom Head vă permite să injectați cod în secțiunile head sau body ale site-ului fără a atinge fișierele temei. Verificați documentația pluginului pentru opțiunea corectă de plasare pentru a insera scriptul înainte de eticheta de închidere </body>.

Pasul 3: Goliți memoria cache și verificați

După adăugarea codului, goliți cache-ul Grav și verificați instalarea:

# Clear cache via CLI
bin/grav clearcache

# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache

Deschideți site-ul Grav într-o filă nouă de browser. 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 golit cache-ul Grav cu bin/grav clearcache sau din panoul de administrare. Verificați că ați înlocuit YOUR_WIDGET_ID cu ID-ul real al widget-ului din tabloul de bord. Goliți cache-ul browserului sau vizualizați în modul incognito. Deschideți consola browserului (F12) pentru a verifica eventualele erori JavaScript. Verificați că scriptul este prezent în sursa paginii făcând clic dreapta și selectând "View Page Source".

Documentație

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

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

Pasul 2: Adăugați în șablonul temei Grav (Recomandat)

Metoda alternativă 1: Utilizarea Grav Asset Manager

Metoda alternativă 2: Utilizarea pluginului Custom JS

Metoda alternativă 3: Utilizarea suprascrierii de blocuri în șablonul copil

Metoda alternativă 4: Utilizarea pluginului Grav Custom Head

Pasul 3: Goliți memoria cache și verificați