Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.
Cette page explique comment ajouter une fonctionnalité de recherche à un site Web à l'aide du widget de recherche.
Avant de commencer
Avant d'ajouter un widget Recherche à votre page Web, assurez-vous de le configurer. Commencez par Configurer les résultats du widget Recherche. Notez qu'il n'est pas possible d'ajuster le style du widget de recherche sur votre page Web.
Procédures
La procédure d'ajout du widget de recherche à votre page Web diffère selon le type d'autorisation que vous choisissez :
Jeton d'autorisation : le widget utilise un jeton JWT ou OAuth fourni par votre codebase. Vous devez disposer de votre propre serveur pour générer un jeton. Le jeton d'authentification permet d'effectuer un appel d'API au nom de l'utilisateur ou du compte de service. Lorsque vous générez le jeton d'authentification, utilisez le champ d'application OAuth https://www.googleapis.com/auth/cloud-platform.
Cliquez sur le nom de l'application que vous souhaitez modifier.
Cliquez sur Integration (Intégration).
Cliquez sur l'onglet Widget.
Sélectionnez le type d'autorisation de widget Basé sur JWT ou OAuth.
Spécifiez le nom de domaine de la page du widget :
Saisissez le nom de domaine de la page sur laquelle le widget s'affichera.
Par exemple, si vous souhaitez copier le widget sur les pages example.com/ai.html et cymbal.example.com/search.html, saisissez example.com comme domaine. Si vous souhaitez que le widget ne fonctionne que sur une page du sous-domaine, saisissez cymbal.example.com.
Si vous souhaitez tester le widget sur votre hôte local, saisissez localhost.
Cliquez sur Ajouter.
Répétez l'étape 6 pour chaque domaine où le widget apparaîtra.
Cliquez sur Enregistrer.
Copiez l'extrait de code fourni dans la section Copiez le code suivant dans votre application Web.
Facultatif : apportez les modifications suivantes pour personnaliser le comportement du widget Recherche :
Pour ouvrir les résultats Web dans de nouveaux onglets, ajoutez ce qui suit à l'extrait de code copié. Par défaut, les résultats provenant de documents non structurés s'ouvrent dans de nouveaux onglets, tandis que les résultats provenant du Web s'ouvrent sur la même page que le widget.
anchorsTarget="_blank"
Par exemple : <gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>
Pour personnaliser le texte de l'espace réservé dans la barre de recherche, ajoutez les éléments suivants à l'extrait de code copié :
placeholder="CUSTOM_PLACEHOLDER"
Par exemple : <gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>
Pour toujours afficher le widget sans déclencheur, ajoutez ce qui suit à l'extrait de code copié :
alwaysOpened
Par exemple : <gen-search-widget alwaysOpened></gen-search-widget>
Dans votre codebase, générez un jeton d'autorisation.
Pour transmettre le jeton d'autorisation à votre widget, utilisez le deuxième extrait de code, "// Set authorization token", fourni dans la section Copier le code suivant dans votre application Web et remplacez le texte <JWT or OAuth token provided by you backend> par votre jeton d'autorisation.
Définissez régulièrement un nouveau jeton en répétant l'étape précédente avant l'expiration du jeton actuel.
Ajouter un widget accessible au public
Dans la console Google Cloud , accédez à la page Applications d'IA.
Cliquez sur le nom de l'application que vous souhaitez modifier.
Pour l'accès public, assurez-vous que l'application de recherche n'est associée à aucun data store sous Contrôle d'accès.
Cliquez sur Integration (Intégration).
Cliquez sur l'onglet Widget.
Sélectionnez le type d'autorisation de widget Accès public.
Spécifiez le nom de domaine de la page du widget :
Saisissez le nom de domaine de la page sur laquelle le widget s'affichera.
Par exemple, si vous souhaitez copier le widget sur les pages example.com/ai.html et cymbal.example.com/search.html, saisissez example.com comme domaine. Si vous souhaitez que le widget ne fonctionne que sur les pages du sous-domaine, saisissez cymbal.example.com.
Si vous souhaitez tester le widget sur votre hôte local, saisissez localhost.
Cliquez sur Ajouter.
Répétez l'étape 6 pour chaque domaine où le widget apparaîtra.
Cliquez sur Enregistrer.
Copiez l'extrait de code fourni dans la section Copiez le code suivant dans votre application Web.
Facultatif : apportez les modifications suivantes pour personnaliser le comportement du widget Recherche :
Pour ouvrir les résultats Web dans de nouveaux onglets, ajoutez ce qui suit à l'extrait de code copié. Par défaut, les résultats provenant de documents non structurés s'ouvrent dans de nouveaux onglets, tandis que les résultats provenant du Web s'ouvrent sur la même page que le widget.
anchorsTarget="_blank"
Par exemple : <gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>
Pour personnaliser le texte de l'espace réservé dans la barre de recherche, ajoutez les éléments suivants à l'extrait de code copié :
placeholder="CUSTOM_PLACEHOLDER"
Par exemple : <gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>
Pour toujours afficher le widget sans déclencheur, ajoutez ce qui suit à l'extrait de code copié :
Pour voir un widget de recherche intégré à une page Web publique, consultez la page Essayer Vertex AI Search.
Widget de recherche "Essayer Vertex AI Search"
Ce widget de recherche fonctionne avec la configuration suivante :
<gen-search-widget configId="123456" anchorsTarget="_blank" placeholder="Search something about AI Applications" alwaysOpened> </gen-search-widget>
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/19 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Difficile à comprendre","hardToUnderstand","thumb-down"],["Informations ou exemple de code incorrects","incorrectInformationOrSampleCode","thumb-down"],["Il n'y a pas l'information/les exemples dont j'ai besoin","missingTheInformationSamplesINeed","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/08/19 (UTC)."],[[["\u003cp\u003eThis page provides instructions on how to integrate a search widget into your website, enabling search functionality for your users.\u003c/p\u003e\n"],["\u003cp\u003eBefore adding the widget, you must first configure the search widget attributes, but note that you can not modify the styling of the widget.\u003c/p\u003e\n"],["\u003cp\u003eThere are two authorization methods for the search widget: using an authorization token (JWT or OAuth) or public access, with the token method requiring a server to generate the token and public access not restricting results.\u003c/p\u003e\n"],["\u003cp\u003eAdding the widget involves selecting the authorization type, specifying the domains where the widget will appear, and then copying and pasting the provided code snippet into your webpage.\u003c/p\u003e\n"],["\u003cp\u003eIf using an authorization token, you must also include a separate code snippet in your website's code to pass the token to the widget, as well as periodically refresh it, and an optional parameter can be added to make the web results open in new tabs.\u003c/p\u003e\n"]]],[],null,["# Add the search widget to a web page\n\nThis page describes how to add search functionality to a website using the\nsearch widget.\n\nBefore you begin\n----------------\n\nBefore you add a search widget to your web page, be sure to configure your\nsearch widget, starting with [Configure results for the search\nwidget](/generative-ai-app-builder/docs/configure-widget-attributes). Note that it's not possible to adjust the\nstyling of the search widget in your web page.\n\nProcedures\n----------\n\nThe procedure for adding the search widget to your web page differs depending on\nthe authorization type you choose:\n\n- **Authorization token** : The widget uses a JWT or OAuth token provided by\n your codebase. You must have your own server that you can use to generate a\n token. The auth token is used to make an API call on behalf of the user or\n service account. When generating the auth token, use the OAuth scope\n `https://www.googleapis.com/auth/cloud-platform`.\n\n - **For server-to-server interactions with service accounts:** See [Using OAuth\n 2.0 for Server to Server\n Applications](https://developers.google.com/identity/protocols/oauth2/service-account)\n in the authorization documentation.\n\n - **For JavaScript web applications:** See [OAuth 2.0 for Client-side Web\n Applications](https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow)\n in the authorization documentation.\n\n | **Note:** If you selected a workforce pool to control access to your app's data, then [obtain short-lived tokens for workforce identity\n | federation](/iam/docs/workforce-obtaining-short-lived-credentials).\n- **Public access**: The widget won't restrict who can get results from a\n search query.\n\n### Add a widget that uses an authorization token\n\n1. In the Google Cloud console, go to the **AI Applications** page.\n\n [AI Applications](https://console.cloud.google.com/gen-app-builder/start)\n2. Click the name of the app that you want to edit.\n\n3. Click **Integration**.\n\n4. Click the **Widget** tab.\n\n5. Select **JWT or OAuth based** as the widget authorization type.\n\n6. Specify the domain name for the widget page:\n\n 1. Enter the domain name for the page where the widget will appear.\n\n For example, if you are going to copy the widget to the pages\n `example.com/ai.html` and `cymbal.example.com/search.html`, enter\n `example.com` as the domain. If you only want the widget to work on a page\n in the subdomain, enter `cymbal.example.com`.\n\n If you want to test the widget on your localhost, enter `localhost`.\n 2. Click **Add**.\n\n7. Repeat step 6 for each domain where the widget will appear.\n\n8. Click **Save**.\n\n9. Copy the code snippet provided in the **Copy the following code to your\n web application** section.\n\n10. Optional: Make the following changes to customize the search widget\n behavior:\n\n - To open the results from the web in new tabs instead, add the following\n to the copied code snippet. By default, results from unstructured\n documents open in new tabs, while results from the web open in the same\n page as the widget.\n\n anchorsTarget=\"_blank\"\n\n For example:\n `\u003cgen-search-widget configId=\"...\" anchorsTarget=\"_blank\"\u003e\u003c/gen-search-widget\u003e`\n - To customize the placeholder text inside the search bar, add the following\n to the copied code snippet:\n\n placeholder=\"\u003cvar translate=\"no\"\u003eCUSTOM_PLACEHOLDER\u003c/var\u003e\"\n\n For example:\n `\u003cgen-search-widget configId=\"...\" placeholder=\"Start your search here\"\u003e\u003c/gen-search-widget\u003e`\n - To always show the widget without a trigger, add the following\n to the copied code snippet:\n\n alwaysOpened\n\n For example:\n `\u003cgen-search-widget alwaysOpened\u003e\u003c/gen-search-widget\u003e`\n11. In your codebase, generate an authorization token.\n\n | **Note:** If you selected a workforce pool to control access to your app's data, then [obtain short-lived tokens for workforce identity federation](/iam/docs/workforce-obtaining-short-lived-credentials).\n12. To pass the authorization token to your widget, use the second code snippet,\n \"`// Set authorization token`\", provided in the **Copy the following code\n to your web application** section and replace the text `\u003cJWT or OAuth token\n provided by you backend\u003e` with your authorization token.\n\n13. Periodically set a fresh token by repeating the previous step before the\n current token expires.\n\n### Add a widget that has public access\n\n| **Note:** If your organization requires VPC Service Controls enforcement to protect data, then don't use public access for widget authorization.\n\n1. In the Google Cloud console, go to the **AI Applications** page.\n\n [AI Applications](https://console.cloud.google.com/gen-app-builder/start)\n2. Click the name of the app that you want to edit.\n\n For public access, make sure that the search app isn't associated with any\n data store under [access control](/generative-ai-app-builder/docs/data-source-access-control).\n3. Click **Integration**.\n\n4. Click the **Widget** tab.\n\n5. Select **Public Access** as the widget authorization type.\n\n6. Specify the domain name for the widget page:\n\n 1. Enter the domain name for the page where the widget will appear.\n\n For example, if you are going to copy the widget to the pages\n `example.com/ai.html` and `cymbal.example.com/search.html`, enter\n `example.com` as the domain. If you only want the widget to work on pages\n in the subdomain, enter `cymbal.example.com`.\n\n If you want to test the widget on your localhost, enter `localhost`.\n 2. Click **Add**.\n\n7. Repeat step 6 for each domain where the widget will appear.\n\n8. Click **Save**.\n\n9. Copy the code snippet provided in the **Copy the following code to your\n web application** section.\n\n10. Optional: Make the following changes to customize the search widget\n behavior:\n\n - To open the results from the web in new tabs instead, add the following\n to the copied code snippet. By default, results from unstructured\n documents open in new tabs, while results from the web open in the same\n page as the widget.\n\n anchorsTarget=\"_blank\"\n\n For example:\n `\u003cgen-search-widget configId=\"...\" anchorsTarget=\"_blank\"\u003e\u003c/gen-search-widget\u003e`\n - To customize the placeholder text inside the search bar, add the following\n to the copied code snippet:\n\n placeholder=\"\u003cvar translate=\"no\"\u003eCUSTOM_PLACEHOLDER\u003c/var\u003e\"\n\n For example:\n `\u003cgen-search-widget configId=\"...\" placeholder=\"Start your search here\"\u003e\u003c/gen-search-widget\u003e`\n - To always show the widget without a trigger, add the following\n to the copied code snippet:\n\n `\u003cgen-search-widget alwaysOpened\u003e\u003c/gen-search-widget\u003e`\n11. Paste the code snippet into your web page.\n\nExample of an embedded public-access widget\n-------------------------------------------\n\nTo see a search widget embedded in a public webpage, see the\n[Try Vertex AI Search](/generative-ai-app-builder/docs/try-it) page.\nThe Try Vertex AI Search search widget\n\n\u003cbr /\u003e\n\nThis search widget works with the following configuration: \n\n \u003cgen-search-widget\n configId=\"123456\"\n anchorsTarget=\"_blank\"\n placeholder=\"Search something about AI Applications\"\n alwaysOpened\u003e\n \u003c/gen-search-widget\u003e"]]
