---
description: 学习如何在您的 WordPress 网站上安装网页聊天小部件。
title: 在 WordPress 上安装网站聊天小部件
image: https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F3f43c48b21b24f4e8b02b100c0c8fab0
---

[新的🔥 抢先尝试 WhatsApp Business Calling API（开放测试版）！![arrow-icon](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2Fe43213a7a9314673bd8d2060c25f9b87)](/zh/whatsapp-business-calling-api)

帮助我... ⌘ 

1. [All Collections >](/zh/help)
2. [ 频道 >](/zh/help/channels)
3. [ 网站聊天小部件 >](/zh/help/website-chat-widget)
4. 在 WordPress 上安装网站聊天小部件

# 在 WordPress 上安装网站聊天小部件

![Avatar](https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg)

JQ Lee

· 28 Aug 2025

4 分钟

向您的 WordPress 网站添加网络聊天小部件是一个快速而简单的过程。 它不需要任何编码技能或技术知识。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png?fm=jpg&q=80&w=500) 

## 安装设置

为了在 WordPress 上安装网络聊天小部件，您需要以下内容：

* 访问您的网站的 WordPress 仪表板。
* 您的网络聊天小部件的代码片段。

如果您还没有代码片段，您将在创建 Respond.io [网站聊天小部件](https://respond.io/zh/help/website-chat-widget/website-chat-widget-overview) 或使用 [Facebook 聊天插件](https://respond.io/zh/help/facebook-messenger/facebook-chat-plugin) 时自动生成一个代码片段。

> 如果您已在 respond.io 平台上连接频道，并且需要检索生成的代码片段，请按照此处 [的说明进行操作](https://respond.io/zh/help/website-chat-widget/website-chat-widget-overview#finding%5Fthe%5Fwebsite%5Fchat%5Fwidget%5Fcode%5Fafter%5Fconnecting%5Fthe%5Fchannel)。

为了成功安装，请确保填写了您的网站域名。 有两种方法可以解决这个问题。

转到 respond.io **设置** \> 选择 **频道** \> 选择您的网站聊天频道 > 单击配置 > 添加网站域。 

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/1e7uaH6kDm1O7pGveCSLtj/cd6e069ed2d3ba023349b508560e3fab/screen-shot-2023-02-14-at-7-47-59-pm.png?fm=jpg&q=80&w=640) 

转到 respond.io 设置 > 选择 **Growth Widgets** \> 单击您想要添加到您的网站的小部件 > 在 **General** 切换中，将您的网站域名添加到 **Website Domains** 字段。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3p3pQU8wHpzk061bqvS0Tr/65706ba2cdd4a08d5972ca1c7f0fe11f/chat-widget-settings.png?fm=jpg&q=80&w=640) 

## 在 WordPress 上安装

**步骤 1：登录 WordPress**

导航到您网站的 WordPress 管理仪表板并登录。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7BEtXv2z3DbKUr6hji7TOm/aeb0a76500168de0c4db1758459f36d4/install-webchat-on-word-press.png?fm=jpg&q=80&w=640) 

**第 2 步：导航至插件页面**

在左侧导航面板中，单击 **插件**。 在插件页面上，按下页面顶部的蓝色 **添加新** 按钮。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/4yyIZmSrxmxdrhKGl8VcOl/b9881e62aab33064babb824daffbfe66/install-webchat-on-word-press-2.png?fm=jpg&q=80&w=640) 

**步骤3：添加新插件**

使用搜索栏，搜索 **WPCode** 插件。 您将在搜索结果页面上看到许多可用的选项，但在本教程中，我们将使用 WPCode 的 "插入页眉和页脚" 插件。 按下 **立即安装** 按钮并确保激活插件以使用它。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/5GGHqfES2lXgv5NzIoFz1P/15f02cef289ef90f490c4aecd1601ce7/add_new_plugin.png?fm=jpg&q=80&w=640) 

**步骤 4：打开页眉和页脚控制台**

从左侧导航菜单中，单击代码片段，然后从子菜单中选择 **页眉 & 页脚** 。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/2DwpPlV3Td8AqC1JJByNz0/7806704ac1df123f86c8a1ecbe5a5afb/Screenshot_2025-04-09_at_5.34.35_PM.png?fm=jpg&q=80&w=640) 

**步骤5：添加实时聊天脚本**

