在網頁中加入搜尋小工具

本頁面說明如何使用搜尋小工具，在網站中加入搜尋功能。

事前準備

在網頁中加入搜尋小工具前，請務必先設定搜尋小工具，請參閱「設定搜尋小工具的結果」一文。請注意，您無法調整網頁中搜尋小工具的樣式。

程序

將搜尋小工具新增至網頁的程序會因所選授權類型而異：

  • 授權權杖：小工具會使用您的程式碼集提供的 JWT 或 OAuth 權杖。您必須擁有自己的伺服器，才能產生權杖。授權權杖可用於代表使用者或服務帳戶發出 API 呼叫。產生驗證權杖時，請使用 OAuth 範圍 https://www.googleapis.com/auth/cloud-platform。

  • 公開存取權：小工具不會限制誰能取得搜尋查詢的結果。

新增使用授權權杖的小工具

  1. 前往 Google Cloud 控制台的「AI Applications」頁面。

    AI 應用程式

  2. 按一下要編輯的應用程式名稱。

  3. 按一下「整合」。

  4. 按一下「小工具」分頁標籤。

  5. 選取「JWT or OAuth based」(採用 JWT 或 OAuth) 做為小工具授權類型。

  6. 指定小工具頁面的網域名稱：

    1. 輸入要顯示小工具的網頁網域名稱。

      舉例來說，如要將小工具複製到 example.com/ai.html 和 cymbal.example.com/search.html 頁面，請輸入 example.com 做為網域。如果只想讓小工具在子網域中的網頁上運作，請輸入 cymbal.example.com。

      如要測試本機上的小工具，請輸入 localhost。

    2. 按一下「新增」。

  7. 針對要顯示小工具的每個網域，重複執行步驟 6。

  8. 按一下 [儲存]。

  9. 複製「Copy the following code to your web application」(將下列程式碼複製到您的網頁應用程式) 專區中提供的程式碼片段。

  10. 選用步驟：如要自訂搜尋小工具的行為，請進行下列變更：

    • 如要在新分頁中開啟網頁搜尋結果，請在複製的程式碼片段中加入以下程式碼。根據預設，來自非結構化文件的結果會在新分頁中開啟，而來自網際網路的結果則會在小工具所在的頁面中開啟。

      anchorsTarget="_blank"

      例如：<gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>

    • 如要自訂搜尋列中的預留位置文字，請在複製的程式碼片段中加入以下內容：

      placeholder="CUSTOM_PLACEHOLDER"

      例如：<gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>

    • 如要一律在沒有觸發事件的情況下顯示小工具，請在複製的程式碼片段中新增以下內容：

      alwaysOpened

      例如：<gen-search-widget alwaysOpened></gen-search-widget>

  11. 在程式碼集內產生授權權杖。

  12. 如要將授權權杖傳送給小工具，請使用「Copy the following code to your web application」(將下列程式碼複製到您的網頁應用程式) 專區中提供的第二個程式碼片段「// Set authorization token」，並使用授權權杖取代文字 <JWT or OAuth token provided by you backend>。

  13. 在目前的權杖過期前，定期重複上一個步驟來設定新權杖。

新增可供大眾存取的小工具

  1. 前往 Google Cloud 控制台的「AI Applications」頁面。

    AI 應用程式

  2. 按一下要編輯的應用程式名稱。

    如要提供公開存取權，請確認搜尋應用程式未與任何存取控管下的資料儲存庫建立關聯。

  3. 按一下「整合」。

  4. 按一下「小工具」分頁標籤。

  5. 選取「Public Access」做為小工具授權類型。

  6. 指定小工具頁面的網域名稱：

    1. 輸入要顯示小工具的網頁網域名稱。

      舉例來說，如要將小工具複製到 example.com/ai.html 和 cymbal.example.com/search.html 頁面，請輸入 example.com 做為網域。如果只想讓小工具在子網域中的網頁上運作，請輸入 cymbal.example.com。

      如要測試本機上的小工具，請輸入 localhost。

    2. 按一下「新增」。

  7. 針對要顯示小工具的每個網域，重複執行步驟 6。

  8. 按一下 [儲存]。

  9. 複製「Copy the following code to your web application」(將下列程式碼複製到您的網頁應用程式) 專區中提供的程式碼片段。

  10. 選用步驟：如要自訂搜尋小工具的行為，請進行下列變更：

    • 如要在新分頁中開啟網頁搜尋結果，請在複製的程式碼片段中加入以下程式碼。根據預設，來自非結構化文件的結果會在新分頁中開啟，而來自網際網路的結果則會在小工具所在的頁面中開啟。

      anchorsTarget="_blank"

      例如：<gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>

    • 如要自訂搜尋列中的預留位置文字，請在複製的程式碼片段中加入以下內容：

      placeholder="CUSTOM_PLACEHOLDER"

      例如：<gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>

    • 如要一律在沒有觸發事件的情況下顯示小工具，請在複製的程式碼片段中新增以下內容：

      <gen-search-widget alwaysOpened></gen-search-widget>

  11. 將程式碼片段貼到網頁中。

嵌入式公開存取小工具範例

如要查看公開網頁中嵌入的搜尋小工具，請參閱「試用 Vertex AI Search」頁面。

小工具一律保持開啟的樣貌
試用 Vertex AI Search 搜尋小工具

這個搜尋小工具可搭配下列設定運作：

  <gen-search-widget
    configId="123456"
    anchorsTarget="_blank"
    placeholder="Search something about AI Applications"
    alwaysOpened>
  </gen-search-widget>