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 começando com Configurar resultados para o widget de pesquisa. Não é possível ajustar o estilo do widget de pesquisa na 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:

• Token de autorização: o widget usa um token JWT ou OAuth fornecido pela sua base de código. Você precisa ter seu próprio servidor para gerar um token. O token de autenticação é usado para fazer uma chamada de API em nome do usuário ou da conta de serviço. Ao gerar o token de autenticação, use o escopo OAuth https://www.googleapis.com/auth/cloud-platform.

  • Para interações de servidor para servidor com contas de serviço:consulte Usar o OAuth 2.0 para aplicativos de servidor para servidor na documentação de autorização.

  • Para aplicativos da Web JavaScript:consulte OAuth 2.0 para aplicativos da Web do lado do cliente na documentação de autorização.

  Observação: se você selecionou um pool de força de trabalho para controlar o acesso aos dados do app, adquira tokens de curta duração para a federação de identidade da força de trabalho.

• Acesso público: o widget não restringe quem pode acessar os resultados de uma consulta de pesquisa.

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

1. No Console do Google Cloud, acesse a página Criador de agentes.

   Agent Builder.

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

3. Clique em Integração.

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 de 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 no subdomínio, digite cymbal.example.com.

      Se você quiser testar o widget no seu 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: 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.

    Para abrir os resultados da Web em novas guias, adicione o seguinte ao snippet de código copiado:

    anchorsTarget="_blank"
    

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

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

    Observação: se você selecionou um pool de força de trabalho para controlar o acesso aos dados do app, adquira tokens de curta duração para a federação de identidade da força de trabalho.

12. Para transmitir o token de autorização ao widget, use o segundo snippet de código, "// Set authorization token", fornecido na seção Copiar 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 token novo periodicamente repetindo a etapa anterior antes que o token atual expire.

Adicionar um widget com acesso público

1. No Console do Google Cloud, acesse a página Criador de agentes.

   Agent Builder.

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 Integração.

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 de 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 seu 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: 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.

    Para abrir os resultados da Web em novas guias, adicione o seguinte ao snippet de código copiado:

    anchorsTarget="_blank"
    

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

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