Adicionar o widget de pesquisa a uma página da Web

Esta página descreve como adicionar a funcionalidade de pesquisa a um site usando o widget de pesquisa.

Antes de começar

Antes de adicionar um widget de pesquisa à sua página da Web, configure-o. Comece com Configurar resultados para o widget de pesquisa. Não é possível ajustar o estilo do widget de pesquisa na sua página da Web.

Procedimentos

O procedimento para adicionar o widget de pesquisa à sua página da Web varia de acordo com o tipo de autorização escolhido:

Adicionar um widget que usa um token de autorização

  1. No console Google Cloud , acesse a página Aplicativos de IA.

    Aplicativos de IA

  2. Clique no nome do app que você quer editar.

  3. Clique em Integration.

  4. Clique na guia Widget.

  5. Selecione Com base no JWT ou OAuth como o tipo de autorização do widget.

  6. Especifique o nome de domínio da página do widget:

    1. Insira o nome do domínio da página em que o widget vai aparecer.

      Por exemplo, se você for copiar o widget para as páginas example.com/ai.html e cymbal.example.com/search.html, digite example.com como o domínio. Se você quiser que o widget funcione apenas em uma página do subdomínio, insira cymbal.example.com.

      Se você quiser testar o widget no host local, digite localhost.

    2. Clique em Adicionar.

  7. Repita a etapa 6 para cada domínio em que o widget vai aparecer.

  8. Clique em Salvar.

  9. Copie o snippet de código fornecido na seção Copie o código a seguir para seu aplicativo da Web.

  10. Opcional: faça as seguintes mudanças para personalizar o comportamento do widget de pesquisa:

    • Para abrir os resultados da Web em novas guias, adicione o seguinte ao snippet de código copiado. Por padrão, os resultados de documentos não estruturados são abertos em novas guias, enquanto os resultados da Web são abertos na mesma página do widget.

      anchorsTarget="_blank"

      Por exemplo: <gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>

    • Para personalizar o texto do marcador na barra de pesquisa, adicione o seguinte ao snippet de código copiado:

      placeholder="CUSTOM_PLACEHOLDER"

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

    • Para sempre mostrar o widget sem um gatilho, adicione o seguinte ao snippet de código copiado:

      alwaysOpened

      Por exemplo: <gen-search-widget alwaysOpened></gen-search-widget>

  11. Na sua base de código, gere um token de autorização.

  12. Para passar o token de autorização ao seu widget, use o segundo snippet de código, "// Set authorization token", fornecido na seção Copie o código a seguir no seu aplicativo da Web e substitua o texto <JWT or OAuth token provided by you backend> pelo token de autorização.

  13. Defina um novo token periodicamente repetindo a etapa anterior antes que o token atual expire.

Adicionar um widget com acesso público

  1. No console Google Cloud , acesse a página Aplicativos de IA.

    Aplicativos de IA

  2. Clique no nome do app que você quer editar.

    Para acesso público, verifique se o app de pesquisa não está associado a nenhum repositório de dados em controle de acesso.

  3. Clique em Integration.

  4. Clique na guia Widget.

  5. Selecione Acesso público como o tipo de autorização do widget.

  6. Especifique o nome de domínio da página do widget:

    1. Insira o nome do domínio da página em que o widget vai aparecer.

      Por exemplo, se você for copiar o widget para as páginas example.com/ai.html e cymbal.example.com/search.html, digite example.com como o domínio. Se você quiser que o widget funcione apenas em páginas no subdomínio, digite cymbal.example.com.

      Se você quiser testar o widget no host local, digite localhost.

    2. Clique em Adicionar.

  7. Repita a etapa 6 para cada domínio em que o widget vai aparecer.

  8. Clique em Salvar.

  9. Copie o snippet de código fornecido na seção Copie o código a seguir para seu aplicativo da Web.

  10. Opcional: faça as seguintes mudanças para personalizar o comportamento do widget de pesquisa:

    • Para abrir os resultados da Web em novas guias, adicione o seguinte ao snippet de código copiado. Por padrão, os resultados de documentos não estruturados são abertos em novas guias, enquanto os resultados da Web são abertos na mesma página do widget.

      anchorsTarget="_blank"

      Por exemplo: <gen-search-widget configId="..." anchorsTarget="_blank"></gen-search-widget>

    • Para personalizar o texto do marcador na barra de pesquisa, adicione o seguinte ao snippet de código copiado:

      placeholder="CUSTOM_PLACEHOLDER"

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

    • Para sempre mostrar o widget sem um gatilho, adicione o seguinte ao snippet de código copiado:

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

  11. Cole o snippet de código na sua página da Web.

Exemplo de um widget público incorporado

Para conferir um widget de pesquisa incorporado em uma página da Web pública, acesse a página Testar a Vertex AI para Pesquisa.

Como o widget aparece sempre aberto
O widget de pesquisa "Testar a Vertex AI para Pesquisa"

Esse widget de pesquisa funciona com a seguinte configuração:

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