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](https://docs.cloud.google.com/generative-ai-app-builder/docs/configure-widget-attributes). 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](https://developers.google.com/identity/protocols/oauth2/service-account)
in the authorization documentation.
- **For JavaScript web applications:** See [OAuth 2.0 for Client-side Web
Applications](https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow)
in the authorization documentation.
> [!NOTE]
> **Note:** If you selected a workforce pool to control access to your app's data, then [obtain short-lived tokens for workforce identity
> federation](https://docs.cloud.google.com/iam/docs/workforce-obtaining-short-lived-credentials).
- **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 **AI Applications** page.
[AI Applications](https://console.cloud.google.com/gen-app-builder/)
2. Click the name of the app that you want to edit.
3. Click **Integration**.
4. Click the **Widget** 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. Optional: Make the following changes to customize the search widget
behavior:
- To open the results from the web in new tabs instead, add the following
to the copied code snippet. By default, results from unstructured
documents open in new tabs, while results from the web open in the same
page as the widget.
anchorsTarget="_blank"
For example:
``
- To customize the placeholder text inside the search bar, add the following
to the copied code snippet:
placeholder="CUSTOM_PLACEHOLDER"
For example:
``
- To always show the widget without a trigger, add the following
to the copied code snippet:
alwaysOpened
For example:
``
11. In your codebase, generate an authorization token.
> [!NOTE]
> **Note:** If you selected a workforce pool to control access to your app's data, then [obtain short-lived tokens for workforce identity federation](https://docs.cloud.google.com/iam/docs/workforce-obtaining-short-lived-credentials.md.txt).
12. To pass the authorization token to your widget, use the second code snippet,
"`// Set authorization token`", provided in the **Copy the following code
to your web application** section and replace the text `` with your authorization token.
13. Periodically set a fresh token by repeating the previous step before the
current token expires.
### Add a widget that has public access
> [!NOTE]
> **Note:** If your organization requires VPC Service Controls enforcement to protect data, then don't use public access for widget authorization.
1. In the Google Cloud console, go to the **AI Applications** page.
[AI Applications](https://console.cloud.google.com/gen-app-builder/)
2. Click the name of the app that you want to edit.
For public access, make sure that the search app isn't associated with any
data store under [access control](https://docs.cloud.google.com/generative-ai-app-builder/docs/data-source-access-control.md.txt).
3. Click **Integration**.
4. Click the **Widget** 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.
10. Optional: Make the following changes to customize the search widget
behavior:
- To open the results from the web in new tabs instead, add the following
to the copied code snippet. By default, results from unstructured
documents open in new tabs, while results from the web open in the same
page as the widget.
anchorsTarget="_blank"
For example:
``
- To customize the placeholder text inside the search bar, add the following
to the copied code snippet:
placeholder="CUSTOM_PLACEHOLDER"
For example:
``
- To always show the widget without a trigger, add the following
to the copied code snippet:
``
11. Paste the code snippet into your web page.
## Example of an embedded public-access widget
To see a search widget embedded in a public webpage, see
[Try it!](https://docs.cloud.google.com/generative-ai-app-builder/docs/introduction#try-it).
 The Try It search widget for Agent Search
This search widget works with the following configuration: