Sådan tilføjer du Asyntai AI-chatbot til Grav
Trin-for-trin guide til Grav CMS
HTML/Custom
WordPress
Shopify
WooCommerce
BigCommerce
Ecwid
Wix
Squarespace
Webflow
Weebly
HubSpot
Tilda
Adobe Experience Manager
Duda
Google Sites
Bludit
Plesk
Concrete CMS
Docusaurus
Hugo
Kentico
Volusion
Craft CMS
Contentful
Strapi
Joomla
Drupal
Magento
Blogger
Bitrix
TYPO3
PrestaShop
OpenCart
Ghost
Statamic
Umbraco
Moodle
SilverStripe
Grav
October CMS
ProcessWire
Sanity
ExpressionEngine
Sylius
Backdrop CMS
MODX
Bagisto
PayloadCMS
e107
CrafterCMS
Kirby
MedusaCMS
DatoCMS
GoDaddy
Framer
Bubble
Carrd
Jimdo
Strikingly
Kajabi
Teachable
Thinkific
ClickFunnels
Hostinger
Unbounce
Leadpages
Systeme.io
Instapage
Trin 1: Hent din indlejringskode
Gå først til dit Asyntai Dashboard og rul ned til sektionen "Indlejringskode". Kopiér din unikke indlejringskode, der vil se sådan ud:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Bemærk: Koden ovenfor er blot et eksempel. Du skal kopiere din egen unikke indlejringskode fra dit Dashboard, da den indeholder dit personlige widget-ID.
Trin 2: Tilføj til Grav-temaskabelon (anbefalet)
Den bedste måde at tilføje chatbotten til alle sider på dit Grav-websted er ved at redigere dit temas basisskabelon i Twig:
- Naviger til dit Grav-projekts user/themes/yourtheme/templates/-mappe og åbn default.html.twig (eller den basisskabelon, som dit tema bruger)
- Tilføj din Asyntai-indlejringskode før det afsluttende </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>
- Gem filen
Tip: Grav bruger Twig som skabelonmotor. Basisskabelonen er typisk default.html.twig eller partials/base.html.twig afhængigt af dit tema. Tjek dit temas struktur for at finde den korrekte fil, der indeholder det afsluttende </body>-tag.
Alternativ metode 1: Brug af Grav Asset Manager
Gravs indbyggede Asset Manager giver en ren måde at tilføje JavaScript-aktiver via Twig:
- Åbn dit temas basisskabelon i Twig (f.eks. user/themes/yourtheme/templates/partials/base.html.twig)
- Brug Asset Manager til at tilføje JavaScript:
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}
Eller tilføj inline JavaScript for at oprette scriptelementet dynamisk i din basisskabelon:
<!-- 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>
Bemærk: Asset Manager-metoden er Gravs anbefalede tilgang til håndtering af JavaScript-aktiver. Den giver indbygget understøttelse af asset-pipelines, rækkefølge og gruppering.
Alternativ metode 2: Brug af Custom JS-plugin
Hvis du foretrækker en plugin-baseret tilgang uden at redigere temafiler:
- Installer "Custom JS"-pluginnet fra Grav-administrationspanelet eller via CLI:
bin/gpm install custom-js
- Gå til Admin > Plugins > Custom JS
- Tilføj indlejringsscriptkoden:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Gem pluginkonfigurationen
Tip: Brug af et plugin til at indsprøjte scripts betyder, at du ikke behøver at ændre nogen temafiler. Dette gør det nemmere at skifte eller opdatere temaer uden at miste din chatbot-integration.
Alternativ metode 3: Brug af blokoverstyring i underordnet skabelon
Hvis dit Grav-tema bruger Twig-blokarv, kan du overstyre bundblokken i en underordnet skabelon:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}
- Opret eller åbn en underordnet skabelon, der udvider dit temas basisskabelon
- Tilføj den blokoverstyring, der er vist ovenfor
- Kaldet parent() sikrer, at alt eksisterende indhold i blokken bevares
Bemærk: Denne metode bruger Twigs skabelonarvsystem. Sørg for, at bloknavnet (f.eks. bottom) matcher den blok, der er defineret i dit temas basisskabelon. Almindelige bloknavne inkluderer bottom, javascripts eller footer.
Alternativ metode 4: Brug af Grav Custom Head-plugin
En anden plugin-baseret mulighed er Custom Head-pluginnet:
- Installer custom-head-pluginnet via CLI eller administrationspanelet:
bin/gpm install custom-head
- Gå til Admin > Plugins > Custom Head
- Tilføj din Asyntai-indlejringsscriptkode i pluginkonfigurationen:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Gem konfigurationen
Tip: Custom Head-pluginnet giver dig mulighed for at indsprøjte kode i dit websteds head- eller body-sektioner uden at røre temafiler. Tjek plugin-dokumentationen for den korrekte placeringsindstilling for at indsætte scriptet før det afsluttende </body>-tag.
Trin 3: Ryd cache og verificér
Efter at have tilføjet koden skal du rydde din Grav-cache og bekræfte installationen:
# Clear cache via CLI
bin/grav clearcache
# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache
Åbn dit Grav-websted i en ny browserfane. Du bør se chat-widget-knappen i det nedre højre hjørne. Klik på den for at sikre, at den åbner og fungerer korrekt.
Ser du ikke widget'en? Sørg for, at du ryddede Grav-cachen med bin/grav clearcache eller fra administrationspanelet. Kontroller, at du erstattede YOUR_WIDGET_ID med dit faktiske widget-ID fra dashboardet. Ryd din browsercache eller se i inkognitotilstand. Åbn browserkonsollen (F12) for at tjekke for eventuelle JavaScript-fejl. Bekræft, at scriptet er til stede i sidekilden ved at højreklikke og vælge "Vis sidekilde".