Ajouter le widget de recherche à une page Web

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 de recherche à votre page Web, assurez-vous de le configurer, en commençant par Configurer les résultats du widget de 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 varie 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'autorisation 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'autorisation, utilisez le champ d'application OAuth https://www.googleapis.com/auth/cloud-platform.

  • Pour les interactions de serveur à serveur avec des comptes de service:consultez Utiliser OAuth 2.0 pour les applications de serveur à serveur dans la documentation sur l'autorisation.

  • Pour les applications Web JavaScript:consultez OAuth 2.0 pour les applications Web côté client dans la documentation sur l'autorisation.

• Accès public: le widget n'applique pas de restriction concernant les personnes pouvant obtenir les résultats d'une requête de recherche.

Ajouter un widget qui utilise un jeton d'autorisation

1. Dans la console Google Cloud , accédez à la page AI Applications.

   AI Applications

2. Cliquez sur le nom de l'application que vous souhaitez modifier.

3. Cliquez sur Integration (Intégration).

4. Cliquez sur l'onglet Widget.

5. Sélectionnez le type d'autorisation de widget Basé sur JWT ou OAuth.

6. Spécifiez le nom de domaine de la page du widget:

   1. 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 ne souhaitez que le widget fonctionne sur une page du sous-domaine, saisissez cymbal.example.com.

      Si vous souhaitez tester le widget sur votre localhost, saisissez localhost.

   2. Cliquez sur Ajouter.

7. Répétez l'étape 6 pour chaque domaine sur lequel le widget s'affichera.

8. Cliquez sur Enregistrer.

9. Copiez l'extrait de code fourni dans la section Copiez le code suivant dans votre application Web.

10. Facultatif: apportez les modifications suivantes pour personnaliser le comportement du widget de recherche:

    • Pour ouvrir les résultats du Web dans de nouveaux onglets, ajoutez ce qui suit à l'extrait de code copié. Par défaut, les résultats des documents non structurés s'ouvrent dans de nouveaux onglets, tandis que les résultats 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 d'espace réservé dans la barre de recherche, ajoutez ce qui suit à l'extrait de code copié:

      placeholder="CUSTOM_PLACEHOLDER"
      

      Par exemple : <gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>

    • Pour afficher toujours le widget sans déclencheur, ajoutez ce qui suit à l'extrait de code copié:

      alwaysOpened
      

      Par exemple : <gen-search-widget alwaysOpened></gen-search-widget>

11. Dans votre codebase, générez un jeton d'autorisation.

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

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

1. Dans la console Google Cloud , accédez à la page AI Applications.

   AI Applications

2. 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 des accès.

3. Cliquez sur Integration (Intégration).

4. Cliquez sur l'onglet Widget.

5. Sélectionnez Accès public comme type d'autorisation de widget.

6. Spécifiez le nom de domaine de la page du widget:

   1. 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 ne souhaitez que le widget fonctionne sur les pages du sous-domaine, saisissez cymbal.example.com.

      Si vous souhaitez tester le widget sur votre localhost, saisissez localhost.

   2. Cliquez sur Ajouter.

7. Répétez l'étape 6 pour chaque domaine sur lequel le widget s'affichera.

8. Cliquez sur Enregistrer.

9. Copiez l'extrait de code fourni dans la section Copiez le code suivant dans votre application Web.

10. Facultatif: apportez les modifications suivantes pour personnaliser le comportement du widget de recherche:

    • Pour ouvrir les résultats du Web dans de nouveaux onglets, ajoutez ce qui suit à l'extrait de code copié. Par défaut, les résultats des documents non structurés s'ouvrent dans de nouveaux onglets, tandis que les résultats 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 d'espace réservé dans la barre de recherche, ajoutez ce qui suit à l'extrait de code copié:

      placeholder="CUSTOM_PLACEHOLDER"
      

      Par exemple : <gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>

    • Pour afficher toujours le widget sans déclencheur, ajoutez ce qui suit à l'extrait de code copié:

      <gen-search-widget alwaysOpened></gen-search-widget>

11. Collez l'extrait de code dans votre page Web.

Exemple de widget public intégré

Pour voir un widget de recherche intégré à une page Web publique, consultez la page Essayez 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>