Slik legger du til Asyntai AI-chatbot på Grav

Trinn-for-trinn-guide for Grav CMS

Plattform:

Trinn 1: Hent innbyggingskoden din

Gå først til Asyntai-dashbordet ditt og bla ned til «Innbyggingskode»-seksjonen. Kopier din unike innbyggingskode som vil se slik ut:

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

Merk: Koden ovenfor er bare et eksempel. Du må kopiere din egen unike innbyggingskode fra Dashbordet ditt, da den inneholder din personlige widget-ID.

Trinn 2: Legg til i Grav-temamal (anbefalt)

Den beste måten å legge til chatboten på alle sider av Grav-nettstedet ditt er å redigere temaets Twig-grunnmal:

Naviger til Grav-prosjektets user/themes/yourtheme/templates/-katalog og åpne default.html.twig (eller grunnmalen som brukes av temaet ditt)
Legg til Asyntai-innbyggingskoden før den avsluttende </body>-taggen:

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

Lagre filen

Tips: Grav bruker Twig som malmotor. Grunnmalen er vanligvis default.html.twig eller partials/base.html.twig avhengig av temaet ditt. Sjekk temaets struktur for å finne riktig fil som inneholder den avsluttende </body>-taggen.

Alternativ metode 1: Bruk av Grav Asset Manager

Gravs innebygde Asset Manager gir en enkel måte å legge til JavaScript-ressurser via Twig:

Åpne temaets Twig-grunnmal (f.eks. user/themes/yourtheme/templates/partials/base.html.twig)
Bruk Asset Manager til å legge til JavaScript:

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

Eller legg til inline JavaScript for å opprette skriptelementet dynamisk i grunnmalen din:

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

Merk: Asset Manager-metoden er Gravs anbefalte tilnærming for håndtering av JavaScript-ressurser. Den gir innebygd støtte for asset-pipeline, rekkefølge og gruppering.

Alternativ metode 2: Bruk av Custom JS-utvidelse

Hvis du foretrekker en utvidelsesbasert tilnærming uten å redigere temafiler:

Installer «Custom JS»-utvidelsen fra Grav-administrasjonspanelet eller via CLI:

bin/gpm install custom-js

Gå til Admin > Utvidelser > Custom JS
Legg til innbyggingsskriptkoden:

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

Lagre utvidelseskonfigurasjonen

Tips: Å bruke en utvidelse for å injisere skript betyr at du ikke trenger å endre noen temafiler. Dette gjør det enklere å bytte eller oppdatere temaer uten å miste chatbot-integrasjonen.

Alternativ metode 3: Bruk av blokkoverstyring i undermal

Hvis Grav-temaet ditt bruker Twig-blokkarv, kan du overstyre bunnblokken i en undermal:

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

Opprett eller åpne en undermal som utvider temaets grunnmal
Legg til blokkoverstyringen vist ovenfor
parent()-kallet sikrer at alt eksisterende innhold i blokken bevares

Merk: Denne metoden bruker Twigs malarvsystem. Sørg for at blokknavnet (f.eks. bottom) samsvarer med blokken definert i temaets grunnmal. Vanlige blokknavn inkluderer bottom, javascripts eller footer.

Alternativ metode 4: Bruk av Grav Custom Head-utvidelse

Et annet utvidelsesbasert alternativ er Custom Head-utvidelsen:

Installer custom-head-utvidelsen via CLI eller administrasjonspanelet:

bin/gpm install custom-head

Gå til Admin > Utvidelser > Custom Head
Legg til Asyntai-innbyggingsskriptkoden i utvidelseskonfigurasjonen:

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

Lagre konfigurasjonen

Tips: Custom Head-utvidelsen lar deg injisere kode i nettstedets head- eller body-seksjoner uten å røre temafiler. Sjekk utvidelsesdokumentasjonen for riktig plasseringsalternativ for å sette inn skriptet før den avsluttende </body>-taggen.

Trinn 3: Tøm hurtigbuffer og bekreft

Etter at du har lagt til koden, tøm Grav-hurtigbufferen og verifiser installasjonen:

# Clear cache via CLI
bin/grav clearcache

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

Åpne Grav-nettstedet ditt i en ny nettleserfane. Du bør se chat-widget-knappen nederst til høyre. Klikk på den for å forsikre deg om at den åpnes og fungerer riktig.

Ser du ikke widgeten? Sørg for at du tømte Grav-hurtigbufferen med bin/grav clearcache eller fra administrasjonspanelet. Sjekk at du erstattet YOUR_WIDGET_ID med din faktiske widget-ID fra dashbordet. Tøm nettleserens hurtigbuffer eller vis siden i inkognitomodus. Åpne nettleserkonsollen (F12) for å sjekke om det er JavaScript-feil. Verifiser at skriptet er til stede i sidens kildekode ved å høyreklikke og velge «Vis sidekilde».

Dokumentasjon

Slik legger du til Asyntai AI-chatbot på Grav

Trinn 1: Hent innbyggingskoden din

Trinn 2: Legg til i Grav-temamal (anbefalt)

Alternativ metode 1: Bruk av Grav Asset Manager

Alternativ metode 2: Bruk av Custom JS-utvidelse

Alternativ metode 3: Bruk av blokkoverstyring i undermal

Alternativ metode 4: Bruk av Grav Custom Head-utvidelse

Trinn 3: Tøm hurtigbuffer og bekreft