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

En esta página, se describe cómo agregar la funcionalidad 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 configurar tu widget de búsqueda. Para ello, comienza con 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 difiere según el tipo de autorización que elijas:

Agrega un widget que use un token de autorización

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

    AI Applications

  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 host local, 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 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. Configura periódicamente un token nuevo repitiendo el paso anterior antes de que venza el token actual.

Agrega un widget que tenga acceso público

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

    AI Applications

  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 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 quieres que el widget funcione en páginas del subdominio, ingresa cymbal.example.com.

      Si quieres probar el widget en tu host local, 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 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 incorporado de acceso público

Para ver un widget de búsqueda incorporado en una página web pública, consulta ¡Pruébalo!.

Cómo se ve el widget siempre abierto
El widget de búsqueda de Agent Search

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

  <gen-search-widget
    configId="123456"
    anchorsTarget="_blank"
    placeholder="Search the Agent Search documentation"
    alwaysOpened>
  </gen-search-widget>