How to Add Asyntai AI Chatbot to Grav
Step-by-step guide for 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
Step 1: Get Your Embed Code
First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Note: The code above is just an example. You must copy your own unique embed code from your Dashboard as it contains your personal widget ID.
Step 2: Add to Grav Theme Template (Recommended)
The best way to add the chatbot to all pages of your Grav site is by editing your theme's base Twig template:
- Navigate to your Grav project's user/themes/yourtheme/templates/ directory and open default.html.twig (or the base template used by your theme)
- Add your Asyntai embed code before the closing </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>
- Save the file
Tip: Grav uses Twig as its templating engine. The base template is typically default.html.twig or partials/base.html.twig depending on your theme. Check your theme's structure to find the correct file that contains the </body> closing tag.
Alternative Method 1: Using Grav Asset Manager
Grav's built-in Asset Manager provides a clean way to add JavaScript assets via Twig:
- Open your theme's base Twig template (e.g., user/themes/yourtheme/templates/partials/base.html.twig)
- Use the Asset Manager to add the JavaScript:
{% do assets.addJs('https://asyntai.com/static/js/chat-widget.js', {group: 'bottom', loading: 'async', 'data-asyntai-id': 'YOUR_WIDGET_ID'}) %}
Or add inline JavaScript to create the script element dynamically in your base template:
<!-- 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>
Note: The Asset Manager method is the Grav-recommended approach for managing JavaScript assets. It provides built-in support for asset pipelining, ordering, and grouping.
Alternative Method 2: Using Custom JS Plugin
If you prefer a plugin-based approach without editing theme files:
- Install the "Custom JS" plugin from the Grav admin panel or via CLI:
bin/gpm install custom-js
- Go to Admin > Plugins > Custom JS
- Add the embed script code:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Save the plugin configuration
Tip: Using a plugin to inject scripts means you don't need to modify any theme files. This makes it easier to switch or update themes without losing your chatbot integration.
Alternative Method 3: Using Block Override in Child Template
If your Grav theme uses Twig block inheritance, you can override the bottom block in a child template:
{% block bottom %}
{{ parent() }}
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
{% endblock %}
- Create or open a child template that extends your theme's base template
- Add the block override shown above
- The {{ parent() }} call ensures all existing content in the block is preserved
Note: This method uses Twig's template inheritance system. Make sure the block name (e.g., bottom) matches the block defined in your theme's base template. Common block names include bottom, javascripts, or footer.
Alternative Method 4: Using Grav Custom Head Plugin
Another plugin-based option is the Custom Head plugin:
- Install the custom-head plugin via CLI or admin panel:
bin/gpm install custom-head
- Go to Admin > Plugins > Custom Head
- Add your Asyntai embed script code in the plugin configuration:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
- Save the configuration
Tip: The Custom Head plugin allows you to inject code into your site's head or body sections without touching theme files. Check the plugin documentation for the correct placement option to insert the script before the closing </body> tag.
Step 3: Clear Cache and Verify
After adding the code, clear your Grav cache and verify the installation:
# Clear cache via CLI
bin/grav clearcache
# Or clear cache from Admin Panel:
# Admin > Tools > Clear Cache
Open your Grav site in a new browser tab. You should see the chat widget button in the bottom right corner. Click it to ensure it opens and functions correctly.
Not seeing the widget? Make sure you cleared the Grav cache with bin/grav clearcache or from the admin panel. Check that you replaced YOUR_WIDGET_ID with your actual widget ID from the dashboard. Clear your browser cache or view in incognito mode. Open the browser console (F12) to check for any JavaScript errors. Verify the script is present in the page source by right-clicking and selecting "View Page Source".