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 di ricerca.

Prima di iniziare

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

Procedure

La procedura per aggiungere il widget di ricerca alla tua pagina web varia a seconda del tipo di autorizzazione che scegli:

• Token di autorizzazione: il widget utilizza un token JWT o OAuth fornito dal tuo codebase. Devi disporre di un server che puoi utilizzare per generare un token. Il token di autenticazione viene utilizzato per effettuare una chiamata API per conto dell'utente o delaccount di serviziot. Quando generi il token di autorizzazione, 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 la sezione OAuth 2.0 per applicazioni web lato client nella documentazione sull'autorizzazione.

  Nota: se hai selezionato un pool della forza lavoro per controllare l'accesso ai dati della tua app, ottieni token di breve durata per la federazione delle 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

1. Nella Google Cloud console, vai alla pagina AI Applications.

   Applicazioni di AI

2. Fai clic sul nome dell'app da modificare.

3. Fai clic su Integrazione.

4. Fai clic sulla scheda Widget.

5. Seleziona Basato su JWT o OAuth come tipo di autorizzazione del widget.

6. Specifica il nome di dominio della 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 su localhost, inserisci localhost.

   2. Fai clic su Aggiungi.

7. Ripeti il passaggio 6 per ogni dominio in cui verrà visualizzato il widget.

8. Fai clic su Salva.

9. Copia lo snippet di codice fornito nella sezione Copia il seguente codice nella tua applicazione web.

10. (Facoltativo) Apporta le seguenti modifiche per personalizzare il comportamento del widget di ricerca:

    • Per aprire i risultati del web in nuove schede, aggiungi il seguente codice allo snippet di codice copiato. Per impostazione predefinita, i risultati dei documenti non strutturati si aprono in nuove schede, mentre i risultati del web si aprono 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>

11. Nel codebase, genera un token di autorizzazione.

    Nota: se hai selezionato un pool della forza lavoro per controllare l'accesso ai dati della tua app, allora ottieni token di breve durata per la federazione delle identità della forza lavoro.

12. Per passare il token di autorizzazione al widget, usa 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.

13. Imposta periodicamente un nuovo token ripetendo il passaggio precedente prima che scada il token attuale.

Aggiungere un widget con accesso pubblico

Nota: se la tua organizzazione richiede l'applicazione dei Controlli di servizio VPC per proteggere i dati, non utilizzare l'accesso pubblico per l'autorizzazione dei widget.

1. Nella Google Cloud console, vai alla pagina AI Applications.

   Applicazioni di AI

2. Fai clic sul nome dell'app da modificare.

   Per l'accesso pubblico, assicurati che l'app di ricerca non sia associata a nessun datastore in controllo dell'accesso.

3. Fai clic su Integrazione.

4. Fai clic sulla scheda Widget.

5. Seleziona Accesso pubblico come tipo di autorizzazione del widget.

6. Specifica il nome di dominio della 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 su localhost, inserisci localhost.

   2. Fai clic su Aggiungi.

7. Ripeti il passaggio 6 per ogni dominio in cui verrà visualizzato il widget.

8. Fai clic su Salva.

9. Copia lo snippet di codice fornito nella sezione Copia il seguente codice nella tua applicazione web.

10. (Facoltativo) Apporta le seguenti modifiche per personalizzare il comportamento del widget di ricerca:

    • Per aprire i risultati del web in nuove schede, aggiungi il seguente codice allo snippet di codice copiato. Per impostazione predefinita, i risultati dei documenti non strutturati si aprono in nuove schede, mentre i risultati del web si aprono 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>

11. Incolla lo snippet di codice nella pagina web.

Esempio di widget incorporato per l'accesso pubblico

Per visualizzare un widget di ricerca incorporato in una pagina web pubblica, consulta la pagina Prova Vertex AI Search.

Il widget di ricerca Prova Vertex AI Search

Questo widget di ricerca funziona con la seguente configurazione:

  <gen-search-widget
    configId="123456"
    anchorsTarget="_blank"
    placeholder="Search something about AI Applications"
    alwaysOpened>
  </gen-search-widget>