Compartilhar via


Configurar a experiência de interface do usuário hospedada

Aviso

Em 30 de outubro de 2020, as APIs de Pesquisa do Bing foram migradas dos serviços de IA do Azure para os Serviços de Pesquisa do Bing. Esta documentação é fornecida apenas para referência. Para obter a documentação atualizada, consulte a documentação da API de pesquisa do Bing. Para obter instruções sobre como criar novos recursos do Azure para a Pesquisa do Bing, consulte Criar um recurso de Pesquisa do Bing por meio do Azure Marketplace.

A Pesquisa Personalizada do Bing oferece uma interface de usuário hospedada que pode ser facilmente integrada aos seus aplicativos e páginas da Web como um snippet de código JavaScript. Usando o portal de Pesquisa Personalizada do Bing, configure o layout, a cor e as opções de pesquisa da interface do usuário.

Configure a interface de usuário hospedada e personalizada

Para configurar uma interface do usuário hospedada para os aplicativos Web, siga essas etapas. Ao fazer alterações, o painel à direita lhe fornecerá uma visualização da sua interface do usuário. Os resultados da pesquisa exibidos não são os resultados reais da instância.

  1. Entre no portal da Pesquisa Personalizada do Bing.

  2. Selecione a sua instância de Pesquisa Personalizada do Bing.

  3. Clique na guia Interface do Usuário Hospedada.

  4. Selecione um layout.

    • Barra de pesquisa e resultados (padrão): exibe uma caixa de pesquisa com os resultados abaixo dela.
    • Somente os resultados: exibe apenas os resultados da pesquisa sem uma caixa de pesquisa. Ao usar esse layout, forneça a consulta de pesquisa (&q=<query string>). Adicione o parâmetro de consulta para a URL solicitada no snippet de JavaScript ou o link de ponto de extremidade de HTML.
    • Pop-over: mostra uma caixa de pesquisa com os resultados da pesquisa em uma sobreposição deslizante.
  5. Selecione um tema de cor. Personalize as cores de acordo com seu aplicativo clicando em Personalizar tema. Para alterar uma cor, insira o valor RGB HEX da cor (por exemplo, #366eb8) ou clique na caixa de texto correspondente.

    Você pode visualizar as alterações no lado direito do portal. Ao clicar em Redefinir para padrão, suas escolhas voltarão para as cores padrão no tema selecionado.

    Observação

    Considere a acessibilidade ao escolher as cores.

  6. Em Configurações adicionais, forneça os valores conforme apropriado para o seu aplicativo. Essas configurações são opcionais. Para ver o efeito da aplicação ou remoção delas, veja o painel de visualização à direita. Há três opções de configuração disponíveis:

  7. Insira a chave de assinatura da pesquisa ou escolha uma na lista suspensa. A lista suspensa é preenchida com chaves de assinaturas da sua conta do Azure. Confira Conta de API dos serviços de IA do Azure.

  8. Se você habilitou a sugestão automática, insira a chave de assinatura de sugestão automática ou escolha uma na lista suspensa. A lista suspensa é preenchida com chaves de assinaturas da sua conta do Azure. A Sugestão Automática Personalizada exige um preço de assinatura específico, consulte o preço.

Publicar ou reverter

As alterações de uma instância de Pesquisa Personalizada devem ser realizadas na guia Configuração guia para que você possa validar as alterações. Quando você terminar de fazer as alterações e estiver pronto para publicar, clique em Publicar. As alterações não serão refletidas em seus pontos de extremidade de produção até que você publique.

Antes de publicar, se você decidir que não deseja manter as alterações feitas, clique em Reverter. Ao reverter as alterações, a configuração de estado ativo não é alterada e a guia Configuração é revertida para corresponder ao estado ativo.

Consumir interface do usuário personalizada

Para consumir a interface de usuário hospedada:

  • Inclua o script em sua página da Web

    <html>
        <body>
            <script type="text/javascript" 
                id="bcs_js_snippet"
                src="https://ui.customsearch.ai /api/ux/rendering-js?customConfig=<YOUR-CUSTOM-CONFIG-ID>&market=en-US&safeSearch=Moderate&version=latest&q=">
            </script>
        </body>    
    </html>
    
  • Outra opção é usar a seguinte URL em um navegador da Web.

    https://ui.customsearch.ai/hosted?customConfig=YOUR-CUSTOM-CONFIG-ID

    Observação

    Adicione os seguintes parâmetros de consulta à URL conforme necessário. Para obter informações sobre esses parâmetros, consulte a referência API de Pesquisa Personalizada.

    • q
    • mkt
    • safesearch
    • setlang

    Importante

    A página não pode exibir a política de privacidade ou outros avisos e termos. A adequação para o seu uso pode variar.

Para obter informações adicionais, incluindo a ID de Configuração Personalizada, acesse Pontos de extremidade na guia Produção.

Opções de configuração

Configure o comportamento de sua interface do usuário hospedada ao clicar em Configurações adicionaise fornecer os valores. Essas configurações são opcionais. Para ver o efeito da aplicação ou remoção delas, veja o painel de visualização à direita.

Configurações de pesquisa da Web

  • Resultados da Web habilitados: determina se a pesquisa na Web está habilitada (uma guia da Web será exibida na parte superior da página).
  • Habilitar sugestão automática: determina se a sugestão automática personalizada está habilitada (confira preço para informações sobre custos adicionais).
  • Resultados por página da Web: número de resultados da pesquisa na Web a exibir de cada vez (o máximo é de 50 resultados por página).
  • Legenda da imagem: determina se as imagens são exibidas com os resultados da pesquisa.

As configurações a seguir serão mostradas se você clicar em Mostrar configurações avançadas:

  • Realçar palavras: determina se os resultados são exibidos com os termos de pesquisa em negrito.
  • Destino do link: determina se a página da Web será aberta em uma nova guia do navegador (em branco) ou na mesma guia do navegador (própria) quando o usuário clicar em um resultado de pesquisa.

Configurações de pesquisa de imagem

  • Resultados da imagem habilitados: determina se a pesquisa de imagem está habilitada (uma guia de imagens será exibida na parte superior da página).
  • Resultados de imagem por página: número de resultados da pesquisa de imagens a exibir de cada vez (o máximo é de 150 resultados por página).

A configuração a seguir será mostrada se você clicar em Mostrar configurações avançadas.

  • Habilitar filtros: adiciona filtros que o usuário pode usar para filtrar as imagens que o Bing retorna. Por exemplo, o usuário pode filtrar os resultados somente para GIFs animados.

Configurações de pesquisa de vídeo

  • Resultados de vídeos habilitados: determina se a pesquisa de vídeo está habilitada (uma guia de vídeos será exibida na parte superior da página).
  • Resultados de vídeo por página: número de resultados da pesquisa de vídeos a exibir de cada vez (o máximo é de 150 resultados por página).

A configuração a seguir será mostrada se você clicar em Mostrar configurações avançadas.

  • Habilitar filtros: adiciona filtros que o usuário pode usar para filtrar os vídeos que o Bing retorna. Por exemplo, o usuário pode filtrar os resultados para vídeos com uma determinada resolução ou vídeos descobertos nas últimas 24 horas.

Configurações diversas

  • Título da página: texto exibido na área de título da página de resultados da pesquisa (não para o layout de pop-over).
  • Tema da barra de ferramentas: determina a cor da tela de fundo da área de título da página de resultados da pesquisa.

As configurações a seguir serão mostradas se você clicar em Mostrar configurações avançadas.

Column1 Column2
Espaço reservado para texto de caixa de pesquisa Texto exibido na caixa de pesquisa antes da entrada.
URL do link de título Destino para o link do título.
URL do logotipo Imagem exibida ao lado do título.
Favicon Ícone exibido na barra de título do navegador.

As configurações a seguir serão aplicáveis somente se você consumir a interface do usuário hospedada pelo ponto de extremidade HTML (não serão aplicáveis se você usar o snippet de JavaScript).

  • Título da página
  • Tema da barra de ferramentas
  • URL do link de título
  • URL do logotipo
  • URL do Favicon

Próximas etapas