Hoe voegt u de Asyntai AI-chatbot toe aan Grav

Stapsgewijze handleiding voor Grav CMS

Platform:

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:

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

Opmerking: De bovenstaande code is slechts een voorbeeld. U moet uw eigen unieke insluitcode kopiëren vanuit uw Dashboard omdat deze uw persoonlijke widget-ID bevat.

Stap 2: Toevoegen aan Grav-themasjabloon (aanbevolen)

De beste manier om de chatbot aan alle pagina's van uw Grav-site toe te voegen is door het basis-Twig-sjabloon van uw thema te bewerken:

Navigeer naar de map user/themes/yourtheme/templates/ van uw Grav-project en open default.html.twig (of het basissjabloon dat door uw thema wordt gebruikt)
Voeg uw Asyntai-insluitcode toe vóór de sluitende </body>-tag:

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

Sla het bestand op

Tip: Grav gebruikt Twig als template-engine. Het basissjabloon is doorgaans default.html.twig of partials/base.html.twig, afhankelijk van uw thema. Controleer de structuur van uw thema om het juiste bestand te vinden dat de sluitende </body>-tag bevat.

Alternatieve methode 1: Grav Asset Manager gebruiken

De ingebouwde Asset Manager van Grav biedt een schone manier om JavaScript-assets toe te voegen via Twig:

Open het basis-Twig-sjabloon van uw thema (bijv. user/themes/yourtheme/templates/partials/base.html.twig)
Gebruik de Asset Manager om het JavaScript toe te voegen:

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

Of voeg inline JavaScript toe om het scriptelement dynamisch in uw basissjabloon te maken:

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

Opmerking: De Asset Manager-methode is de door Grav aanbevolen aanpak voor het beheren van JavaScript-assets. Het biedt ingebouwde ondersteuning voor asset-pipelining, volgorde en groepering.

Alternatieve methode 2: Custom JS-plugin gebruiken

Als u de voorkeur geeft aan een plugin-gebaseerde aanpak zonder themabestanden te bewerken:

Installeer de "Custom JS"-plugin vanuit het Grav-beheerpaneel of via CLI:

bin/gpm install custom-js

Ga naar Admin > Plugins > Custom JS
Voeg de insluitscriptcode toe:

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

Sla de pluginconfiguratie op

Tip: Het gebruik van een plugin om scripts te injecteren betekent dat u geen themabestanden hoeft te wijzigen. Dit maakt het gemakkelijker om van thema te wisselen of thema's bij te werken zonder uw chatbotintegratie te verliezen.

Alternatieve methode 3: Blokoverschrijving in childsjabloon gebruiken

Als uw Grav-thema Twig-blokovererving gebruikt, kunt u het onderste blok in een childsjabloon overschrijven:

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

Maak of open een kindsjabloon dat het basissjabloon van uw thema uitbreidt
Voeg de hierboven getoonde blokoverschrijving toe
De parent()-aanroep zorgt ervoor dat alle bestaande inhoud in het blok behouden blijft

Opmerking: Deze methode maakt gebruik van het sjabloonoverervingssysteem van Twig. Zorg ervoor dat de bloknaam (bijv. bottom) overeenkomt met het blok dat is gedefinieerd in het basissjabloon van uw thema. Veelvoorkomende bloknamen zijn bottom, javascripts of footer.

Alternatieve methode 4: Grav Custom Head-plugin gebruiken

Een andere plugin-gebaseerde optie is de Custom Head-plugin:

Installeer de custom-head-plugin via CLI of het beheerderspaneel:

bin/gpm install custom-head

Ga naar Admin > Plugins > Custom Head
Voeg uw Asyntai-insluitscriptcode toe in de pluginconfiguratie:

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

Sla de configuratie op

Tip: De Custom Head-plugin stelt u in staat code in de head- of body-secties van uw site te injecteren zonder themabestanden aan te raken. Raadpleeg de plugindocumentatie voor de juiste plaatsingsoptie om het script in te voegen vóór de sluitende </body>-tag.

Stap 3: Cache wissen en verifiëren

Nadat u de code hebt toegevoegd, wist u de Grav-cache en verifieert u de installatie:

# Clear cache via CLI
bin/grav clearcache

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

Open uw Grav-site in een nieuw browsertabblad. U zou de chatwidgetknop in de rechteronderhoek moeten zien. Klik erop om te controleren of deze correct opent en functioneert.

Ziet u de widget niet? Zorg ervoor dat u de Grav-cache hebt gewist met bin/grav clearcache of vanuit het beheerderspaneel. Controleer of u YOUR_WIDGET_ID hebt vervangen door uw daadwerkelijke widget-ID uit het dashboard. Wis uw browsercache of bekijk in incognitomodus. Open de browserconsole (F12) om te controleren op JavaScript-fouten. Verifieer dat het script aanwezig is in de paginabron door met de rechtermuisknop te klikken en "Paginabron weergeven" te selecteren.

Documentatie

Hoe voegt u de Asyntai AI-chatbot toe aan Grav

Stap 1: Uw insluitcode ophalen

Stap 2: Toevoegen aan Grav-themasjabloon (aanbevolen)

Alternatieve methode 1: Grav Asset Manager gebruiken

Alternatieve methode 2: Custom JS-plugin gebruiken

Alternatieve methode 3: Blokoverschrijving in childsjabloon gebruiken

Alternatieve methode 4: Grav Custom Head-plugin gebruiken

Stap 3: Cache wissen en verifiëren