ディープリンクでチャットウィンドウを開く方法（テーマコードの編集不要）

テーマのコードを変更せず、ディープリンクでチャットウィンドウを開けます。 Shopify Theme Editorで、任意のボタン、アイコン、テキスト要素にハッシュタグ #shoply-ai-chatbot を追加してください。顧客がその要素をクリックすると、チャットウィンドウが自動的に開きます。

動作例：demo.shoplyai.ai

手順：

テーマエディターで対象のボタン、テキスト、またはアイコンを編集します。
リンクまたはURLを #shoply-ai-chatbot に設定します。

例：

ボタンでチャットウィンドウを開く：

リンク付きテキストでチャットウィンドウを開く：

質問をあらかじめ入力してチャットを開く

チャットウィンドウを開くと同時に質問を自動送信したい場合は、ハッシュフラグメント（推奨）またはURLクエリパラメーターを使えます。

配送ポリシー、返品ポリシー、商品に関する問い合わせなど、よくある話題への直接リンクを作るのに最適です。

推奨：ハッシュフラグメント（ページを再読み込みしない）

#shoply_question= ハッシュフラグメントを使用します。ハッシュはすべてブラウザー内で処理されるため、このリンクをクリックしてもページは再読み込みされず、既存のチャット履歴も保持されます。

形式：

plaintext


https://your-store.com#shoply_question=your question here

例：

配送ポリシー： https://your-store.com#shoply_question=What is your shipping policy?
返品： https://your-store.com#shoply_question=How do I return an item?
注文状況： https://your-store.com#shoply_question=Where is my order?
商品検索： https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

ストア内の任意のページと組み合わせられます。たとえば、特定の商品ページで質問付きでチャットボットを開くには、次のようにします。

plaintext


https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?

従来方式：URLクエリパラメーター

?shoply_question= クエリパラメーターも後方互換性のためサポートされています。ただし、顧客がすでに表示しているURLにクエリパラメーターを追加すると、ページが再読み込みされます。

形式：

plaintext


https://your-store.com?shoply_question=your question here

注：特殊文字やスペースを含む質問では、URLエンコードを忘れないでください。多くのブラウザーは自動で処理しますが、プログラムでリンクを追加する場合は適切にURLエンコードしてください（例：スペースは %20 になります）。

顧客がどちらのリンクをクリックしても、チャットウィンドウが自動的に開き、質問がAIチャットボットへ送信されます。これにより、すぐに回答を提供できます。

利用例：

フッターに「配送について質問する」リンクを追加する
特定の質問でチャットボットを開くQRコードを作る
メールキャンペーンや注文確認に役立つリンクを含める
商品ページに文脈に合うヘルプリンクを追加する（例：「サイズについて質問する」）

テーマテンプレートのコードを編集してディープリンクでチャットウィンドウを開く方法

前のセクションでは、テーマコードを編集せず、Theme Editorから任意のボタン、アイコン、テキストにハッシュタグ（ディープリンク）を追加してチャットウィンドウを開く方法を説明しました。

ただし、ストア内の任意の場所にディープリンクを追加する柔軟性を高めたい場合（例：ヘッダーに新しいアイコンを作成する場合）は、テンプレートコードを編集する必要があります。

以下は、テーマテンプレートに新しいアイコンを作成するために使える簡単なHTMLコードの例です。

コード例

1. チャットアイコン

以下のコードはチャットアイコンを追加します：

plaintext


<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. AIスターアイコン

以下のコードはAIスターを追加します：

plaintext


<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. 関数呼び出しメソッド

ハッシュタグを使う方法に加えて、任意のボタンやアイコンの onclick 属性に関数呼び出し openShoplyAIChatBot() を設定することもできます。これにより、顧客がボタンやアイコンをクリックするとチャットウィンドウが表示されます。

plaintext


<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

サポートが必要ですか？

上の例のいずれかを使用し、sections/header.liquid ファイルの検索アイコンの横にコードを挿入すると、ストアのヘッダーにチャットのディープリンクを追加できます。

テーマテンプレートのコード編集にあまり慣れていない場合も、ご心配はいりません！

お気軽にミーティングをご予約ください。ストア独自の雰囲気に合う理想的な場所に、最適なアイコンを設定するお手伝いをいたします。

フローティングアイコンを非表示にする方法

ディープリンクでチャットウィンドウを開くように設定すると、フローティングアイコンを非表示にしたい場合があります。また、ウェブサイトにフローティングアイコンが多すぎると圧迫感があると、ストアオーナーからよく聞かれます。ご懸念はもっともです！そこで、チャットアイコンを非表示にする機能を導入しました。

アプリの管理コンソールの「Customize AI Chat」セクションにあるSelect a Chat Icon設定で、次の項目を選択できるようになりました：

「Hide floating icon and use deep link to open chat」

これにより、フローティングアイコンを非表示にしながら、ディープリンクでチャットウィンドウを開けます。