How to Add Asyntai AI Chatbot to SilverStripe

Step-by-step guide for SilverStripe CMS

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 SilverStripe Template (Recommended)

The simplest way to add the chatbot to your SilverStripe site is by editing your theme's main template file directly:

Open your theme's template file (e.g., themes/yourtheme/templates/Page.ss)
Add the embed code just before the closing </body> tag:

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

Save the file and flush the SilverStripe cache by appending ?flush=1 to your site URL

Tip: SilverStripe uses .ss template files with a template inheritance system. Placing the script in your base Page.ss template ensures the chatbot appears on every page of your site. If your theme uses an Includes folder, you can also place the script in a shared include file.

Alternative Method 1: Using Requirements Class in Controller

SilverStripe provides a Requirements class for managing JavaScript and CSS dependencies programmatically. This is the recommended approach for developers:

Open app/src/PageController.php (or your page controller file)
In the init() method, use Requirements::customScript() to dynamically load the widget:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            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.head.appendChild(script);
        JS);
    }
}

Save the file and flush the cache by visiting yourdomain.com?flush=1

Note: The Requirements class is the SilverStripe-standard way to include scripts and stylesheets. Using Requirements::customScript() outputs inline JavaScript. This method ensures the widget is loaded on every page handled by your PageController.

Alternative Method 2: Using Requirements in Template

You can also use SilverStripe's template syntax to require JavaScript files directly in your .ss template:

Open your theme's template file (e.g., themes/yourtheme/templates/Page.ss)
Add the following near the bottom of the template, before </body>:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

Tip: The <% require %> syntax is SilverStripe's template-level way of including assets. Note that this method does not natively support adding custom data attributes to the script tag, so we add a small initialization snippet to set the widget ID.

Alternative Method 3: Using SilverStripe Config (YAML)

For a configuration-driven approach, you can use SilverStripe's YAML configuration to add global requirements:

Open or create the file app/_config/app.yml
Add configuration to include the widget via a custom extension or controller setup:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

Create the extension file app/src/Extensions/AsyntaiChatbotExtension.php:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            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.head.appendChild(script);
        ");
    }
}

Apply the extension to your PageController in app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Run ?flush=1 to rebuild the configuration cache

Note: Using YAML configuration and extensions is the most modular SilverStripe approach. It keeps your chatbot integration separate from your main controller logic and makes it easy to enable or disable without changing code.

Step 3: Verify Installation

After adding the code and flushing the SilverStripe cache, open your 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 flushed the cache by appending ?flush=1 to your site URL. 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. If using the Requirements class, verify that your PageController's init() method is being called correctly.