AI 検索バー
意味を理解する、あなたのウェブサイトのための検索バー - 訪問者はナレッジベースから商品やページを瞬時に見つけられます
概要
AI 検索バーは、あなたのウェブサイト用のスタンドアロン検索ウィジェットです。訪問者が自分の言葉で入力すると、入力を止めた瞬間にバーの下に一致する結果が表示されます: リアルタイムデータフィードの商品は画像と価格付きのカードとして、ナレッジベースのページはタイトル、短いプレビュー、リンク付きで表示されます。完全一致のキーワードだけでなく意味で検索するため、説明文を入力した訪問者でも正しいアイテムを見つけられます。
チャットボットと同じナレッジベースを使用するため、追加でインデックスや保守を行うものはありません。2 つのウィジェットは独立しています: 検索バーだけ、チャットウィジェットだけ、または同じページで両方を一緒に使用できます。
ウェブサイトへの追加
AI 検索バーには Standard 以上のプランが必要です。下位プランではバーはサイトに表示されますが、結果は一切返りません。何も起きない場合は、まずプランをご確認ください。
ウィジェット ID はダッシュボードの AI 検索バーのページに表示されます。
一番簡単: 既にある検索ボックスを置き換える
サイトにすでに検索がある場合 - Shopify テーマの検索、WordPress の検索フォーム、独自のもの - 何かを配置する必要も、テーマを編集する必要もありません。script タグに data-replace を追加すると、ウィジェットが既存の検索フォームを見つけて隠し、まったく同じ位置に表示されます:
<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" data-replace="auto" async></script>
このスクリプトはページのどこに置いても構いません。ヘッダーやフッターにコードを追加するプラグインであれば何でも使えます。結果を選ばずに Enter を押した場合はこれまでどおり元の検索結果ページが開くので、訪問者が慣れているものは何も止まりません。特殊なテーマで自動検出が誤った要素を選んだときは、auto の代わりに CSS セレクタを指定してください。例: data-replace=".header-search"。何も一致しない場合、ウィジェットはページに手を加えません。
自分で配置する
まだ検索バーがない場合や、特定の場所に置きたい場合は、バーを表示したい位置に 2 行とも貼り付けてください。たとえばヘッダーのロゴの横などです。バーは配置した要素の幅いっぱいに広がるため、通常はテーマのテンプレート編集が必要になります。
<div data-asyntai-search></div>
<script src="https://widget.asyntai.com/static/js/search-widget.js" data-asyntai-id="YOUR_WIDGET_ID" async></script>
うまくいかないとき
- バーがまったく表示されない。スクリプトのウィジェット ID がダッシュボードの AI 検索バーのページのものと一致しているか、そしてコードが下書きやプレビューだけでなく公開ページに入っているかを確認してください。
- バーは出るが結果が返らない。ほとんどの場合プランが原因です。検索は Standard 以上で動きます。月間の AI 応答上限を使い切った場合も同じ状態になります。
- ページは出るが商品が出ない。商品は Real-Time Data Feed から来ます。AI 検索バーのページでフィードを接続し、そのページのフィード ソースのチェックが入っているか確認してください。
- どんな検索でも何も出ない。ナレッジベースがまだ空の可能性があります。先にサイトをクロールするか、ダッシュボードでコンテンツを追加してから、もう一度お試しください。
- data-replace が検索ボックスを見つけられない。テーマによっては検索がボタンやポップアップの中に隠れています。auto の代わりに対象要素の CSS セレクタを指定し、テーマエディタではなく通常のブラウザーウィンドウでページを確認してください。
検索ソース
ダッシュボードの AI 検索バーのページにある 2 つのチェックボックスで、検索が使用できるものを制御します: ウェブサイトのページ(クロールされたページと追加した URL)と、リアルタイムデータフィードです。どちらもデフォルトでオンです。フィードは商品に限定されません - 記事やリスティングなど、そこでインデックスしたあらゆるものが結果として表示されます。変更はサイトに即座に適用されます。
商品の検索結果には、接続済みのデータフィードが必要です。どちらの種類でも利用できます。Standard プラン以上のリアルタイムデータフィードと、Pro のリアルタイムデータフィードMaxです。フィードがなくても検索は動作しますが、返されるのはウェブサイトのページのみです。ダッシュボードのページではフィードが未接続と表示されるため、商品が表示されない理由がわかります。
検索アナリティクス
ダッシュボードの AI 検索バーのページには、過去 30 日間の検索が表示されます。検索が何回実行されたか、そのうち何回が結果なしだったか、訪問者が結果をどれくらいの頻度で開いたかがわかります。2 つの表に、よく使われる検索と結果が出なかった検索が並びます。役に立つのは 2 つ目の表です。訪問者が何を期待し、何を見つけられなかったかがそのままわかるからです。
記録は既定でオンになっており、同じページのチェックボックス 1 つでオフにできます。オフにすると検索テキストは一切保存されず、表の更新も停止しますが、検索自体はこれまでとまったく同じように動作します。
ダッシュボードのページであなたが行った検索は決して集計されません。ゼロ保存モードを使うウェブサイトでは、検索テキストは一切記録されません。データ保存ポリシーを設定している場合、検索の記録は会話と同じスケジュールで削除されます。
検索結果の見え方
ダッシュボードの AI Search Bar ページにある2つの設定で、バーと検索結果の見た目を変えられます。どちらも選んだ時点で保存され、コードの変更は不要です。
商品結果の詳細度
各商品名の下に、データフィードの説明文を1行表示できます。それが役立つかどうかは、フィードの中身しだいです。旅行日数と残り席数を示す旅行フィードなら表示する価値があります。一方、属性の一覧が入っているだけのフィードは、データベースの出力のように見えます。
選ぶのはあなたです。名前のみ、1行、または2行。既定は1行で、多くのフィードに適しています。似た商品を見分けるのに十分でありながら、一覧が窮屈になりません。これは商品結果にのみ影響します。ページ結果は常に、訪問者の検索に一致した本文を表示します。
バーのサイズ
バーの高さは3種類です。狭いヘッダー向けのコンパクト38ピクセル、既定の44ピクセル、検索を中心に据えたページ向けの大52ピクセル。文字サイズも合わせて変わります。
幅を当社が決めることはありません。バーは常に設置した要素いっぱいに広がるので、幅はあなたのレイアウトで決まります。結果パネルは自動的にバーに合わせます。
サイズを変更したら、埋め込みコードをコピーし直してください。新しいコードにはサイズが含まれるため、ページの読み込み時点から正しく表示されます。コピーし直さなくてもバーは自動で調整されますが、最初の検索が実行されてからになります。
検索で何も見つからないとき
同じページにチャットウィジェットがある場合、検索で結果が出なかったときに、検索バーがその質問をアシスタントに引き継ぐことを提案します。訪問者は質問をそのまま保ったままチャットに移り、質問はすでに入力された状態です。行き止まりが会話に変わります。このオプションはチャットウィジェットがある場合にのみ表示されます。
オプション
検索バーは、プレースホルダー、検索結果の見出し、読み込み中のテキストに、訪問者のブラウザの言語を自動的に使用します。独自の文言を使いたい場合にのみ、これらを設定してください。
2 つの見出しは、ダッシュボードの AI 検索バーのページからコードを変えずに変更することもできます。データフィードに商品ではなく記事や物件を入れている場合は、こちらのほうが簡単です。script タグの属性は引き続きダッシュボードの設定より優先されます。
すべての属性は任意で、script タグに記述します:
data-placeholder="Search products..."- 空の検索バーに表示されるテキストdata-accent="#0a7d4f"- フォーカスとハイライトの色。ブランドに合わせられますdata-max-results="8"- 表示する結果の数。1 から 20 までdata-new-tab="true"- 結果を新しいブラウザタブで開くdata-size="sm"- バーの高さ: sm、md、lg。ダッシュボードで設定したサイズより優先されますdata-label-products="Products"- フィード結果の上に表示される見出し。あなたの言語で指定できます - 例えばフィードに記事が入っている場合は「記事」などdata-label-pages="Pages"- ページ結果の上に表示される見出し。あなたの言語で指定できますdata-label-empty="No results found"- 何も一致しないときのメッセージdata-label-searching="Searching..."- 結果の読み込み中に表示されるテキストdata-label-ask-ai="Ask our assistant"- 結果が見つからなかった検索をチャットボットに引き継ぐ選択肢の文言data-target=".my-container"- デフォルトのコンテナの代わりに、この要素の中にバーを表示しますdata-replace="auto"- テーマにすでにある検索バーを置き換えます。上記の説明を参照してください
使用量と課金
訪問者が実行する各検索は、月間プラン上限から AI の返信 1 回分を消費します - これはチャットボットの返信と同じ上限です。検索は訪問者が入力を止めたときに実行され、1 文字ごとには実行されません。ダッシュボードの AI 検索バーのページであなたが実行する検索はカウントされません。月間上限に達すると、上限がリセットされるまで検索バーは単に結果を表示しなくなります。
知っておくと便利なこと
- コンテンツが別の言語で書かれていても、訪問者はどの言語でも検索できます。
- スペルミスや入力途中の単語でも正しい結果が見つかります。たとえば「ジャケト」で検索してもジャケットが見つかります。
- 商品価格は、フィード内の通貨から取得した通貨記号付きで表示されます。
- 複数の言語で存在する同じページは 1 回だけ表示されます - 検索言語に一致する版が優先されます。
- 結果はあなたのサイトの実際のページを開くため、検索バーはナビゲーションとしても機能します。
- ウィジェットは依存関係のない 1 つの小さなスクリプトで、ページの表示速度を低下させません。
- キーボード操作は最初から使えます: 矢印キーで移動、Enter で開く、Escape で閉じる。