How to Add Asyntai AI Chatbot to October CMS

Step-by-step guide for October 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 Layout Template (Recommended)

The recommended way to add the chatbot is by editing your default layout in the October CMS backend:

Log in to your October CMS backend
Go to CMS > Layouts in the main menu
Open your default layout (usually default.htm)
Find the closing </body> tag and the {% scripts %} placeholder
Add your Asyntai embed code just before {% scripts %} and </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% scripts %} </body>
Click "Save" to apply your changes

Tip: Placing the script before {% scripts %} and </body> ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading.

Alternative Method 1: Using {% put scripts %} Block

You can use the October CMS scripts placeholder to inject the chatbot from a page or partial:

Open any page or partial in the CMS editor
Add the following code using the {% put scripts %} block:
{% put scripts %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endput %}
Replace YOUR_WIDGET_ID with your actual widget ID from the dashboard
Click "Save"

Note: For this method to work, your layout must include the {% scripts %} placeholder in its markup. This is where October CMS renders all injected scripts. Most default layouts already include this tag.

Alternative Method 2: Using Component PHP

If you prefer a programmatic approach, you can add the chatbot script via a custom component:

Create or modify a component in your October CMS plugin
In the component's onRun() method, use the addJs() method:
public function onRun() { $this->addJs('https://asyntai.com/static/js/chat-widget.js', [ 'async' => true, 'data-asyntai-id' => 'YOUR_WIDGET_ID' ]); }
Replace YOUR_WIDGET_ID with your actual widget ID
Register the component on the pages where you want the chatbot to appear

Tip: Using a component gives you programmatic control over when and where the chatbot loads. You can add conditional logic inside onRun() to control loading based on user roles, page types, or other criteria.

Alternative Method 3: Using a Partial

You can create a reusable partial for the chatbot widget:

Go to CMS > Partials in the October CMS backend
Click "+ Add" to create a new partial
Name it asyntai-widget.htm
Add your Asyntai embed code to the partial:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Click "Save"
Open your layout template and include the partial before </body>:
{% partial 'asyntai-widget' %}
Save the layout

Tip: Using a partial makes it easy to enable or disable the chatbot across your entire site by simply adding or removing the partial include from your layout.

Step 3: Verify Installation

After saving your changes, visit your October CMS 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 saved all changes in the CMS backend. Clear your browser cache or view in an incognito window. If your site uses caching, clear the October CMS cache by running php artisan cache:clear from the command line, or use the Settings > System > Clear Cache option in the backend.

Layout Selection: Make sure the pages where you want the chatbot to appear are using the correct layout. You can check which layout a page uses by opening the page in CMS > Pages and looking at the Layout dropdown in the page settings.