How to Add Asyntai AI Chatbot to WooCommerce

Step-by-step guide for WooCommerce stores

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 a Plugin (Recommended)

The easiest way to add the chatbot to your WooCommerce store is using a free header/footer plugin:

Log in to your WordPress Admin Dashboard
Go to Plugins → Add New
Search for "Insert Headers and Footers" by WPCode (or similar plugin)
Click "Install Now" and then "Activate"
Go to Code Snippets → Header & Footer (or the plugin's settings page)
Paste your Asyntai embed code in the "Footer" section
Click "Save Changes"

Tip: Adding the code to the footer ensures it loads after your store's content, which is ideal for chat widgets and won't slow down your page loading or interfere with WooCommerce functionality.

Alternative: Using Theme Customizer

Many WooCommerce themes have built-in options for adding custom scripts:

Go to Appearance → Customize
Look for a section called "Additional CSS/JS", "Custom Code", or "Footer Scripts"
Paste your Asyntai embed code in the appropriate field
Click "Publish" to save your changes

Note: Not all themes have this option. If your theme doesn't include custom script fields, use the plugin method or edit your theme's functions.php file.

Alternative: Edit Theme Files (functions.php)

For developers or those comfortable editing theme files:

Go to Appearance → Theme File Editor
Select your active theme (or preferably your child theme)
Open the functions.php file
Add the following code at the end of the file:
function add_asyntai_chatbot() { echo '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>'; } add_action('wp_footer', 'add_asyntai_chatbot');
Replace YOUR_WIDGET_ID with your actual widget ID
Click "Update File"

Important: Always use a child theme when editing theme files. Changes to the parent theme will be lost when you update your theme. If you're not comfortable editing code, use the plugin method instead.

Alternative: WooCommerce-Specific Hook

To load the chatbot only on WooCommerce pages (shop, product, cart, checkout):

Add this code to your theme's functions.php file:
function add_asyntai_chatbot_woocommerce() { if (is_woocommerce() || is_cart() || is_checkout() || is_account_page()) { echo '<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>'; } } add_action('wp_footer', 'add_asyntai_chatbot_woocommerce');
Replace YOUR_WIDGET_ID with your actual widget ID
Save the file

Tip: This method is useful if you only want the AI chatbot to appear on your store pages to help customers with products and orders, rather than on your entire website.

Step 3: Verify Installation

After saving your changes, visit your WooCommerce 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? If you have a caching plugin installed (like WP Super Cache, W3 Total Cache, or WP Rocket), clear your cache first. Also try clearing your browser cache or viewing in an incognito window.