How to Add Asyntai AI Chatbot to Adobe Commerce (Magento)

Step-by-step guide for Magento 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: Using Page Builder (Recommended)

The easiest way to add the chatbot is using Page Builder's HTML Code block:

Log in to your Magento Admin Panel
Go to Content → Pages
Edit your Home page (or any page where you want the chatbot)
In the Page Builder, drag an "HTML Code" element onto the page
Paste your Asyntai embed code
Click "Save"
Flush the cache: System → Cache Management → Flush Magento Cache

Important: Using Page Builder adds the code to individual pages only. For site-wide installation, use the Layout XML method below.

Alternative: Using Layout XML (All Pages)

To add the chatbot to all pages, create a layout file in your theme:

Navigate to your theme folder: app/design/frontend/[Vendor]/[theme]/
Create the folder structure if it doesn't exist: Magento_Theme/layout/
Create or edit the file default_head_blocks.xml
Add the following code:
<?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <script src="https://asyntai.com/static/js/chat-widget.js" src_type="url" async="true" data-asyntai-id="YOUR_WIDGET_ID"/> </head> </page>
Replace YOUR_WIDGET_ID with your actual widget ID
Run: bin/magento cache:flush
Run: bin/magento setup:static-content:deploy -f (if in production mode)

Alternative: Using CMS Block

You can also create a CMS block and include it in your footer:

Go to Content → Blocks
Click "Add New Block"
Set a title like "Asyntai Chatbot"
Set the Identifier to asyntai_chatbot
In the content editor, switch to HTML mode and paste your embed code
Click "Save Block"
Add the block to your footer template using: {{block id="asyntai_chatbot"}}
Flush the cache

Step 3: Verify Installation

After saving your changes and flushing 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.