Agrega el widget de búsqueda a una página web

En esta página, se describe cómo agregar la función de búsqueda a un sitio web con el widget de búsqueda.

Antes de comenzar

Antes de agregar un widget de búsqueda a tu página web, asegúrate de configurarlo. Para ello, consulta Cómo configurar los resultados para el widget de búsqueda. Ten en cuenta que no es posible ajustar el estilo del widget de búsqueda en tu página web.

Procedimientos

El procedimiento para agregar el widget de búsqueda a tu página web varía según el tipo de autorización que elijas:

• Token de autorización: El widget usa un token OAuth o JWT proporcionado por tu base de código. Debes tener tu propio servidor que puedas usar para generar un token. El token de autenticación se usa para realizar una llamada a la API en nombre del usuario o la cuenta de servicio. Cuando generes el token de autenticación, usa el permiso de OAuth https://www.googleapis.com/auth/cloud-platform.

  • Para interacciones de servidor a servidor con cuentas de servicio: Consulta Cómo usar OAuth 2.0 para aplicaciones de servidor a servidor en la documentación de autorización.

  • Para aplicaciones web de JavaScript: Consulta OAuth 2.0 para aplicaciones web del lado del cliente en la documentación de autorización.

• Acceso público: El widget no restringirá quiénes pueden obtener resultados de una búsqueda.

Agrega un widget que use un token de autorización

1. En la consola de Google Cloud , ve a la página AI Applications.

   Aplicaciones de IA

2. Haz clic en el nombre de la app que deseas editar.

3. Haz clic en Integration.

4. Haz clic en la pestaña Widget.

5. Selecciona Basado en JWT o OAuth como el tipo de autorización del widget.

6. Especifica el nombre de dominio de la página del widget:

   1. Ingresa el nombre de dominio de la página en la que aparecerá el widget.

      Por ejemplo, si quieres copiar el widget en las páginas example.com/ai.html y cymbal.example.com/search.html, ingresa example.com como dominio. Si solo quieres que el widget funcione en una página del subdominio, ingresa cymbal.example.com.

      Si quieres probar el widget en tu localhost, ingresa localhost.

   2. Haz clic en Agregar.

7. Repite el paso 6 para cada dominio en el que aparecerá el widget.

8. Haz clic en Guardar.

9. Copia el fragmento de código proporcionado en la sección Copia el siguiente código en tu aplicación web.

10. Opcional: Realiza los siguientes cambios para personalizar el comportamiento del widget de búsqueda:

    • Para abrir los resultados de la Web en pestañas nuevas, agrega lo siguiente al fragmento de código copiado. De forma predeterminada, los resultados de los documentos no estructurados se abren en pestañas nuevas, mientras que los resultados de la Web se abren en la misma página que el widget.

      anchorsTarget="_blank"
      

      Por ejemplo: <gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>

    • Para personalizar el texto del marcador de posición dentro de la barra de búsqueda, agrega lo siguiente al fragmento de código copiado:

      placeholder="CUSTOM_PLACEHOLDER"
      

      Por ejemplo: <gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>

    • Para mostrar siempre el widget sin un activador, agrega lo siguiente al fragmento de código copiado:

      alwaysOpened
      

      Por ejemplo: <gen-search-widget alwaysOpened></gen-search-widget>

11. En tu base de código, genera un token de autorización.

12. Para pasar el token de autorización a tu widget, usa el segundo fragmento de código, "// Set authorization token", que se proporciona en la sección Copia el siguiente código en tu aplicación web y reemplaza el texto <JWT or OAuth token provided by you backend> por tu token de autorización.

13. Para establecer un token nuevo de forma periódica, repite el paso anterior antes de que venza el token actual.

Agrega un widget que tenga acceso público

1. En la consola de Google Cloud , ve a la página AI Applications.

   Aplicaciones de IA

2. Haz clic en el nombre de la app que deseas editar.

   Para el acceso público, asegúrate de que la app de búsqueda no esté asociada con ningún almacén de datos que esté bajo control de acceso.

3. Haz clic en Integration.

4. Haz clic en la pestaña Widget.

5. Selecciona Acceso público como el tipo de autorización del widget.

6. Especifica el nombre de dominio de la página del widget:

   1. Ingresa el nombre de dominio de la página en la que aparecerá el widget.

      Por ejemplo, si quieres copiar el widget en las páginas example.com/ai.html y cymbal.example.com/search.html, ingresa example.com como dominio. Si solo deseas que el widget funcione en las páginas del subdominio, ingresa cymbal.example.com.

      Si quieres probar el widget en tu localhost, ingresa localhost.

   2. Haz clic en Agregar.

7. Repite el paso 6 para cada dominio en el que aparecerá el widget.

8. Haz clic en Guardar.

9. Copia el fragmento de código proporcionado en la sección Copia el siguiente código en tu aplicación web.

10. Opcional: Realiza los siguientes cambios para personalizar el comportamiento del widget de búsqueda:

    • Para abrir los resultados de la Web en pestañas nuevas, agrega lo siguiente al fragmento de código copiado. De forma predeterminada, los resultados de los documentos no estructurados se abren en pestañas nuevas, mientras que los resultados de la Web se abren en la misma página que el widget.

      anchorsTarget="_blank"
      

      Por ejemplo: <gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>

    • Para personalizar el texto del marcador de posición dentro de la barra de búsqueda, agrega lo siguiente al fragmento de código copiado:

      placeholder="CUSTOM_PLACEHOLDER"
      

      Por ejemplo: <gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>

    • Para mostrar siempre el widget sin un activador, agrega lo siguiente al fragmento de código copiado:

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

11. Pega el fragmento de código en tu página web.

Ejemplo de un widget de acceso público incorporado

Para ver un widget de búsqueda incorporado en una página web pública, consulta la página Probar Vertex AI Search.

Este widget de búsqueda funciona con la siguiente configuración:

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