このページでは、検索ウィジェットを使用してウェブサイトに検索機能を追加する方法について説明します。
始める前に
検索ウィジェットをウェブページに追加する前に、検索ウィジェットの結果を設定するから検索ウィジェットを構成してください。ウェブページで検索ウィジェットのスタイルを調整することはできません。
手順
検索ウィジェットをウェブページに追加する手順は、選択した認証タイプによって異なります。
認証トークン: ウィジェットは、コードベースが提供する JWT または OAuth トークンを使用します。トークンの生成に使用できる独自のサーバーが必要です。認証トークンは、ユーザーまたはサービス アカウントに代わって API 呼び出しを行うために使用されます。認証トークンを生成する際は、OAuth スコープ
https://www.googleapis.com/auth/cloud-platformを使用します。サービス アカウントとのサーバー間インタラクションの場合: 認可のドキュメントの サーバー間アプリケーションに OAuth 2.0 を使用するをご覧ください。
JavaScript ウェブ アプリケーションの場合: 承認ドキュメントの クライアントサイド ウェブ アプリケーション用の OAuth 2.0 をご覧ください。
公開アクセス: このウィジェットでは、検索クエリから結果を取得できるユーザーは制限されません。
認可トークンを使用するウィジェットを追加する
Google Cloud コンソールで、[Agent Builder] ページに移動します。
編集するアプリの名前をクリックします。
[Integration] をクリックします
[ウィジェット] タブをクリックします。
ウィジェットの認証タイプとして [JWT または OAuth ベース] を選択します。
ウィジェット ページのドメイン名を指定します。
ウィジェットを表示するページのドメイン名を入力します。
たとえば、ウィジェットをページ
example.com/ai.htmlとcymbal.example.com/search.htmlにコピーする場合は、ドメインとして「example.com」と入力します。サブドメインのページでのみウィジェットを動作させる場合は、cymbal.example.comを入力します。ローカルホストでウィジェットをテストする場合は、
localhostを入力します。[追加] をクリックします。
ウィジェットを表示するドメインごとに手順 6 を繰り返します。
[保存] をクリックします。
「次のコードをウェブ アプリケーションにコピーする」セクションにあるコード スニペットをコピーします。
コードベースで認証トークンを生成します。
認証トークンをウィジェットに渡すには、[次のコードをウェブ アプリケーションにコピーする] セクションにある 2 つ目のコード スニペット「
// Set authorization token」を使用し、テキスト<JWT or OAuth token provided by you backend>を認証トークンに置き換えます。現在のトークンが期限切れになる前に、前の手順を繰り返して新しいトークンを定期的に設定します。
公開アクセス可能なウィジェットを追加する
Google Cloud コンソールで、[Agent Builder] ページに移動します。
編集するアプリの名前をクリックします。
[Integration] をクリックします
[ウィジェット] タブをクリックします。
ウィジェットの認証タイプとして [公開アクセス] を選択します。
ウィジェット ページのドメイン名を指定します。
ウィジェットを表示するページのドメイン名を入力します。
たとえば、ウィジェットをページ
example.com/ai.htmlとcymbal.example.com/search.htmlにコピーする場合は、ドメインとして「example.com」と入力します。サブドメイン内のページでのみウィジェットを動作させる場合は、cymbal.example.comを入力します。ローカルホストでウィジェットをテストする場合は、
localhostを入力します。[追加] をクリックします。
ウィジェットを表示するドメインごとに手順 6 を繰り返します。
[保存] をクリックします。
「次のコードをウェブ アプリケーションにコピーする」セクションにあるコード スニペットをコピーし、ウェブページに貼り付けます。