如何將 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 網站。 這些功能可幫助您更迅速地回复客戶問題。