How to Add Asyntai AI Chatbot to Kirby

Step-by-step guide for Kirby CMS websites

Platform:

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 Kirby Snippet (Recommended)

Kirby is a flat-file PHP CMS that uses snippets for reusable template parts. The recommended approach is to create a dedicated snippet for the chatbot:

Create a new snippet file at site/snippets/asyntai-widget.php
Paste your embed code into the file:

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

Then include the snippet in your main template (e.g., site/templates/default.php) or your layout, just before the closing </body> tag:

<?php snippet('asyntai-widget') ?>
</body>
</html>

Tip: If you use a shared layout or footer snippet, you can add the snippet call there so it automatically appears on every page. For example, add it to your footer snippet just before </body>.

Alternative Method 1: Add to Footer Snippet

If your Kirby site uses a footer snippet, you can add the embed code directly there:

Open site/snippets/footer.php (create it if it doesn't exist)
Add the embed code before the closing </body> tag:

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

Make sure your templates include the footer snippet:

<?php snippet('footer') ?>

Note: If the footer snippet is already included across all your templates, adding the chatbot here ensures it appears on every page without modifying individual template files.

Alternative Method 2: Using Kirby Plugin

You can create a Kirby plugin to automatically inject the chatbot script into every page without modifying any templates:

Create the plugin directory and file at site/plugins/asyntai/index.php
Add the following code to use Kirby's hooks to inject the script:

Kirby::plugin('custom/asyntai', [
    'hooks' => [
        'page.render:after' => function ($contentType, $body) {
            $script = '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>';
            return str_replace('</body>', $script . '</body>', $body);
        }
    ]
]);

Tip: The plugin approach is ideal if you want the chatbot to load on every page automatically without editing any template or snippet files. It also keeps your chatbot integration modular and easy to enable or disable.

Alternative Method 3: Using Kirby's js() Helper

Kirby provides a built-in js() helper for loading JavaScript files. You can use it in your template or snippet:

<?= js('https://asyntai.com/static/js/chat-widget.js', ['async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID']) ?>

Or add the script directly in your template PHP file before </body>:

<?php // site/templates/default.php ?>
<html>
<head>
    <!-- head content -->
</head>
<body>
    <!-- page content -->
    <?php snippet('header') ?>
    <main>
        <?= $page->text()->kirbytext() ?>
    </main>
    <?php snippet('footer') ?>

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

Note: If you use the js() helper, make sure it is placed inside the <body> section of your template to ensure the chatbot loads correctly.

Step 3: Verify Installation

After adding the embed code to your Kirby site, visit your website in a new browser tab or incognito window. You should see the chat widget button in the bottom right corner. Click it to make sure it opens and works correctly.

Not seeing the widget? Make sure you replaced YOUR_WIDGET_ID with your actual widget ID from the dashboard. Verify that the snippet or plugin file is saved in the correct directory. If using the plugin method, ensure the plugin directory structure is site/plugins/asyntai/index.php. Clear your browser cache or test in incognito mode. Check your browser's developer console (F12) for any errors.