ShopifyにWhatsAppボタンを追加する方法

Shopifyで販売している場合、買い物客はチェックアウトに進む直前に、ちょっとした疑問を抱くことがあります。たとえば、ジャケットのサイズ感が標準どおりか、注文がいつ届くのか、売り切れのサイズが再入荷するのか、といったことです。質問をしてすぐに返答を得る手段がなければ、買い物客はそのままカートを放棄してしまうかもしれません。

閲覧中に画面の隅に表示されるフローティング型のWhatsAppボタンがあれば、買い物客は普段から毎日使っているアプリでワンタップで会話を始められることに気づきます。入力すべきフォームもなく、新しいアカウントを作成する必要もありません。つまり、疑問を解消できずに離脱していたはずの買い物客が、返答を得て購入につながるのです。

Shopifyには、ネイティブのWhatsAppボタンは用意されていません。組み込みのメッセージング機能であるShopify Inboxは、WhatsAppではなくShopify独自のチャットを通じて会話をやり取りします。また、連絡先ページにシンプルなwa.meリンクを貼り付けることはできますが、テキストリンクは買い物客が閲覧しても追従しませんし、チャットへの明確な招待のようにも見えません。

そこで、親しみやすいチャットインターフェースを通じて顧客の質問に即座に答えたいShopifyの販売者やドロップシッパーの方に向けて、このガイドでは、プレミアムなサードパーティ製アプリとしてShopifyにWhatsAppボタンを追加する方法や、コストを低く抑えながらサイト速度を高速に保つ、無料で軽量なサーバーレスウィジェットを使う方法を紹介します。

オプション1：専用のShopify App Store連携をインストールする

Shopifyにフローティング型のチャットボタンを追加する一般的な方法は、Shopify App Storeを利用することです。ここでは、何十ものWhatsAppチャットアプリが同じ役割を果たすべく競い合っています。1つをインストールし、番号を接続して、アプリ独自のダッシュボードからボタンを設定します。

App Store連携を使ってShopifyにWhatsAppボタンを追加するには、次の手順に従ってください。

1. アプリを探してインストールする：Shopify管理画面の左側のナビゲーションで「アプリ」をクリックすると、Shopify App Storeのポップアップが表示されます。追加したいチャットボタンアプリを検索します。「インストール」をクリックし、認証画面でアプリが要求するデータアクセスを確認して、承認します。

2. ボタンを設定する：アプリのダッシュボードでWhatsAppの番号を入力し、行動喚起のテキストを書き、ボタンの色と画面上の位置を設定します。ほとんどのアプリでは、デスクトップ、モバイル、またはその両方のどこに表示するかも選べます。

3. テーマで有効にする：「オンラインストア」に移動し、「テーマ」を選択して、公開中のテーマをエディタで開きます。左端のサイドバー上部にあるテーマ設定アイコンの隣にある「アプリ埋め込み」アイコンをクリックし、リストからアプリを検索して、オンに切り替え、保存します。

「無料プランあり」が何を意味するかは、これらのアプリによって大きく異なります。Chatyの無料プランは月間500人の訪問者が上限で、有料プランは月額15ドルで10,000人からとなっています。MyShopは「ブランド名の非表示」を有料機能として挙げており、これは無料版ではストアフロントにアプリのブランド表示が出ることを意味します。このパターンはこのカテゴリー全体で繰り返されており、実際のトラフィックに対応する必要が出たり、自分のストアの一部のように見せたくなったりするまでは、ボタンは無料というわけです。

また、各アプリはストアへの完全なインストールを伴い、独自のスクリプト、権限、そして管理用のダッシュボードを備えています。WhatsAppの会話を開くことだけが目的のボタンにしては、かなり大がかりな仕組みです。だからこそ、自分で埋め込めるShopify向けWhatsAppチャットの代替手段を探すことになるのです。

オプション2：無料でカスタマイズ可能なWhatsAppウィジェットを追加する（おすすめ）

