How to Add Asyntai AI Chatbot to Statamic

Step-by-step guide for Statamic 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: Choose Installation Method

Statamic supports both Antlers and Blade templating. Choose the method based on which templating engine you're using:

Method 1: Antlers Layout (Recommended)

The easiest way to add the chatbot is to include it in your main layout file. Statamic uses Antlers as its default templating engine.

Navigate to your Statamic project's resources/views directory
Open your layout file (usually layout.antlers.html)
Find the closing </body> tag
Paste your Asyntai embed code just before the </body> tag
Save the file

<!DOCTYPE html>
<html lang="{{ site:short_locale }}">
<head>
  <meta charset="utf-8">
  <title>{{ title }} | {{ site:name }}</title>
  {{ vite src="resources/js/site.js|resources/css/site.css" }}
</head>
<body>
  {{ template_content }}

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

Tip: The {{ template_content }} variable is where Statamic injects your page content. Always add the chatbot script after this, just before </body>.

Method 2: Blade Layout

If you're using Blade templates instead of Antlers, follow these steps:

Navigate to your Statamic project's resources/views directory
Open your Blade layout file (e.g., layout.blade.php)
Find the closing </body> tag
Paste your Asyntai embed code just before the </body> tag
Save the file

<!DOCTYPE html>
<html lang="{{ $site->shortLocale() }}">
<head>
  <meta charset="utf-8">
  <title>{{ $title }} | {{ $site->name() }}</title>
  @vite(['resources/js/site.js', 'resources/css/site.css'])
</head>
<body>
  {!! $template_content !!}

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

Note: In Blade templates, use {!! $template_content !!} to render the page content. The !! syntax prevents HTML escaping.

Method 3: Using a Partial

For better organization, you can create a reusable partial for the chatbot:

Step 1: Create the Partial

Create a new file at resources/views/partials/_chatbot.antlers.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>

Step 2: Include in Your Layout

Open your layout file (layout.antlers.html)
Add the partial tag before </body>:
{{ partial:chatbot }} </body>

Why use a partial? Partials make it easy to manage external scripts in one place. If you ever need to update the chatbot code, you only need to edit one file.

Using Multiple Layouts

If your Statamic site uses multiple layouts (e.g., different layouts for blog posts, landing pages, etc.), make sure to add the chatbot script to each layout file where you want the widget to appear.

You can set which layout a page uses in several ways:

In the entry: Add layout: your_layout to the front matter
In the collection: Set a default layout in your collection's configuration YAML file
In a blueprint: Add a layout field that editors can choose from

For Statamic Starter Kits

If you're using a Statamic Starter Kit, the layout location may vary. Common locations include:

Default Statamic

resources/views/layout.antlers.html

Peak Starter

resources/views/layout.antlers.html with partials in resources/views/snippets/

Cool Writings

resources/views/layout.antlers.html

Starter's Creek

resources/views/layout.blade.php

Step 3: Clear Cache and Verify

After adding the code, clear your Statamic cache to ensure the changes take effect:

php artisan cache:clear
php please stache:refresh

Then 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've cleared both Laravel's cache and Statamic's Stache. If you're using static caching, run php please static:clear as well. Check your browser's console (F12) for any JavaScript errors.

Important: If you're using Statamic's static site generator (ssg), make sure to regenerate your static files after adding the chatbot script by running php please ssg:generate.

Documentation