ディープリンクを使ってチャットウィンドウを開く方法（テーマコードを編集せずに）

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

ライブ例: demo.shoplyai.ai

手順:

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

例:

ボタンを使ってチャットウィンドウを開く:

リンク付きテキストを使ってチャットウィンドウを開く:

商品固有の質問でチャットを開く

商品ページに「この商品について質問しますか？」ボタンを追加すると、買い物客がその商品について質問しやすくなります。リンクを #shoply_product_questions に設定してください。クリックすると、商品名、商品の簡単なハイライト、その商品に関連する自動生成された質問とともにチャットが開きます。

Shopify テーマエディタで商品テンプレートを開き、URL を設定できるボタンまたはリンク付きテキストを追加または編集します。
ラベルを「この商品について質問しますか？」に設定し、リンクを #shoply_product_questions に設定します。
保存後、商品ページにアクセスしてリンクをクリックし、商品に関する質問を確認します。

テーマに適切なボタンやリンク設定がない場合は、商品テンプレートの HTML にこのリンクを追加してください:

html


<a href="#shoply_product_questions">Question About This Product?</a>

このリンクは商品ページで使用してください。そうすることで Shoply が商品のコンテキストを取得できます。末尾に #shoply_product_questions が付いた完全な商品 URL を共有することもできます。

Bent 85 Skis の商品質問チャットを試す。提案には、スキーの重量、コア、ロッカープロファイル、トップシートアートに関する質問が含まれます。買い物客は提案を選ぶことも、自分で質問を入力することもできます。

これらのリンクの使用例については、FAQ を置き換えるガイドの AI 搭載商品質問をご覧ください。

これらの商品質問は自動的に生成されます。一方、Customize AI Chat で設定する開始時の質問は、通常のチャット起動時に適用されます。

事前入力された質問でチャットを開く

チャットウィンドウを開いて、さらに質問を自動送信したいですか？これは ハッシュフラグメント（推奨）または 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 コードを作成する
メールキャンペーンや注文確認メールに役立つリンクを含める
商品ページに文脈に応じたヘルプリンクを追加する（例: 「サイズについて質問する」）

ディープリンクを使ってチャットウィンドウを開く方法（テーマテンプレートのコード編集が必要）

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

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

以下に、テーマテンプレートで新しいアイコンを作成するためのシンプルな 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」 オプション。

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