Shopifyチャットウィジェットを開くクリック可能なリンクを作成する方法：ステップバイステップガイド

Shopify Inboxのデフォルトのチャットバブルは悪くありませんが、ストアのために一生懸命作り上げたデザインに必ずしも馴染むとは限りません。ただ画面に浮かんでいるだけで、時には重要な情報を隠してしまったり、ブランドイメージと衝突したりします。もっとすっきりしたデザインにしたい、あるいは「チャットで問い合わせる」リンクを、買い物客が質問を持ちやすいであろうお問い合わせページやフッター、商品ページに直接設置したい、と思うかもしれません。

この解決策をGoogleで検索したことがあるなら、古いフォーラムの投稿で紹介されている、もはや機能しない古いテクニックをたくさん見つけたことでしょう。URLの末尾に「/?chat」を追加するような方法は時代遅れで、今では信頼できません。

このガイドは、そのためのものです。最新のJavaScriptを少しだけ使って、サイトのどこからでもクリック可能なリンクを作成し、Shopifyのチャットウィジェットを開くための簡単なステップバイステップのプロセスを解説します。これはストアのデザインを再びあなたの管理下に置くための、最も確実な方法です。

始める前に必要なもの

早速始める前に、必要なものがすべて揃っているか確認しましょう。心配はいりません、リストは短いものです。

• Shopify Inboxアプリがインストールされ、実行されているShopifyストア。

• テーマのコードにアクセスするためのShopifyアカウントの管理者権限。

• 約10〜15分の時間。

なぜ古い方法は機能しないのか

Shopifyは常にプラットフォームを更新しています。これは素晴らしいことですが、非公式なトリックや回避策が突然機能しなくなることも意味します。「?show_chat」のような古いURLパラメータは、しばらくの間は機能した賢いハックでしたが、その後ShopifyはInboxのようなアプリがストアフロントで読み込まれる方法を変更しました。今日それらを試しても、リンクが壊れて顧客を混乱させるだけです。

技術的な理由としては、現在チャットウィジェットはシャドウDOMやiframeと呼ばれるものの中で読み込まれることが多いためです。これは、ウェブページ上の他のすべてから分離された、安全な小さな箱のようなものだと考えてください。この仕組みにより、単純なURLがその箱の中に手を伸ばしてウィジェットに開くよう指示することが難しくなっています。

だからこそ、最新のJavaScriptアプローチが必要なのです。これからご紹介する方法ははるかに安定しています。URLのトリックを試す代わりに、ページ上の実際のチャットボタンを、それがどこに隠れていても見つけ出し、クリックをシミュレートします。まるで実際の人がチャットを開くのとまったく同じように機能するため、長期的に見てはるかに信頼性の高い解決策となります。

クリック可能なShopifyチャットリンクを4つのステップで作成する方法

全体のプロセスは2つのことに集約されます。ページにリンクを追加し、それを機能させるための小さなスクリプトをテーマにドロップすることです。開発経験は不要です。すべてのクリックを私がご案内します。

ステップ1：テーマをバックアップする

さて、コードに触れる前に、賢明なことをしましょう。テーマのバックアップです。これがあなたのセーフティネットになります。もし何か問題が起きても、ワンクリックでバックアップを復元し、何もなかったことにできます。

• Shopifyの管理画面から、オンラインストア > テーマ に進みます。

• 現在のテーマ（「公開中」と表示されているもの）を見つけます。カスタマイズボタンの横にある3つのドットのアイコン (...) をクリックします。

• メニューから複製するを選択します。

Shopifyが正確なコピーを作成します。これで、必要な場合に備えて安全なバージョンがあることを知りながら、安心して元のテーマを編集できます。

Shopify管理画面。テーマのバックアップを行うためのテーマセクションがあります。

ステップ2：カスタムリンクまたはボタンを追加する

次に、新しいチャットリンクをどこに設置するかを決めます。お問い合わせページ、商品説明内、サイトのフッターなど、HTMLを受け入れる場所ならほとんどどこにでも置くことができます。

場所を決めたら、この簡単なHTMLの一行を追加してください。

チームにチャットで相談  

「チームにチャットで相談」の部分は、あなたにとって意味のある言葉に自由に変更してください。本当に重要なのはhref="#open-chat"の部分です。これは、私たちのスクリプトがチャットを開くタイミングを知るために探すユニークなフックです。実際には別のページにリンクするのではなく、私たちのコードのための識別子にすぎません。

ステップ3：JavaScriptコードをテーマに追加する

さて、ここがこの解決策の核心です。誰かがあなたの新しいリンクをクリックするのを待つ小さなスクリプトをテーマに追加する必要があります。これに最適な場所は theme.liquid ファイルです。これにより、コードがサイトのすべてのページでアクティブになります。

1. Shopifyの管理画面で、オンラインストア > テーマ に戻ります。

2. 公開中のテーマの3つのドットのアイコン (...) をクリックし、コードを編集を選択します。

3. 左側のファイルメニューで、「Layout」フォルダを開き、「theme.liquid」をクリックします。

4. ファイルの सबसे下までスクロールします。閉じタグ `` の直前に、このコードスニペットを貼り付けます。

  

document.addEventListener('DOMContentLoaded', function() {  

  const customChatLinks = document.querySelectorAll('a[href="#open-chat"]');  

  if (customChatLinks.length > 0) {  

    const openShopifyChat = function(event) {  

      event.preventDefault();  

      const chatButton = document.querySelector('#ShopifyChat button[aria-controls="chat-ui"], #dummy-chat-button-iframe');  

      if (chatButton) {  

        chatButton.click();  

      } else {  

        // Fallback for when the button is inside an iframe  

        const iframe = document.querySelector('#dummy-chat-button-iframe');  

        if (iframe && iframe.contentWindow) {  

          const buttonInFrame = iframe.contentWindow.document.querySelector('button');  

          if (buttonInFrame) {  

            buttonInFrame.click();  

          } else {  

            console.warn('Shopify Chat button not found inside iframe.');  

          }  

        } else {  

          console.warn('Shopify Chat button not found.');  

        }  

      }  

    };  

    customChatLinks.forEach(link => {  

      link.addEventListener('click', openShopifyChat);  

    });  

  }  

});  

  