从 Respond.io 复制您的插件脚本并将其粘贴到页眉和页脚控制台页面的 **页脚脚本** 部分。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/Ian351FEXVFMTGKlYGxmH/861c265623900ca5302d72ea4a4606ed/wpcode-live_chat_script.png?fm=jpg&q=80&w=640) 

粘贴脚本后，单击页面底部的蓝色 "**保存**" 按钮。

**完毕！**

打开网站并查看聊天插件。 您会在右下角找到它。 现在您的网站访问者可以轻松地与您聊天。 如果您使用了从 respond.io 平台生成的代码片段，您将能够从平台管理对话并更新小部件的外观。

> 聊天小部件现已在您的网站上激活！

## 识别登录用户

> 本节仅适用于您的网站具有用户登录功能的情况。

**步骤 1：登录 WordPress 帐户**

导航到您的网站'的 WordPress 管理仪表板并登录。

**步骤2：打开主题头文件**

从左侧导航菜单中，单击 **外观** 并选择 **主题文件编辑器**。 继续选择 **主题标题** 文件。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/64VlcD24OVD9CUaFiK9U5B/91eb153aabead2673c1674395a0605a1/identify-logged-in-users.png?fm=jpg&q=80&w=640) 

**步骤3：添加检索到的用户ID和名称代码**

复制下面的示例代码并将其粘贴到主题头文件中。 粘贴代码后，单击页面底部的 **更新文件** 按钮。

> 下面的示例代码是从 WordPress 获取用户 ID、名字和姓氏。 如果您想获得其他联系字段，请随意修改。

```html
<?php 
	$user_info = get_userdata(get_current_user_id());
?>

<script type="text/javascript">
	窗口。$wp_ID = "<?php echo $user_info->ID; ?>";
	窗口。$wp_firstname = "<?php echo $user_info->first_name; ?>";
	窗口。$wp_lastname = "<?php echo $user_info->last_name; ?>";
</script>
```

\`

**步骤 4：打开页眉和页脚控制台**

从左侧导航菜单中，单击 **设置** ，然后从设置子菜单中选择 **页眉 & 页脚** 插件。

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7gZgsdh0AM40EiyW1iCfQR/a5102c94de84f92388de60fe9b6f3602/wpcode-open_console.png?fm=jpg&q=80&w=640) 

**步骤5：添加识别登录用户脚本**

复制下面的示例代码并将其粘贴到页眉和页脚控制台页面的 **脚本在页脚** 部分。 请注意， **识别登录用户脚本** 必须放在 **实时聊天脚本**上方。

> 下面的示例代码使用用户 ID 作为标识符，并与名字和姓氏一起传递。 如果您想获得其他联系字段，请随意修改。

```html
<script>  
      window.\_\_respond\_settings = {  
    	identifier: $wp\_ID,  
        firstName: $wp\_firstname,  
        lastName: $wp\_lastname,    
      };  
</script>
```

粘贴脚本后，单击页面底部的蓝色 "**保存**" 按钮。

**完毕！**

打开网站并查看聊天插件。 可以识别您 WordPress 的登录用户。 一旦传递的标识符与现有联系人匹配，当前对话就会恢复。

## 常见问题和疑难解答

### 

WPCode

如果您正在使用 WordPress 缓存插件（例如 WPCode），请按照以下步骤操作，以便小部件正确显示。

**禁用 JavaScript 的数据最小化功能**

转到 **Wordpress 设置** \> 选择 **WPCode** \> 在 WPCode 页面上，选择 **文件优化** 选项卡 > 取消勾选 **最小化 JavaScript 文件**

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/7u1DdW6UTB1nHdrE0QlgIB/f3412a5f90adf94cab31a67c4a42d108/css-and-js-files-minified-source-wp-rocket.png?fm=jpg&q=80&w=640) 

**将我们的小部件域添加到 Javascript 排除文件中**

`https://cdn.respond.io/webchat/widget/(.*).js`