アプリをインストールしたり、ボタンのために月額料金を払ったりしたくない場合は、Shopify向けのホスト型WhatsAppチャットウィジェットが、埋め込みコードで同じ役割を果たします。ビジュアルビルダーで設定し、コードをコピーして、テーマエディタのカスタムLiquidブロックに貼り付けるだけなので、ストアには何もインストールされず、別途管理するダッシュボードもありません。

JotformのWhatsAppウィジェットは、あなたの番号に接続し、チャットプレビュー付きのフローティングボタンを表示します。訪問者はWhatsAppに移動する前に、担当者名、ウェルカムメッセージ、CTAを目にします。また、デフォルトのメッセージをあらかじめ入力しておくことも、訪問者に短い質問を先に入力してもらうこともできるため、会話が始まる前にチームが状況を把握できます。

ウィジェットを使ってShopifyストアにWhatsAppボタンを追加するには、次の手順に従ってください。

1. ウィジェットを作成する：Jotformワークスペースのページで「作成」をクリックし、「Webサイトウィジェット」を選択して、「WhatsApp Chat」を検索し、「ウィジェットを使用」をクリックします。 

2. WhatsAppの連絡先を接続する：「General（一般）」タブで、完全な国際形式で電話番号を入力するか、wa.me、api.whatsapp.com、またはwa.linkのURLを追加します。訪問者に状況を伝えた状態でやり取りを始めてほしい場合は、デフォルトのメッセージを追加します。

3. カスタマイズして配置する：「General（一般）」タブで、担当者名、ウェルカムメッセージ、バブルラベルを入力します。次に「Layout（レイアウト）」タブに切り替えて、フローティングの位置、ボタンのサイズ、そしてボタンをデスクトップ、モバイル、またはその両方のどこに表示するかを設定します。

4. WhatsApp用のShopifyコードを公開して埋め込む：上部のナビゲーションバーで「Publish（公開）」をクリックし、Embed（埋め込み）セクションで「Copy Code（コードをコピー）」をクリックします。Platforms（プラットフォーム）メニューには、Shopify専用の埋め込みオプションもあります。

5. Shopifyに追加する：テーマエディタで「セクションを追加」をクリックし、「カスタムLiquid」を選択して、埋め込みコードを貼り付け、保存します。ヘッダーやフッターに追加すると、ボタンが1ページだけでなくすべてのページに表示されます。

このウィジェットはストアにインストールされるのではなくJotform内でスタイル設定されるため、あいさつ文やボタンの色を変更する際も、カラーピッカーを使えるようにするためにプランをアップグレードする必要はなく、ウィジェットを編集するだけで済みます。デスクトップとモバイルの両方で動作し、Jotformの無料のStarterプランは、Jotformのブランド表示を非表示にする機能も含めて、その両方をカバーしています。

スマートでサーバーレスなウィジェットでShopifyストアを強化する

Shopify向けの無料WhatsAppボタンは、別の月額アプリ料金に同意することなくストアフロントに追加できる、いくつかのウィジェットのうちの1つです。Jotformの無料のWebサイトウィジェットのディレクトリには、150を超えるオプションがあります。顧客の中に別のメッセージングアプリを好む人がいる場合は、同じように機能するTelegramやViberのチャットウィジェットもあります。これは、それらのアプリが標準となっている市場で販売している場合に重要です。ヘルプセンターウィジェットは、誰かがメッセージを送る必要が生じる前に繰り返される質問に答えてくれ、購入ボタンは、ランディングページから商品、カート、またはチェックアウトのURLへと買い物客を直接誘導します。

これらはどれもWhatsAppボタンと同じ方法で埋め込めるため、ストアにシンプルな機能を追加したいたびにアプリのサブスクリプションを増やす必要はありません。

Eコマースブランドとして、予算は顧客の獲得や商品の調達に充てるべきであり、チャットボタンを表示するための月額料金に使うべきではありません。WhatsAppウィジェットは、顧客がすでに使い方を知っているサーバー外のサポートチャネルを、まったく費用のかからないプランで提供します。