Embed JavaScript code in your website-Domain Names(Domain)-阿里云帮助中心

By embedding a JavaScript code snippet in your website's <head> section, you can integrate the intelligent chatbot and lead management features of the Alibaba Cloud Website AI Kit. This document describes how to integrate the kit with popular website builders, including WordPress, Shopify, Wix, WooCommerce, and Shopline.

This document provides integration methods for five popular website builders: WordPress, Shopify, Wix, WooCommerce, and Shopline. The core principle is the same for all integration methods: load the JavaScript code for the Alibaba Cloud Website AI Kit in the <head> section of your website's pages. Once loaded, the code automatically initializes the intelligent chatbot window and lead tracking features. Integration difficulty and procedures vary by platform. Select the instructions for your platform.

Prerequisites

Before you begin, ensure that you meet the following requirements:

You have activated the Alibaba Cloud Website AI Kit service.
You have obtained your unique JavaScript code. To get the code:
1. Log on to the Alibaba Cloud DNS console. In the left-side navigation pane, click Alibaba Cloud Website AI Kit.
2. Select your website and click Website Management below.
3. On the page, find the JavaScript code section and click Copy Code. The code is a complete snippet that includes the <script> tag, like this:
```
<script src="https://example.aliyuncs.com/wais-sdk.js?id=YOUR_ID"></script>
```
You have administrator permissions for your website builder.

WordPress integration

Integrate by adding a code hook to your theme's functions.php file. This is the standard method, as recommended by the WordPress Theme Handbook.

In the WordPress admin panel, click Appearance > Theme File Editor.
On the right, find and click your theme's functions file, functions.php.

Add the following code to the end of the file:

function add_wais_js_to_head() {
    // Extract the URL from the src attribute of the full <script> tag obtained from the Alibaba Cloud Website AI Kit console.
    // For example, if your code is <script src="https://example.aliyuncs.com/wais-sdk.js?id=abc123"></script>,
    // then enter https://example.aliyuncs.com/wais-sdk.js?id=abc123 here.
    wp_enqueue_script('wais-js', 'https://example.aliyuncs.com/your-wais-script.js?id=YOUR_ID', array(), '1.0', false);
}
add_action('wp_enqueue_scripts', 'add_wais_js_to_head');

Replace https://example.aliyuncs.com/your-wais-script.js?id=YOUR_ID with the actual URL from the src attribute of the <script> tag from the Alibaba Cloud Website AI Kit console.

Click Update File.

Note

The last parameter of the wp_enqueue_script() function, false, loads the script in the <head> section, not in the page footer. This method follows official WordPress development standards and ensures the script loads at the correct time.

Shopify integration

In Shopify, edit your theme's theme.liquid file to insert the code into the page's <head> section.

Log on to your Shopify admin panel and go to Online Store > Themes.
Find your current theme and click Actions > Edit code.
In the file list on the left, expand the Layout folder and click the theme.liquid file.
In the code editor, find the closing </head> tag.
Paste the complete JavaScript code (including the <script> tag) from the Alibaba Cloud Website AI Kit console right before the </head> tag.
Click Save.

Note

After saving, we recommend testing in preview mode to confirm that the code works correctly before you publish.

Wix integration

Wix provides a visual interface to add custom code, so you do not have to edit code files directly.

In the Wix editor, click the Settings icon in the left-side menu.
Select Custom Code, located in the Development & integrations section.
Click the + Add Code button.
Paste the complete JavaScript code from the Alibaba Cloud Website AI Kit console into the text box.
For the Place code in option, select Head.
In the Apply to pages option, select the pages where the code should apply.
- To load the intelligent chatbot on all pages of your site, select All pages.
- To load it only on specific pages, select those pages.
Click Apply to save.

WooCommerce integration

WooCommerce is an e-commerce plugin for WordPress, so the basic integration method is the same as for WordPress. If you only need to load the script on store pages, you can use conditional functions provided by WooCommerce.

General method

Refer to the steps in the WordPress integration section to add a code hook to your theme's functions.php file.

Conditional loading (optional)

To load the script only on WooCommerce store pages (such as product pages, the cart page, or the checkout page) to improve performance, add a conditional check:

function add_wais_js_to_wc_head() {
    // Load the Alibaba Cloud Website AI Kit script only on WooCommerce-related pages.
    if (is_woocommerce() || is_cart() || is_checkout()) {
        // Replace the URL with the src attribute value from the <script> tag obtained from the Alibaba Cloud Website AI Kit console.
        wp_enqueue_script('wais-wc-js', 'https://example.aliyuncs.com/your-wais-script.js?id=YOUR_ID', array(), '1.0', false);
    }
}
// Bind the function to the WordPress wp_enqueue_scripts hook.
add_action('wp_enqueue_scripts', 'add_wais_js_to_wc_head');

Code explanation:

is_woocommerce(): Checks if the current page is a WooCommerce page, such as a product or category page.
is_cart(): Checks if the current page is the cart page.
is_checkout(): Checks if the current page is the checkout page.
add_action('wp_enqueue_scripts', 'add_wais_js_to_wc_head'): This action binds the custom function to the WordPress script loading hook, ensuring the conditional check runs when the page loads.

Note

Conditional loading prevents the Alibaba Cloud Website AI Kit script from loading on non-e-commerce pages, such as blog posts or "About Us" pages, which improves overall site performance. If you need to load the script on all pages, use the general method described above.

Shopline integration

Shopline requires you to install the "Custom Code" app to insert code into the <head> section.

Log on to the Shopline Merchant Center.
Go to Apps > app marketplace, then search for and install the Custom Code app.
After installation, open the app and click Add Code.
Enter a name for the code, then paste the complete JavaScript code (including the <script> tag) from the Alibaba Cloud Website AI Kit console.
In the Placement option, select Top (which corresponds to the <head> section).
Select the scope (PC, mobile, or both) and the pages where it should be active.
Click Add to save.

Note

Selecting "Top" inserts the code into the <head> section, while selecting "Bottom" inserts it before the closing </body> tag. Shopline automatically removes invalid or risky code.