Add the search widget to a web page

This page describes how to add search functionality to a website using the search widget.

Before you begin

Before you add a search widget to your web page, be sure to configure your search widget, starting with Configure results for the search widget. Note that it's not possible to adjust the styling of the search widget in your web page.

Procedures

The procedure for adding the search widget to your web page differs depending on the authorization type you choose:

• Authorization token: The widget uses a JWT or OAuth token provided by your codebase. You must have your own server that you can use to generate a token. The auth token is used to make an API call on behalf of the user or service account. When generating the auth token, use the OAuth scope https://www.googleapis.com/auth/cloud-platform.

  • For server-to-server interactions with service accounts: See Using OAuth 2.0 for Server to Server Applications in the authorization documentation.

  • For JavaScript web applications: See OAuth 2.0 for Client-side Web Applications in the authorization documentation.

  Note: If you selected a workforce pool to control access to your app's data, then obtain short-lived tokens for workforce identity federation.

• Public access: The widget won't restrict who can get results from a search query.

Add a widget that uses an authorization token

1. In the Google Cloud console, go to the Agent Builder page.

   Agent Builder

2. Click the name of the app that you want to edit.

3. Click Integration.

4. Click the UI tab.

5. Select JWT or OAuth based as the widget authorization type.

6. Specify the domain name for the widget page:

   1. Enter the domain name for the page where the widget will appear.

      For example, if you are going to copy the widget to the pages example.com/ai.html and cymbal.example.com/search.html, enter example.com as the domain. If you only want the widget to work on a page in the subdomain, enter cymbal.example.com.

      If you want to test the widget on your localhost, enter localhost.

   2. Click Add.

7. Repeat step 6 for each domain where the widget will appear.

8. Click Save.

9. Copy the code snippet provided in the Copy the following code to your web application section.

10. In your codebase, generate an authorization token.

    Note: If you selected a workforce pool to control access to your app's data, then obtain short-lived tokens for workforce identity federation.

11. To pass the authorization token to your widget, use the "Set authorization token" code snippet provided in the Copy the following code to your web application section and replace the text <JWT or OAuth token provided by you backend> with your authorization token.

12. Periodically set a fresh token by repeating the previous step before the current token expires.

Add a widget that has public access

1. In the Google Cloud console, go to the Agent Builder page.

   Agent Builder

2. Click the name of the app that you want to edit.

3. Click Integrations.

4. Click the UI tab.

5. Select Public Access as the widget authorization type.

6. Specify the domain name for the widget page:

   1. Enter the domain name for the page where the widget will appear.

      For example, if you are going to copy the widget to the pages example.com/ai.html and cymbal.example.com/search.html, enter example.com as the domain. If you only want the widget to work on pages in the subdomain, enter cymbal.example.com.

      If you want to test the widget on your localhost, enter localhost.

   2. Click Add.

7. Repeat step 6 for each domain where the widget will appear.

8. Click Save.

9. Copy the code snippet provided in the Copy the following code to your web application section and paste the code snippet into your web page.