Configure su experiencia de interfaz de usuario hospedada.Configure your hosted UI experience

Bing Custom Search proporciona una UI hospedada que puede integrar fácilmente en las aplicaciones web y páginas web como un fragmento de código de JavaScript.Bing Custom Search provides a hosted UI that you can easily integrate into your webpages and web applications as a JavaScript code snippet. Mediante el portal de Bing Custom Search, puede configurar el diseño, el color y las opciones de búsqueda de la UI.Using the Bing Custom Search portal, you can configure the layout, color, and search options of the UI.

Configuración de la interfaz de usuario hospedada personalizadaConfigure the custom hosted UI

Para configurar una interfaz de usuario hospedada para las aplicaciones web, siga estos pasos:To configure a hosted UI for your web applications, follow these steps. A medida que realice cambios, el panel de la derecha le proporcionará una vista previa de la interfaz de usuario.As you make changes, the pane on the right will give you a preview of your UI. Los resultados de búsqueda mostrados no son los resultados reales de la instancia.The displayed search results are not actual results for your instance.

  1. Inicie sesión en el portal de Bing Custom Search.Sign in to Bing Custom Search portal.

  2. Seleccione una instancia de Bing Custom Search.Select your Bing Custom Search instance.

  3. Haga clic en la pestaña Hosted UI (UI hospedada).Click the Hosted UI tab.

  4. Seleccione un diseño.Select a layout.

    Barra de búsqueda y resultados (valor predeterminado)Search bar and results (default) Muestra un cuadro de búsqueda con los resultados de búsqueda debajo de él.Displays a search box with search results below it.
    Solo los resultadosResults only Muestra solo los resultados de búsqueda sin un cuadro de búsqueda.Displays search results only, without a search box. Al utilizar este diseño, debe proporcionar la consulta de búsqueda (&q=<query string>).When using this layout, you must provide the search query (&q=<query string>). Agregue el parámetro de consulta a la dirección URL de solicitud en el fragmento de código de JavaScript o el vínculo de punto de conexión HTML.Add the query parameter to the request URL in the JavaScript snippet, or the HTML endpoint link.
    Ventana emergentePop-over Proporciona un cuadro de búsqueda y muestra los resultados de búsqueda en una superposición deslizante.Provides a search box and displays the search results in a sliding overlay.
  5. Seleccione un tema de color.Select a color theme. Puede personalizar los colores para ajustarse a la aplicación haciendo clic en Personalizar tema.You can customize the colors to fit your application by clicking Customize theme. Para cambiar un color, escriba el valor HEXADECIMAL RGB del color (por ejemplo, #366eb8) o haga clic en la vista previa del color.To change a color, either enter the color's RGB HEX value (for example, #366eb8), or click on the color preview.

    Puede obtener una vista previa de los cambios en el lado derecho del portal.You can preview your changes on the right side of the portal. Al hacer clic en Restablecer valores predeterminados, se revertirán los cambios para volver a los colores predeterminados del tema seleccionado.Clicking Reset to default will revert your changes to the default colors for the selected theme.

    Nota

    Considere la posibilidad de accesibilidad al elegir los colores.Consider accessibility when choosing colors.

  6. En Configuraciones adicionales, proporcione los valores según corresponda para la aplicación.Under Additional Configurations, provide values as appropriate for your app. Estos parámetros son opcionales.These settings are optional. Para ver el efecto de aplicarlos o eliminarlos, consulte el panel de vista previa de la derecha.To see the effect of applying or removing them, see the preview pane on the right. Las opciones de configuración disponibles son las siguientes:Available configuration options are:

  7. Escriba la clave de suscripción de búsqueda o elija una en la lista desplegable.Enter the search subscription key or choose one from the dropdown list. La lista desplegable se completa con las claves de las suscripciones de su cuenta de Azure.The dropdown list is populated with keys from your Azure account's subscriptions. Consulte Creación de una cuenta de Cognitive Services APIs en Azure Portal.See Cognitive Services API account.

  8. Si habilita las sugerencias automáticas, escriba la clave de suscripción de sugerencias automáticas o elija una en la lista desplegable.If you enabled autosuggest, enter the autosuggest subscription key or choose one from the dropdown list. La lista desplegable se completa con las claves de las suscripciones de su cuenta de Azure.The dropdown list is populated with keys from your Azure account's subscriptions. Custom Autosuggest requiere un nivel de suscripción específico, consulte precios.Custom Autosuggest requires a specific subscription tier, see the pricing.

Publicar o revertirPublish or revert

Los cambios que realice en una instancia de Custom Search se llevarán a cabo en la pestaña Configuración para que pueda validar los cambios.Changes you make to a Custom Search instance are made in the Configuration tab so you can validate your changes. Cuando haya terminado de realizar cambios y listo para publicarlos, haga clic en Publicar.When you're done making changes and are ready to publish, click Publish. Los cambios no se reflejan en los puntos de conexión de producción hasta que se lleva a cabo la publicación.Changes are not reflected against your production endpoints until you publish.

Antes de la publicación, si decide que no quiere conservar los cambios realizados, haga clic en Revertir.Before publishing, if you decide that you don't want to keep the changes you've made, click Revert. Si revierte los cambios, la configuración del estado activo no se modificará y la pestaña Configuración se revertirá para coincidir con el estado activo.When you revert your changes, the live state configuration is unchanged and the Configuration tab is reverted to match the live state.

Uso de la IU personalizadaConsume custom UI

Para utilizar la IU hospedada, elija una de estas dos opciones:To consume the hosted UI, either:

  • Incluir el script en la página webInclude the script in your web page

    <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>
    
  • O bien, puede usar la siguiente dirección URL en un explorador web.Or, use the following URL in a Web browser.

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

    Nota

    Agregue los siguientes parámetros de consulta a la dirección URL según sea necesario.Add the following query parameters to the URL as needed. Para más información acerca de estos parámetros, consulte la referencia de Custom Search API.For information about these parameters, see Custom Search API reference.

    • qq
    • mktmkt
    • safesearchsafesearch
    • setlangsetlang

    Importante

    La página no puede mostrar su declaración de privacidad ni otros avisos y términos.The page cannot display your privacy statement or other notices and terms. La idoneidad de su uso puede variar.Suitability for your use may vary.

Para obtener más información, incluido el identificador de configuración personalizada, vaya a Puntos de conexión en la pestaña Producción.For additional information, including your Custom Configuration ID, go to Endpoints under the Production tab.

Opciones de configuraciónConfiguration options

Para configurar el comportamiento de la interfaz de usuario hospedada, haga clic en Configuraciones adicionales y proporcione los valores.You can configure the behavior of your hosted UI by clicking Additional Configurations, and providing values. Estos parámetros son opcionales.These settings are optional. Para ver el efecto de aplicarlos o eliminarlos, consulte el panel de vista previa de la derecha.To see the effect of applying or removing them, see the preview pane on the right.

Configuraciones de búsqueda webWeb search configurations

Resultados web habilitadosWeb results enabled Determina si está habilitada la búsqueda web (verá una pestaña Web en la parte superior de la página).Determines if web search is enabled (you will see a Web tab at the top of the page)
Habilitar las sugerencias automáticasEnable autosuggest Determina si están habilitadas las sugerencias automáticas personalizadas (consulte precios para conocer los posibles costos adicionales).Determines if custom autosuggest is enabled (see pricing for additional cost).
Resultados web por páginaWeb results per page Número de resultados de la búsqueda web para mostrar a la vez (el máximo son 50 resultados por página).Number of web search results to display at a time (the maximum is 50 results per page).
Leyenda de imagenImage caption Determina si las imágenes se muestran con resultados de búsqueda.Determines if images are displayed with search results.

Las configuraciones siguientes se mostrarán si hace clic en Mostrar configuraciones avanzadas:The following configurations are shown if you click Show advanced configurations:

Resaltar palabrasHighlight words Determina si se muestran los resultados con los términos de búsqueda en negrita.Determines if results are displayed with search terms in bold.
Destino del vínculoLink target Determina si la página web se abre en una nueva pestaña del explorador (en blanco) o en la misma pestaña del explorador (suya propia) cuando el usuario hace clic en un resultado de búsqueda.Determines if the webpage opens in a new browser tab (Blank) or the same browser tab (self) when the user clicks a search result.

Configuraciones de búsqueda de imágenesImage search configurations

Resultados de imagen habilitadosImage results enabled Determina si está habilitada la búsqueda de imágenes (verá una pestaña Imágenes en la parte superior de la página).Determines if image search is enabled (you will see an Images tab at the top of the page).
Resultados de imágenes por páginaImage results per page Número de resultados de la búsqueda de imágenes para mostrar a la vez (el máximo son 150 resultados por página).Number of image search results to display at a time (the maximum is 150 results per page).

La configuración siguiente se mostrará si hace clic en Mostrar configuraciones avanzadas.The following configuration is shown if you click Show advanced configurations.

Habilitar filtrosEnable filters Agrega filtros que el usuario puede utilizar para filtrar las imágenes que devuelve Bing.Adds filters that the user can use to filter the images that Bing returns. Por ejemplo, el usuario puede filtrar los resultados para que aparezcan solo GIF animados.For example, the user can filter the results for only animated GIFs.

Configuraciones de búsqueda de vídeosVideo search configurations

Resultados de vídeo habilitadosVideo results enabled Determina si está habilitada la búsqueda de vídeos (verá una pestaña Vídeos en la parte superior de la página).Determines if video search is enabled (you will see a Videos tab at the top of the page).
Resultados de vídeo por páginaVideo results per page Número de resultados de la búsqueda de vídeos para mostrar a la vez (el máximo son 150 resultados por página).Number of video search results to display at a time (the maximum is 150 results per page).

La configuración siguiente se mostrará si hace clic en Mostrar configuraciones avanzadas.The following configuration is shown if you click Show advanced configurations.

Habilitar filtrosEnable filters Agrega filtros que el usuario puede utilizar para filtrar los vídeos que devuelve Bing.Adds filters that the user can use to filter the videos that Bing returns. Por ejemplo, el usuario puede filtrar los resultados de vídeos con una resolución específica o vídeos detectados en las últimas 24 horas.For example, the user can filter the results for videos with a specific resolution or videos discovered in the last 24 hours.

Configuraciones diversasMiscellaneous configurations

Título de la páginaPage title El texto mostrado en el área de título de la página de resultados de búsqueda (no para el diseño de ventana emergente).Text displayed in the title area of the search results page (not for pop-over layout).
Tema de la barra de herramientasToolbar theme Determina el color de fondo del área de título de la página de resultados de la búsqueda.Determines the background color of the title area of the search results page.

Las configuraciones siguientes se mostrarán si hace clic en Mostrar configuraciones avanzadas.The following configurations are shown if you click Show advanced configurations.

Column1Column1 Column2Column2
Marcador de posición de texto del cuadro de búsquedaSearch box text placeholder Texto mostrado en el cuadro de búsqueda antes de la entrada.Text displayed in the search box prior to input.
Dirección URL del vínculo de títuloTitle link url Destino para el vínculo del título.Target for the title link.
URL del logotipoLogo URL Imagen que se muestra junto al título.Image displayed next to the title.
Icono de favoritosFavicon Icono que se muestra en la barra de título del explorador.Icon displayed in the browser's title bar.

Las siguientes configuraciones se aplican solo si usa la interfaz de usuario hospedada mediante el punto de conexión HTML (no se aplican si usa el fragmento de código de JavaScript).The following configurations apply only if you consume the Hosted UI through the HTML endpoint (they don't apply if you use the JavaScript snippet).

  • Título de la páginaPage title
  • Tema de la barra de herramientasToolbar theme
  • Dirección URL del vínculo de títuloTitle link URL
  • URL del logotipoLogo URL
  • Dirección URL del icono de favoritosFaviicon URL

Pasos siguientesNext steps