Hur du lägger till Asyntai AI-chattbot i Grav

Steg-för-steg-guide för Grav CMS

Plattform:

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

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

Obs! Koden ovan är bara ett exempel. Du måste kopiera din egen unika inbäddningskod från din Dashboard eftersom den innehåller ditt personliga widget-ID.

Steg 2: Lägg till i Grav-temamallen (rekommenderas)

Det bästa sättet att lägga till chattboten på alla sidor på din Grav-webbplats är att redigera ditt temas bas-Twig-mall:

Navigera till din Grav-projekts katalog user/themes/yourtheme/templates/ och öppna default.html.twig (eller basmallen som används av ditt tema)
Lägg till din Asyntai-inbäddningskod före den avslutande </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>

Spara filen

Tips: Grav använder Twig som mallmotor. Basmallen är vanligtvis default.html.twig eller partials/base.html.twig beroende på ditt tema. Kontrollera ditt temas struktur för att hitta rätt fil som innehåller den avslutande taggen </body>.

Alternativ metod 1: Använda Grav Asset Manager

Gravs inbyggda Asset Manager ger ett smidigt sätt att lägga till JavaScript-tillgångar via Twig:

Öppna temats grundläggande Twig-mall (t.ex. user/themes/yourtheme/templates/partials/base.html.twig)
Använd Asset Manager för att lägga till JavaScript:

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

Eller lägg till inline-JavaScript för att skapa skriptelementet dynamiskt i din basmall:

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

Obs! Asset Manager-metoden är Gravs rekommenderade tillvägagångssätt för att hantera JavaScript-resurser. Den ger inbyggt stöd för resurskörning, ordning och gruppering.

Alternativ metod 2: Använda anpassat JS-plugin

Om du föredrar ett plugin-baserat tillvägagångssätt utan att redigera temafiler:

Installera tillägget "Custom JS" från Gravs adminpanel eller via CLI:

bin/gpm install custom-js

Gå till Admin > Tillägg > Anpassad JS
Lägg till inbäddningsskriptets kod:

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

Spara plugin-konfigurationen

Tips: Att använda ett plugin för att injicera skript innebär att du inte behöver ändra några temafiler. Detta gör det enklare att byta eller uppdatera teman utan att förlora din chatbot-integration.

Alternativ metod 3: Använda block-override i barnmall

Om ditt Grav-tema använder Twig-blockarv kan du åsidosätta bottenblocken i en underordnad mall:

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

Skapa eller öppna en underordnad mall som utökar temats basmall
Lägg till blocköverstyrningen som visas ovan
Anropet parent() säkerställer att allt befintligt innehåll i blocket bevaras

Obs! Den här metoden använder Twigs mallarvssystem. Se till att blocknamnet (t.ex. bottom) matchar blocket som definieras i ditt temas basmall. Vanliga blocknamn inkluderar bottom, javascripts eller footer.

Alternativ metod 4: Använda Grav Custom Head Plugin

Ett annat pluginbaserat alternativ är Custom Head-pluginet:

Installera pluginet custom-head via CLI eller adminpanelen:

bin/gpm install custom-head

Gå till Admin > Tillägg > Anpassat sidhuvud
Lägg till din Asyntai-inbäddningsskriptkod i pluginkonfigurationen:

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

Spara konfigurationen

Tips: Plugin-programmet Custom Head låter dig injicera kod i din webbplats huvud- eller brödtextavsnitt utan att röra temafiler. Kontrollera plugin-dokumentationen för rätt placeringsalternativ för att infoga skriptet före den avslutande </body>-taggen.

Steg 3: Rensa cache och verifiera

Efter att du har lagt till koden, rensa din Grav-cache och verifiera installationen:

# Clear cache via CLI
bin/grav clearcache

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

Öppna din Grav-webbplats i en ny webbläsarflik. Du bör se chattwidgetknappen i det nedre högra hörnet. Klicka på den för att säkerställa att den öppnas och fungerar korrekt.

Ser du inte widgeten? Se till att du rensat Grav-cachen med bin/grav clearcache eller från adminpanelen. Kontrollera att du ersatt YOUR_WIDGET_ID med ditt faktiska widget-ID från instrumentpanelen. Rensa webbläsarens cache eller visa sidan i inkognitoläge. Öppna webbläsarens konsol (F12) för att kontrollera eventuella JavaScript-fel. Verifiera att skriptet finns i sidkällan genom att högerklicka och välja "Visa sidkälla".

Dokumentation

Hur du lägger till Asyntai AI-chattbot i Grav

Steg 1: Hämta din inbäddningskod

Steg 2: Lägg till i Grav-temamallen (rekommenderas)

Alternativ metod 1: Använda Grav Asset Manager

Alternativ metod 2: Använda anpassat JS-plugin

Alternativ metod 3: Använda block-override i barnmall

Alternativ metod 4: Använda Grav Custom Head Plugin

Steg 3: Rensa cache och verifiera