Nota:Vertex AI Search verrà rinominato Agent Search. Stiamo aggiornando i contenuti per riflettere il nuovo brand.

Aggiungere il widget di ricerca a una pagina web

Questa pagina descrive come aggiungere la funzionalità di ricerca a un sito web utilizzando il widget Ricerca.

Prima di iniziare

Prima di aggiungere un widget Ricerca alla pagina web, assicurati di configurare il tuo widget Ricerca, a partire da Configurare i risultati per il widget Ricerca. Tieni presente che non è possibile modificare lo stile del widget Ricerca nella pagina web.

Procedure

La procedura per aggiungere il widget Ricerca alla pagina web varia a seconda del tipo di autorizzazione scelto:

Token di autorizzazione: il widget utilizza un token JWT o OAuth fornito da il codebase. Devi avere il tuo server che puoi utilizzare per generare un token. Il token di autenticazione viene utilizzato per effettuare una chiamata API per conto dell'utente o del account di servizio. Quando generi il token di autenticazione, utilizza l'ambito OAuth https://www.googleapis.com/auth/cloud-platform.
- Per le interazioni da server a server con i service account: consulta Utilizzo di OAuth 2.0 per applicazioni da server a server nella documentazione sull'autorizzazione.
- Per le applicazioni web JavaScript: consulta OAuth 2.0 per applicazioni web lato client nella documentazione sull'autorizzazione.
Nota: se hai selezionato un pool di forza lavoro per controllare l'accesso ai dati della tua app, ottieni token di breve durata per la federazione di identità della forza lavoro.
Accesso pubblico: il widget non limiterà gli utenti che possono ottenere risultati da una query di ricerca.

Aggiungere un widget che utilizza un token di autorizzazione

Nella Google Cloud console, vai alla pagina AI Applications.

AI Applications
Fai clic sul nome dell'app che vuoi modificare.
Fai clic su Integrazione.
Fai clic sulla scheda Widget.
Seleziona Basato su JWT o OAuth come tipo di autorizzazione del widget.
Specifica il nome di dominio per la pagina del widget:
1. Inserisci il nome di dominio della pagina in cui verrà visualizzato il widget.
  
  Ad esempio, se copi il widget nelle pagine example.com/ai.html e cymbal.example.com/search.html, inserisci example.com come dominio. Se vuoi che il widget funzioni solo su una pagina del sottodominio, inserisci cymbal.example.com.
  
  Se vuoi testare il widget sul tuo localhost, inserisci localhost.
2. Fai clic su Aggiungi.
Ripeti il passaggio 6 per ogni dominio in cui verrà visualizzato il widget.
Fai clic su Salva.
Copia lo snippet di codice fornito nella sezione Copia il seguente codice nella tua applicazione web.
(Facoltativo) Apporta le seguenti modifiche per personalizzare il comportamento del widget Ricerca:
- Per aprire i risultati del web in nuove schede, aggiungi quanto segue allo snippet di codice copiato. Per impostazione predefinita, i risultati dei documenti non strutturati vengono aperti in nuove schede, mentre i risultati del web vengono aperti nella stessa pagina del widget.
```
anchorsTarget="_blank"
```
  Ad esempio: <gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>
- Per personalizzare il testo segnaposto all'interno della barra di ricerca, aggiungi quanto segue allo snippet di codice copiato:
```
placeholder="CUSTOM_PLACEHOLDER"
```
  Ad esempio: <gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>
- Per mostrare sempre il widget senza un trigger, aggiungi quanto segue allo snippet di codice copiato:
```
alwaysOpened
```
  Ad esempio: <gen-search-widget alwaysOpened></gen-search-widget>
Nel codebase, genera un token di autorizzazione.

Nota: se hai selezionato un pool di forza lavoro per controllare l'accesso ai dati della tua app, allora ottieni token di breve durata per la federazione di identità della forza lavoro.
Per passare il token di autorizzazione al widget, utilizza il secondo snippet di codice, "// Set authorization token", fornito nella sezione Copia il seguente codice nella tua applicazione web e sostituisci il testo <JWT or OAuth token provided by you backend> con il token di autorizzazione.
Imposta periodicamente un nuovo token ripetendo il passaggio precedente prima che scada il token corrente.

Aggiungere un widget con accesso pubblico

Nella Google Cloud console, vai alla pagina AI Applications.

AI Applications
Fai clic sul nome dell'app che vuoi modificare.

Per l'accesso pubblico, assicurati che l'app di ricerca non sia associata a nessun datastore sotto il controllo dell'accesso.
Fai clic su Integrazione.
Fai clic sulla scheda Widget.
Seleziona Accesso pubblico come tipo di autorizzazione del widget.
Specifica il nome di dominio per la pagina del widget:
1. Inserisci il nome di dominio della pagina in cui verrà visualizzato il widget.
  
  Ad esempio, se copi il widget nelle pagine example.com/ai.html e cymbal.example.com/search.html, inserisci example.com come dominio. Se vuoi che il widget funzioni solo sulle pagine del sottodominio, inserisci cymbal.example.com.
  
  Se vuoi testare il widget sul tuo localhost, inserisci localhost.
2. Fai clic su Aggiungi.
Ripeti il passaggio 6 per ogni dominio in cui verrà visualizzato il widget.
Fai clic su Salva.
Copia lo snippet di codice fornito nella sezione Copia il seguente codice nella tua applicazione web.
(Facoltativo) Apporta le seguenti modifiche per personalizzare il comportamento del widget Ricerca:
- Per aprire i risultati del web in nuove schede, aggiungi quanto segue allo snippet di codice copiato. Per impostazione predefinita, i risultati dei documenti non strutturati vengono aperti in nuove schede, mentre i risultati del web vengono aperti nella stessa pagina del widget.
```
anchorsTarget="_blank"
```
  Ad esempio: <gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>
- Per personalizzare il testo segnaposto all'interno della barra di ricerca, aggiungi quanto segue allo snippet di codice copiato:
```
placeholder="CUSTOM_PLACEHOLDER"
```
  Ad esempio: <gen-search-widget configId="..." placeholder="Start your search here"></gen-search-widget>
- Per mostrare sempre il widget senza un trigger, aggiungi quanto segue allo snippet di codice copiato:
  
  <gen-search-widget alwaysOpened></gen-search-widget>
Incolla lo snippet di codice nella pagina web.

Esempio di widget con accesso pubblico incorporato

Per vedere un widget Ricerca incorporato in una pagina web pubblica, consulta Provalo!.

Come appare il widget sempre aperto — Il widget Ricerca Provalo per la ricerca dell'agente

Questo widget Ricerca funziona con la seguente configurazione:

  <gen-search-widget
    configId="123456"
    anchorsTarget="_blank"
    placeholder="Search the Agent Search documentation"
    alwaysOpened>
  </gen-search-widget>