あなたのWordPressウェブサイトにAppleビジネスチャットボタンを追加する方法

公開: 2021-03-01

Appleメッセージは、ウェブマスターがビジネスチャットボタンと電話/通話ボタンを自分のウェブサイトに追加できるようにする機能です。 ユーザーはウェブサイトの所有者に直接連絡して助けを求めることができるので、これは非常に便利で便利です。 したがって、Webサイトの所有者は、ユーザーエクスペリエンスを向上させるために、WordPressWebサイトにビジネスチャットボタンを必ず追加する必要があります。

目次を隠す
  1. 1.ステップ1：ビジネスチャットにサインアップする
  2. 2.ステップ2：Javascriptライブラリを追加します
    1. 2.1。 方法1：テーマファイルのコードを編集する
    2. 2.2。 方法2：スリムSE​​Oプラグインを使用する
  3. 3.ステップ3：ビジネスチャットボタンを目的の位置に表示する
  4. 4.最後の言葉

実装中は、HTMLコードを使用する必要があるため、技術に精通していない人にとっては比較的困難です。 ただし、このプロセスを段階的に説明するため、心配する必要はありません。

注：ビジネスチャットボタンは、Appleデバイスでのみ使用できます。 ユーザーがこれらのデバイスを使用しない場合、ボタンは非表示になります。

ステップ1：ビジネスチャットにサインアップする

まず、Apple Business Registerページに移動し、AppleIDを使用してBusinessChatにサインアップします。 とても簡単なので、詳しくは説明しません。

Apple Business Registerページに移動し、AppleIDを使用してBusinessChatにサインアップします。

今、あなたはすでにあなた自身のビジネスチャットIDを持っています。 次の手順で必要になるため、このIDをどこかに保存します。

ステップ2：Javascriptライブラリを追加する

次に、Javascriptライブラリを追加して、Webサイトにビジネスチャットボタンを表示する必要があります。 それを行うには2つの方法があります。

方法1：テーマファイルのコードを編集する

テーマファイルで<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>

方法2：スリムSE​​Oプラグインを使用する

テーマファイルのコードを編集する以外に、Slim SEOプラグインを使用すると、テーマファイルに移動して<head><head> </body>タグと</body>タグを探すことなくコードを追加できます。

Slim SEOは完全に無料なので、wordpress.orgで簡単に見つけることができます。 管理ダッシュボードで、[プラグイン] > [新規追加]に移動し、通常どおりプラグインをインストールしてアクティブ化します。

Slim SEO –高速で自動化されたWordPressSEOプラグイン Slim SEO –高速で自動化されたWordPressSEOプラグイン

著者：eLightUp

現在のバージョン： 3.11.1

最終更新日： 2021年11月16日

スリム-seo.3.11.1.zip

92％の評価10,000以上のインストールWP4.5 +が必要

その後、 [設定] > [スリムSE​​O ]に移動し、上記のコードを[ヘッダーコード]または[本文コード]セクションに追加します。

Slim SEOプラグインを使用して、Appleビジネスチャットボタンを表示するコードを追加します

また、[保存]をクリックすることを忘れないでください。

さらに、Slim SEOには、WordPressWebサイトを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 ：[ Call toAction ]ボタンのファミリーフォントを選択してください
  • data-apple-banner-icon-background-color ： data-apple-banner-icon-background-colorの背景色（円）を選択します
  • data-apple-banner-icon-color ：チャットボタンと通話ボタンの色を選択します
  • 等。

顧客とWebサイト所有者間の相互作用に関連する属性：

  • data-apple-business-group-id ：通話/メッセージを受信する部門を決定します。 たとえば、「カスタマーサービス」または「テクニカルサポート」部門のIDをこの属性に割り当てることができます。
  • Data-apple-business-phone ：ユーザーがチャットできない場合に連絡するために使用する電話番号を入力します。 この属性を追加しない場合、[呼び出し]ボタンは非表示になります。
  • 等。

さらに、ここでAppleのすべての属性とクラスを見つけることができます。

必要な<div>タグを<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 = "iPhoneXsのオファーを取得するために私たちのプロの1人とチャットしてください。"
	data-apple-banner-scale = "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ユーザーはフッターに次のようなビジネスチャットボタンの表示が表示されます。

WordPressウェブサイトのフッターにビジネスチャットボタンを表示します。

上記のコード、クラス、および属性を使用して、ボタンのスタイルを設定し、他の位置に表示することができます。 それを試して、コメントセクションで私たちを見せてください！

最後の言葉

コードを使用してビジネスチャットボタンをWordPressWebサイトに追加することは、WordPressの初心者にとっては非常に難しい場合があります。 ただし、このチュートリアルに厳密に従うと、間違いなく機能します。 サイトにビジネスチャットボタンを配置したら、顧客の電話やメッセージに返信することを忘れないでください。 それは顧客とウェブサイトの所有者の間の信頼を築くのを助け、それによってあなたのブランドを改善し、コンバージョンを増やします。

ビジネスチャットボタンを追加するだけでなく、ライブチャットボタンとFacebookカスタマーチャットボタンをWordPressWebサイトに追加することもできます。 これらの機能は、顧客の質問に迅速に回答するのに役立ちます。