How to Add Asyntai AI Chatbot to Concrete CMS

Step-by-step guide for Concrete CMS (formerly Concrete5) 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 Code to Theme Footer (Recommended)

The best way to add the chatbot to all pages of your Concrete CMS website is by editing your theme's footer file:

Access your Concrete CMS installation via FTP or File Manager
Navigate to /application/themes/your_theme_name/ directory
Locate and open the footer.php file (or equivalent footer template)
Find the line with the closing </body> tag
Paste your Asyntai embed code just before the </body> tag
Save the file and upload it back to your server if editing locally
Clear Concrete CMS cache: Dashboard → System & Settings → Clear Cache

Tip: Adding the code before the closing </body> tag ensures the chatbot loads after your page content, which provides better page load performance. This method automatically adds the chatbot to every page using this theme.

Alternative Method 1: HTML Block (Easiest for Non-Developers)

If you prefer not to edit theme files, you can use Concrete CMS's built-in HTML block:

Log in to your Concrete CMS Dashboard
Navigate to the page where you want to add the chatbot
Click Edit Page (pencil icon in the toolbar)
Click Add Block in the area where you want to place the code
Search for and select the HTML block
Paste your Asyntai embed code into the HTML editor
Click Add to save the block
Click Publish to make the changes live

Note: The HTML block method is great for adding the chatbot to specific pages. For site-wide installation, you'll need to add the HTML block to each page, or use the theme footer method described above. The visual placement of the block doesn't affect where the chatbot appears - it will still show in the bottom right corner.

Alternative Method 2: Theme Header File

You can also add the code to your theme's header file for site-wide installation:

Access your Concrete CMS files via FTP or File Manager
Navigate to /application/themes/your_theme_name/
Open the header.php file (or elements/header.php)
Find the closing </head> tag
Paste your Asyntai embed code just before the </head> tag
Save and upload the file
Clear the cache from the Dashboard

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

Tip: Make sure to include the required header elements using <?php View::element('header_required'); ?> in your header.php file for Concrete CMS to function properly.

Alternative Method 3: Custom Template (Advanced)

For developers who want more control, you can create a custom page template:

Create a new page template file in /application/themes/your_theme_name/
Or copy an existing template (e.g., default.php) and rename it
Add your Asyntai embed code to the template file before </body>
In the Concrete CMS Dashboard, go to Pages & Themes
Click on Page Types
Select the page type you want to use this template with
Assign your custom template to the page type
All pages using this page type will now include the chatbot

Important: Always backup your theme files before making changes. Test your modifications on a staging site first if possible. Incorrect edits to theme files can break your site's layout or functionality.

Step 3: Verify Installation

After making your changes and clearing the cache, open 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 ensure it opens and functions correctly.

Not seeing the widget? Make sure you've cleared Concrete CMS's cache (Dashboard → System & Settings → Clear Cache). Try viewing your site in an incognito window. Check that you've saved and uploaded all file changes. Open the browser console (F12) to check for any JavaScript errors.