![](https://assets2-proxy.respond.io/ph8r57dk1q9w/3TcEXrKx1zKh7IhvT4G7Cp/6308494d1b35b918e250d3ebc387b87e/wp-rocket-javascript-excluded-files.png?fm=jpg&q=80&w=640) 

> 保存后，建议清除 WordPress 中的缓存。

分享这篇文章

[![Telegram](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F44daca77a4844f0c8fd29040ddeba057?width=22)](https://api.whatsapp.com/send?text=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Facebook](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/fff57eeb01160bc604392f519b4f3461ca16f0fa1b6a587b20b142cdf1ad0ba7?placeholderIfAbsent=true&width=22)](https://www.facebook.com/sharer/sharer.php?u=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Linkedin](https://assets1-proxy.respond.io/api/v1/image/assets/11f7a662b80a4675973850b067c01fa5/7aaf8d87b5410844d83e06a4ed663e4f551b8c5ef51dbb20a8ff064a1eed9a0f?placeholderIfAbsent=true&width=22)](https://www.linkedin.com/sharing/share-offsite/?url=https://respond.io/help/website-chat-widget/install-on-wordpress)[![Twitter](https://assets1-proxy.respond.io/api/v1/image/assets%2F11f7a662b80a4675973850b067c01fa5%2F4e03e02422a94e8eab9b8b41457c2371?width=22)](http://twitter.com/share?url=https://respond.io/help/website-chat-widget/install-on-wordpress)

## 

相关文章 :woman\_technologist：

* [在Squarespace 上安装网站聊天小部件学习如何在您的 Squarespace 网站上安装Web 聊天小部件。 ](/zh/help/website-chat-widget/install-on-squarespace)
* [在 Joomla 上安装网站聊天部件学习如何在您的 Joomla 网站上安装 web 聊天小部件。 ](/zh/help/website-chat-widget/install-on-joomla)
* [在 Wix 上安装网站聊天小工具学习如何在您的Wix网站上安装网络聊天小部件。 ](/zh/help/website-chat-widget/install-on-wix)
* [在商店安装网站聊天小部件学习如何在您的店铺上安装 web 聊天小部件。 ](/zh/help/website-chat-widget/install-on-shopify)
* [网站聊天小工具快速入门将 respond.io 网站聊天小部件添加到您的网站。 ](/zh/help/website-chat-widget/website-chat-widget)

找不到您正在寻找的东西？ 🔎

[联系客服支持](/zh/contact-us)

2025-12-05T04:06:46.087Z

help

```json
[{"@context":"https://schema.org","@type":"TechArticle","articleBody":"学习如何在您的 WordPress 网站上安装网页聊天小部件。","author":{"@type":"Person","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/7tin8k9c1emscQGOhIuNbC/0ed3f91c8580c4e5dfa90f035355122e/Petrina_Jo_avatar.svg","name":"JQ Lee","url":"https://respond.io/zh/author"},"dateCreated":"2023-03-01T07:06:53.000Z","dateModified":"2025-08-28T08:51:51.275Z","datePublished":"2023-03-01T07:06:53.000Z","headline":"在 WordPress 上安装网站聊天小部件","image":"https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png","mainEntityOfPage":"https://respond.io/zh/help/website-chat-widget","publisher":{"@type":"Organization","logo":"https://respond.io/favicon/favicon.svg","name":"respondio"},"thumbnailUrl":"https://assets2-proxy.respond.io/ph8r57dk1q9w/3je9y7R0f3NgEmslRx5Q6F/b2012551e43f584e0307aecd2fa23d0d/word-press-logo.png","url":"https://respond.io/zh/help/website-chat-widget/install-on-wordpress"},{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Help","item":"https://respond.io/zh/help","position":1},{"@type":"ListItem","name":"频道","item":"https://respond.io/zh/help/channels","position":2},{"@type":"ListItem","name":"网站聊天小部件","item":"https://respond.io/zh/help/website-chat-widget","position":3},{"@type":"ListItem","name":"在 WordPress 上安装网站聊天小部件","item":"https://respond.io/zh/help/website-chat-widget/install-on-wordpress","position":4}]}]
{
  "@context": "http://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "WPCode",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "<p>If you are using a WordPress cache plugin such as WPCode, take these steps so that the widget appears correctly.</p><p><b>Disable data-minify feature for JavaScript</b></p><p>Go to <b>Wordpress Settings</b> > Select <b>WPCode</b> > On WPCode page, select <b>File Optimization</b> tab > untick <b>Minify JavaScript files</b></p> <p><b>Add our widget domain to the Javascript Excluded Files</b></p><p><code>https://cdn.respond.io/webchat/widget/(.*).js</code></p> <blockquote><p>Once saved, it is recommended to clear the cache in WordPress.</p></blockquote><p></p>"
      }
    }
  ]
}
```
