如何将 Apple 商务聊天按钮添加到您的 WordPress 网站

已发表: 2021-03-01

Apple Message 是一项允许网站管理员在其网站上添加商务聊天按钮和电话/通话按钮的功能。 这是非常有用和方便的，因为用户可以直接联系网站所有者寻求帮助。 因此，作为网站所有者，您绝对应该将商务聊天按钮添加到您的 WordPress 网站以增加用户体验。

目录隐藏
  1. 1.第 1 步：注册商务聊天
  2. 2.第 2 步：添加 Javascript 库
    1. 2.1. 方法一：在主题文件中编辑代码
    2. 2.2. 方法二：使用 Slim SEO 插件
  3. 3.步骤 3：在所需位置显示商务聊天按钮
  4. 4.遗言

在实现的过程中，需要用到一些HTML代码，对于非技术人员来说难度比较大。 但请不要担心，因为我们将逐步引导您完成此过程。

注意：商务聊天按钮仅在 Apple 设备上可用。 如果用户不使用这些设备，该按钮将被隐藏。

第 1 步：注册商务聊天

首先，前往 Apple 企业注册页面并使用您的 Apple ID 注册商务聊天。 这很容易，所以我不会详细介绍。

前往 Apple Business Register 页面并使用您的 Apple ID 注册 Business Chat

现在，您已经拥有自己的商务聊天 ID。 将此 ID 保存在某处，因为您将在下一步中需要它。

第 2 步：添加 Javascript 库

接下来，您必须添加 Javascript 库以在网站上显示商务聊天按钮。 有两种方法可以做到：

方法一：在主题文件中编辑代码

在主题文件中找到<head></head>或</body>标签。 它们的位置将根据主题而有所不同。 例如，我使用 Justread 主题，所以<head><head>标签在header.php文件中，而</body>标签在footer.php文件中。

找到上面这些标签后，在</body>标签之前或<head><head>标签中添加以下代码：

 <script src="https://static.cdn-apple.com/businesschat/start-chat-button/2/index.js"></script>

方法二：使用 Slim SEO 插件

除了在主题文件中编辑代码之外，您可以使用 Slim SEO 插件来添加代码，而无需前往主题文件并查找<head><head>和</body>标签。

Slim SEO 是完全免费的，因此您可以轻松地在 wordpress.org 上找到它。 在Admin Dashboard 上，转到Plugins > Add New ，然后像往常一样安装和激活插件。

Slim SEO – 快速且自动化的 WordPress SEO 插件 Slim SEO – 快速且自动化的 WordPress SEO 插件

作者：eLightUp

当前版本： 3.11.1

最后更新： 2021 年 11 月 16 日

slim-seo.3.11.1.zip

92%评分10,000+安装WP 4.5+需要

之后，转到设置> Slim SEO并将上述代码添加到标题代码或正文代码部分。

使用Slim SEO插件添加显示苹果商务聊天按钮的代码

并且不要忘记单击Save 。

此外，Slim SEO 还有许多其他有用的功能，可帮助您自动优化 WordPress 网站以进行 SEO。 您可以在此处了解有关这些功能的更多信息。

第 3 步：在所需位置显示商务聊天按钮

在这最后一步中，您需要在所需的小部件区域中显示商务聊天按钮。 这可以通过向小部件添加一些 HTML 代码来完成。 HTML 代码必须具有以下结构：

 <div class="apple-class-name" apple-attribute-name ></div>

我用data-apple-business-id形式的属性做了一个例子。 您还记得步骤 1 中获取的 ID 吗？ 现在，是时候使用它了。 我的 ID 是ca0db090 ，我想在container-style横幅中添加聊天按钮，所以我的<div>标签是：

 <div class="apple-business-chat-banner-container" data-apple-business-></div>

请注意， data-apple-business-id属性是必需的。 它用于指定商务聊天 ID 的所有者并将您的消息发送给他们。

此外，还有许多其他类和属性可用于 HTML 代码。 您可以在下面的列表中找到最流行的类和属性：

显示聊天或通话按钮的类：

  • apple-business-chat-banner-container : 显示聊天和通话按钮
  • apple-business-chat-message-container : 只显示聊天按钮
  • apple-business-chat-phone-container : 只显示通话按钮
  • 等等

自定义聊天/通话按钮显示的属性（颜色、字体、大小……）

  • data-apple-banner-font-family ：为号召性用语按钮选择一个系列字体
  • data-apple-banner-icon-background-color : 选择data-apple-banner-icon-background-color的背景颜色（圆圈）
  • data-apple-banner-icon-color : 选择聊天和通话按钮的颜色
  • 等等。

与客户和网站所有者之间的交互相关的属性：

  • data-apple-business-group-id ：确定接收电话/消息的部门。 例如，您可以将“客户服务”或“技术支持”部门的 ID 分配给该属性。
  • Data-apple-business-phone ：输入用户无法聊天时用来联系您的电话号码。 如果您不添加此属性，呼叫按钮将被隐藏。
  • 等等。

此外，您可以在此处找到 Apple 的所有属性和类。

获得所需的<div>标签后，使用 HTML 编辑器将它们添加到所需位置。 例如，我想在 Justread 主题页脚的小部件中显示商务聊天按钮，这是实现此目的的方法。

在管理仪表板上，转到外观>小部件，选择自定义 HTML小部件，然后选择在页脚上显示小部件。

在 WordPress 网站的页脚上显示小部件

接下来，将以下代码插入小部件：

 <div>
	class="apple-business-chat-banner-container"
	数据-苹果-业务-
	data-apple-business-phone="0987725475"
	” data-apple-banner-cta="有问题？我们可以提供帮助。
	data-apple-banner-context="与我们的一位专业人士聊天，以获得您对 iPhone Xs 的报价。"
	数据苹果横幅规模=“1”
	data-apple-banner-background-color="rgb(27, 63, 104)"
	data-apple-banner-text-color="rgb(255, 255, 255)"
	data-apple-banner-icon-background-color="rgb(255, 255, 255)"
	data-apple-banner-icon-color="rgba(0, 210, 143, 0.3)"></div>

使用代码插入商务聊天按钮

最后，点击保存。

我们已经在 WordPress 网站的页脚上显示了商务聊天按钮。 从现在开始，Apple 用户将在页脚上看到 Business Chat 按钮，如下所示：

在 WordPress 网站的页脚上显示商务聊天按钮。

您可以使用上面的代码、类和属性，以相同的方式设置按钮样式并显示在其他位置。 试试吧，并在评论部分向我们展示！

最后的话

使用代码将商务聊天按钮添加到 WordPress 网站对于 WordPress 初学者来说可能非常困难。 但是，如果您严格按照本教程进行操作，它肯定会奏效。 在您的网站上有商务聊天按钮后，不要忘记回复客户的电话和消息。 它将有助于在客户和网站所有者之间建立信任，从而提升您的品牌并提高转化率。

除了添加商务聊天按钮，您还可以将实时聊天按钮和 Facebook 客户聊天按钮添加到您的 WordPress 网站。 这些功能可帮助您更迅速地回复客户问题。