How to Add Asyntai AI Chatbot to OpenCart

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

The most straightforward way to add the chatbot is by editing your theme's footer template:

Access your OpenCart files via FTP or file manager
Navigate to your theme's footer template:
- OpenCart 3.x/4.x: catalog/view/theme/YOUR_THEME/template/common/footer.twig
- OpenCart 2.x: catalog/view/theme/YOUR_THEME/template/common/footer.tpl
Open the footer file for editing
Find the closing </body> tag
Paste your Asyntai embed code just before the </body> tag
Save the file
Clear OpenCart cache: Dashboard → Blue gear icon (top right) → Refresh or delete contents of system/storage/cache/

Tip: If you're using the default theme, the path would be catalog/view/theme/default/template/common/footer.twig. Always create a backup before editing template files.

Alternative: Using Theme's Custom Code Option

Many modern OpenCart themes include a built-in option for custom code:

Log in to your OpenCart Admin Panel
Go to Extensions → Themes (or Extensions → Extensions → Themes)
Click Edit on your active theme
Look for a "Custom Code", "Footer Scripts", or "Custom JavaScript" section
Paste your Asyntai embed code
Click "Save"
Clear the cache

Note: Not all themes have this option. If your theme doesn't include custom code fields, use the template editing method or install an extension.

Alternative: Using a Custom Code Extension

You can install a free extension from the OpenCart Marketplace to add custom scripts:

Go to the OpenCart Marketplace
Search for "Custom Script", "Header Footer Scripts", or "Custom Code"
Download and install a suitable extension
In your admin panel, go to Extensions → Extensions → Modules
Find and install the custom code module
Configure the module and paste your Asyntai embed code in the footer section
Save and clear the cache

Important: Using extensions is recommended over editing core files, as they survive OpenCart updates. Popular extensions include "Custom Script in Header & Footer" available on the marketplace.

Alternative: Using addScript Method (For Developers)

For developers, OpenCart 3.x/4.x provides a programmatic way to add scripts:

Open catalog/controller/common/footer.php
Add the following line before $data['scripts'] = $this->document->getScripts('footer');:
$this->document->addScript('https://asyntai.com/static/js/chat-widget.js', 'footer');
For the data attribute, you'll need to modify the footer.twig to include it manually, or add inline JavaScript after the scripts loop

Note: For the widget to work properly with the data attribute, the template method is simpler as the addScript method doesn't support custom attributes directly.

Step 3: Verify Installation

After saving your changes and clearing the cache, visit your store 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 to clear OpenCart's cache. Go to your admin panel, click the blue gear icon in the top right corner, and click the refresh buttons. Also try clearing your browser cache or viewing in an incognito window. If you modified the wrong template file, check that your theme is using the file you edited.