在网站中嵌入JavaScript代码-阿里云帮助中心

通过在网站的 <head> 区域嵌入 JavaScript 代码，可以将阿里云网站AI套件的智能客服和线索管理功能集成到您的网站。本文介绍如何在 WordPress、Shopify、Wix、WooCommerce 和 Shopline 等主流建站系统中完成集成。

本文提供 5 种主流建站系统的集成方法，涵盖 WordPress、Shopify、Wix、WooCommerce 和 Shopline。所有集成方式的核心原理相同：在网站页面的 <head> 区域加载阿里云网站AI套件的 JavaScript 代码，代码加载后会自动初始化智能客服窗口和线索追踪功能。不同建站系统的集成难度和操作方式有所差异，您可以根据实际使用的平台选择对应的操作步骤。

前提条件

在嵌入代码前，需要完成以下准备：

已开通网站AI套件服务。
已获取专属 JavaScript 代码。获取路径：
1. 登录阿里云域名控制台，在左侧菜单点击网站AI套件。
2. 选择对应网站，并单击下方的网站管理。
3. 在页面中找到 JavaScript 代码区域，单击复制代码。代码形式为包含 <script> 标签的完整代码块，类似以下格式：
```
<script src="https://example.aliyuncs.com/wais-sdk.js?id=YOUR_ID"></script>
```
具有相应建站系统的管理员权限。

WordPress 集成

通过主题的 functions.php 文件添加代码钩子来集成，这是 WordPress Theme Handbook 推荐的标准方法。

在 WordPress 后台，点击外观 > 主题文件编辑器。
在右侧找到并点击主题的功能文件 functions.php。

在文件末尾添加以下代码：

function add_wais_js_to_head() {
    // 从 网站AI套件 控制台获取的完整 <script> 标签中提取 src 属性的 URL
    // 例如：如果获取的代码是 <script src="https://example.aliyuncs.com/wais-sdk.js?id=abc123"></script>
    // 则这里填写 https://example.aliyuncs.com/wais-sdk.js?id=abc123
    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');

将 https://example.aliyuncs.com/your-wais-script.js?id=YOUR_ID 替换为从网站AI套件控制台获取的 <script> 标签中 src 属性的实际 URL。

点击更新文件。

说明

wp_enqueue_script() 函数的最后一个参数 false 表示将脚本加载到 <head> 区域，而非页面底部的 <footer>。此方法符合 WordPress 官方开发规范，确保脚本在正确的时机加载。

Shopify 集成

在 Shopify 中需要编辑主题的 theme.liquid 文件，将代码插入到页面 <head> 区域。

登录 Shopify 后台，进入在线商店 > 主题。
找到当前主题，点击操作 > 编辑代码。
在左侧文件列表中，展开布局（Layout）文件夹，点击 theme.liquid 文件。
在代码中找到 </head> 标签。
在 </head> 标签之前插入从网站AI套件控制台获取的完整 JavaScript 代码（包含 <script> 标签）。
点击保存。

说明

保存后建议在预览模式下测试，确认代码正常运行后再发布。

Wix 集成

Wix 提供了可视化界面来添加自定义代码，无需直接编辑代码文件。

在 Wix 编辑器中，点击左侧菜单的设置 (Settings)图标。
选择自定义代码(Custom Code)，该选项位于开发与集成(Development & integrations) 部分。
点击+ 添加代码按钮。
将从网站AI套件控制台获取的完整 JavaScript 代码粘贴到弹出的文本框中。
在放置代码的位置（Place code in）选项中，选择 Head。
在应用到页面选项中，选择需要应用代码的页面范围。
- 如需在全站所有页面加载智能客服，选择所有页面；
- 如需仅在特定页面加载，选择对应页面。
点击应用保存。

WooCommerce 集成

WooCommerce 是基于 WordPress 的电商插件，基础集成方法与 WordPress 相同。如果只需在商城页面加载脚本，可以使用 WooCommerce 提供的条件判断函数。

通用方法

参考上述 WordPress 集成的步骤，通过向主题的 functions.php 文件中添加代码钩子来实现。

专用条件加载（可选）

如果希望仅在 WooCommerce 商城页面（商品页、购物车页、结账页等）加载脚本以提升性能，可以添加条件判断：

function add_wais_js_to_wc_head() {
    // 仅在 WooCommerce 相关页面加载 网站AI套件 脚本
    if (is_woocommerce() || is_cart() || is_checkout()) {
        // 将 URL 替换为从 网站AI套件 控制台获取的 <script> 标签中的 src 属性值
        wp_enqueue_script('wais-wc-js', 'https://example.aliyuncs.com/your-wais-script.js?id=YOUR_ID', array(), '1.0', false);
    }
}
// 将函数绑定到 WordPress 的 wp_enqueue_scripts 钩子
add_action('wp_enqueue_scripts', 'add_wais_js_to_wc_head');

代码说明：

is_woocommerce()：判断是否为 WooCommerce 商品页、分类页等商城页面。
is_cart()：判断是否为购物车页面。
is_checkout()：判断是否为结账页面。
add_action('wp_enqueue_scripts', 'add_wais_js_to_wc_head')：将自定义函数绑定到 WordPress 的脚本加载钩子，确保在页面加载时执行条件判断。

说明

条件加载可以避免在非电商页面（如文章、关于我们）加载网站AI套件脚本，提升整体性能。如需在所有页面加载，使用上述通用方法即可。

Shopline 集成

Shopline 需要通过安装“自定义代码”应用来实现头部代码插入。

登录 Shopline 商家后台。
进入应用 > 应用市场，搜索并安装自定义代码应用。
安装后进入应用，点击添加代码。
填写代码名称，粘贴从网站智能引擎控制台获取的完整 JavaScript 代码（包含 <script> 标签）。
在放置位置选项中，选择顶部（对应 <head>）。
选择应用范围（PC端、移动端或两者）和生效页面。
点击添加保存。

说明

选择“顶部”表示代码将插入到 <head> 区域，选择“底部”表示代码将插入到 </body> 之前。无效或有风险的代码将被自动移除。