How to Add Asyntai AI Chatbot to Craft CMS

Step-by-step guide for Craft 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: Edit Your Layout Template (Recommended)

The easiest way to add the chatbot to all pages is by editing your main layout template:

Access your Craft CMS project files via FTP, SSH, or your code editor
Navigate to the templates/ directory
Find your main layout file (commonly named _layout.twig, _layout.html, or located in templates/_layouts/)
Find the closing </body> tag
Paste your Asyntai embed code just before the </body> tag
Save the file

Tip: Adding the script before the closing </body> tag ensures it loads after the page content, which is recommended for chat widgets and won't slow down your page loading.

Alternative: Using Twig {% js %} Tag (Craft CMS 3.x+)

Craft CMS provides a built-in Twig tag for registering JavaScript:

Open your main layout template
Add the following code before the closing </body> tag:
{% js %} (function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })(); {% endjs %}
Replace YOUR_WIDGET_ID with your actual widget ID
Save the file

Note: The {% js %} tag automatically handles script registration and prevents duplicate loading if the same code appears multiple times.

Alternative: Create a Separate Include File

For better organization, create a dedicated include file:

Create a new file: templates/_includes/chatbot.twig (or .html)
Add your Asyntai embed code to this file:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
In your main layout template, include this file before </body>:
{% include '_includes/chatbot' %}
Save both files

Tip: Using an include file makes it easy to enable/disable the chatbot across your entire site by commenting out a single line.

Alternative: Conditional Loading

To load the chatbot only on specific pages or sections:

In your layout or page template, use Twig conditionals:
{% if entry.showChatbot ?? true %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}
Or check for specific sections:
{% if craft.app.request.segments[0] != 'admin' %} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endif %}

Step 3: Verify Installation

After saving your changes, visit your Craft 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 the template file and that you're editing the correct layout template that your pages use. Clear your browser cache or view in an incognito window. If using template caching, clear the Craft CMS cache from the Control Panel under Utilities > Clear Caches.

Template Location: Craft CMS template locations may vary depending on your project setup. Common locations include templates/_layout.twig, templates/_layouts/main.twig, or templates/_base.twig. Check your existing templates to find where the </body> tag is defined.