では、このコードは実際に何をしているのでしょうか？ページの読み込みが完了するのを待ち、href="#open-chat"を持つリンクを監視します。誰かがそれをクリックすると、スクリプトはページのジャンプを停止させ、代わりに公式のShopify Chatボタンを見つけて、あなたのために「クリック」します。それだけです。

ステップ4：新しいリンクをテストする

コードエディタの右上にある「保存」ボタンを押してください。次に、カスタムリンクを追加したページに移動して試してみてください。Shopify Inboxのチャットウィジェットが、フローティングアイコンをクリックしたかのようにポップアップするはずです。

何度かテストしてみてください。ウィジェットを閉じてから再度リンクをクリックし、スムーズに動作することを確認しましょう。

一般的な問題とトラブルシューティング

このスクリプトはかなり堅牢ですが、カスタムコードを扱う際には時々癖が出ることがあります。心に留めておくべきいくつかの点をご紹介します。

• リンクが機能しない場合は？ リンクが機能しない場合、最も可能性の高い原因は、Shopifyがチャットウィジェットのコードを更新し、ボタンのIDが変更されたことです。私たちのスクリプト内のセレクタ（"#ShopifyChat button..."）は一般的なバリエーションに対応するように作られていますが、プラットフォームの大きな変更によって壊れる可能性があります。これがカスタムコードの主な欠点です。将来的に少し調整が必要になるかもしれません。

• アクセシビリティが重要です： リンクには常に明確で説明的なテキストを使用してください。「こちらをクリック」のような曖昧な表現よりも、「サポートチームとチャットする」の方が、スクリーンリーダーを使用しているユーザーにとってずっと役立ちます。

• パフォーマンス： 心配はいりません。このスクリプトは非常に軽量で、サイトの速度に目立った影響を与えることはありません。ただし、カスタムコードは自己管理が必要なものの一つであるということを覚えておくと良いでしょう。

リンクの先へ：次に何が起こるか？

リンクの問題を解決できたことは素晴らしい達成感です。サイトのデザインをすっきりとさせ、顧客が連絡を取りやすくしました。しかし...次に何が起こるでしょうか？彼らがそのリンクをクリックした後、本当の仕事が始まります。

これは、単純なコードスニペットでは解決できない部分です。誰がそのチャットに答えるのでしょうか？夜遅くにメッセージが届いた場合の計画は？「注文はどこですか？」のような同じ質問に、エージェントが燃え尽きることなくどう対応し続けるのか？カスタムリンクは素晴らしい第一歩ですが、その先に迅速で役立つ応答がなければ、体験はすぐに色あせてしまいます。

これは通常、手動サポートが限界に達し、より良い方法を考え始める時点です。

eesel AIのようなAIプラットフォームは、手動サポートが及ばない部分を補うために設計されています。eesel AIチャットボットは、会話を始めるだけでなく、多くの場合、即座に解決します。

eesel AIチャットボットがShopify連携を通じて自動サポートを提供し、注文の配送状況を確認している様子。

カスタムリンクだけでは解決できない課題に、それがどのように取り組むかをご紹介します。

• 数分でセットアップ完了（本当です）： テーマのコードをいじる代わりに、eesel AIは数クリックでShopifyと連携します。セットアップは完全にセルフサービスなので、コーヒーを一杯淹れるよりも短い時間でAIエージェントを稼働させることができます。

• すべての知識を与える： ヘルプセンターの記事から過去のサポートチケット、さらにはShopifyの商品カタログ全体まで、あらゆる情報でAIをトレーニングできます。これにより、詳細な商品に関する質問に答えたり、返品を処理したり、ポリシーを独自に説明したりすることができます。

• 仕事を任せる： eesel AIは、Shopifyから直接最新の注文情報を検索するためのカスタムアクションを設定できます。顧客が「注文はどこですか？」と尋ねると、人間が指一本動かすことなく、いつでも即座にリアルタイムの回答を得られます。

• 公開前にテストする： AIが実際に顧客とどのようにやり取りするか気になりますか？eesel AIのシミュレーションモードでは、公開前に過去の何千もの顧客との会話でセットアップをテストできます。初日からどれだけ効果的かの明確な予測が得られます。

カスタマーチャットを管理する

これで、Shopifyのチャットウィジェットを開くためのクリック可能なリンクを作成する、堅実で現代的な方法を手に入れました。これにより、ストアのルックアンドフィールをより細かく制御できるようになります。よりクリーンでユーザーフレンドリーなサイトにするための素晴らしい調整です。

しかし、ストアが成長するにつれて、チャットボタンを修正することは始まりに過ぎないことに気づくでしょう。本当の勝利は、チャット体験全体を改善することにあります。カスタムコードは手入れが必要で、最も献身的なサポートチームでさえ、常にどこにでもいることはできません。

ビジネスと共にスケールできる、即時性、正確性、そしてブランドに沿ったサポートを提供したいShopifyストアにとって、AIを活用したソリューションは自然な次の一歩です。それにより、カスタマーサービスを日々の雑務から、成長のための真の資産へと変えることができます。

完全に自動化されたサポート体験がどのようなものか見てみませんか？eesel AIを無料でお試しいただき、わずか数分で最初のShopify向けAIチャットボットを構築してみてください。