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 diseño 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 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 servidor a servidor Aplicaciones 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.

  Nota: Si seleccionaste un grupo de personal para controlar el acceso a los datos de tu app, obtén tokens de corta duración para la federación de identidades de personal.

• Acceso público: El widget no restringirá quién puede obtener resultados de un de búsqueda.

Agrega un widget que use un token de autorización

1. En la consola de Google Cloud, ve a la página Agent Builder.

   Agent Builder

2. Haz clic en el nombre de la app que quieras 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. En tu base de código, genera un token de autorización.

    Nota: Si seleccionaste un grupo de personal para controlar el acceso a los datos de tu app, obtén tokens de corta duración para la federación de identidades de personal.

11. 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.

12. Establece periódicamente un token nuevo repitiendo el paso anterior antes del hasta 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 Agent Builder.

   Agent Builder

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

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 para la página del widget:

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

      Por ejemplo, si copias el widget a 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 y pégalo en tu página web.