Bing Knowledge Widget: Installation and Configuration

This article describes how you can install the embed code for Bing Knowledge Widget, a lightweight, robust JavaScript module that can detect entities on your web page and link them to the entity graph of the Bing Knowledge repository. By doing so, it makes the rich information about the entity available to your users within the context of your web page, driving engagement, time-on-site, and user satisfaction. This article also explains the options and settings you can configure to make Bing Knowledge Widget work optimally with your site, both using the configuration UI or by manually changing attributes in code snippet.

 

noteNote
Bing Knowledge Widget is currently in beta. During beta the results are optimized for entities in English (United States). You can share feedback with the team by sending an email to bingknow@microsoft.com.

How to Get the Code

To get the code for Bing Knowledge Widget, go to bing.com/widget/knowledge. Locate the Copy Code button and tap or click it to copy the code to your clipboard.

Get the Code for Bing Knowledge Widget

Next, simply paste the code you just copied into your web site's or blog's page source, for example just before the closing body tag (</body>). Do this for every page you want to enhance with Bing Knowledge Widget or, alternatively, add it to your site or blog template that automatically includes the embed code into every page.

Settings

If you want to customize how Bing Knowledge Widget works, go to the Settings section and make the choices you want. The embed code automatically changes as you make settings, so make sure to copy the embed code again once you are done.

Customize settings for the Bing Knowledge Widget

You can access more settings by using the arrow on the right and Bing Knowledge Widget provides settings for the following aspects:

Visualizing Entities

You can easily configure how you want Bing Knowledge Widget to visualize the entities detected on a page. There are 3 pre-defined options:

  1. Entity Images: when you select this options entities that are detected will appear only as images in a vertical carousel alongside the page.
  2. Entity Images & Links: when you select this options entities that are detected will appear both as images in a vertical carousel alongside the page as well as links within the text of the page. This is the most popular option.
  3. Entity Links: when you select this option, entities that are detected will appear as links within the text of the page.

You can select one of these three options by clicking the Use this button. The button for currently selected option will say Current.

Link Styles

When you have chosen a visualization option that includes entity links, you can set the link style associated with these entity links. You can select from a number of pre-defined options, or, alternatively provide a CSS class name that you have defined yourself already on your website.

Entity Images

When you have chosen a visualization option that includes entity images, you can choose how the carousel of entity images should show when a page first loads. You can choose from the following options:

  1. Auto: this is the default and recommended option and automatically expands or collapses the entity image carousel based on page width and the number of entities detected on the page.
  2. Collapsed: this always hides the carousel when the page first loads, only showing a Bing tab.
  3. Expanded: this always shows the carousel when the page first loads, regardless of page width and number of entities detected.

Shadow

If the Enabled check box is selected, the widget will use a drop shadow to delineate the entity carousel and the entity results page.

Detection Strength

The Detection Strength options help you tweak how aggressive the entity detection should be. It let's you choose from three default strengths: moderate (the default), aggressive (more entities, less precision/relevance), conservative (fewer entities, increased precision and relevance). You can change these settings by moving the slider left or right.

This section also allows you to determine exactly how many entities get marked up once entities have been detected:

  1. Maximum Links: Set the maximum number of links created on the page
  2. Maximum Entity Links: Set the maximum number of links for entity mentions per unique entity.
  3. Maximum Links per Paragraph: Set the maximum number of entity links created within a single paragraph or text block.

Selection

The Selection options help you tweak two things:

  1. Which parts of the page not to detect entities from and
  2. Which parts of the page not to enhance with entity links

Option 1. can be used to tell Bing Knowledge Widget to ignore any text from section of the page that are not specific to the topic of the page. For example a related links section, a top-level navigation that is common across pages, or a footer section. None of the text in areas you have blocked this way will be used to detect entities on the page. You can do this by entering one or more CSS class names (space delimited) of these sections into the input box.

Option 2. can be used to tell Bing Knowledge Widget in which section not to mark up mentions of detected entities. Same as with option 1), you can do this by entering one or more CSS class names (space delimited) of these sections into the input box.

Preview

You can get a quick preview of the widget looks like and how it behaves with the current settings by looking at the sample page in the Preview section. Click Full Page Preview to see a full-screen version of the preview page. Two notes to call out: if you have entered a custom CSS class to use for your entity link style, you will not be able to preview it here. Also, the preview page this is only an approximation and may vary slightly from what the experience will look like on your own page.

Manually Configurable Attributes

Most of the following values can be more easily configured using the settings in the Knowledge Widget configuration page, but this table shows all attributes you can edit inside the <script> tag, what section in the settings user interface they correspond to and what their meaning is. Attributes that are in the script but not mentioned below should not be edited.

Category Attribute Meaning
Visualization
data-visualization
Defines how to visualize and show the detected entities on the page. Possible values are:

  • links: markup detected entity mentions as links
  • images: show detected entities as images alongside the page
  • linksandimages: show detected entities as images alongside the page
 
Visualization
data-linkstyle
CSS class name you want us to add to each of the entity links we create, so you have control over how they look.

However, you can also use your own link style. All you need to do is define a corresponding CSS class and reference it in your page.
Visualization
data-carouselstate
Determines the initial state of the entity image carousel when the page loads. Possible values are:
  • auto: automatically do what’s best depending on page dimensions and detected entities
  • expanded: show the images carousel alongside the page. Users can close the entity image carousel by clicking on the right-pointing arrow icon in the Bing tab.
  • collapsed: hide the entity images carousel alongside the page. Users can invoke the images by clicking on the visible Bing tab.
Detection Strength
data-strength
Determine how we balance recall of entities with precision or accuracy. You can choose between the following:
  • moderate: balance between number of entities detected and precision/accuracy
  • conservative: return fewer entities in favor of more accuracy
  • aggressive: return more entities with a less precision/accuracy.
Linking Strength
data-maxlinks
Set the maximum total number of entity links on a given page.
Linking Strength
data-maxparagraphlinks
Set the maximum total number of entity links in a single paragraph/cohesive text block.
Linking Strength
data-maxentities
Set the maximum number of unique entities that may be marked up as entity links on the page.
Linking Strength
data-maxentitylinks
Set the maximum number of mentions for a unique entity that may be marked up on the page.
Selection
data-extractionignoreclass
Provide one or more CSS class names for sections on that should not be considered for entity detection.
Selection
data-extractionignoreclass
Provide one or more CSS class names (space delimited) for sections on that should not be considered for entity detection. Mentions may still be marked up based on entity detection elsewhere on the page, so to block both detection as well as linking, also add the CSS class names to the value of the
data-ignoreclass
attribute.
Selection
data-ignoreclass
Provide one or more CSS class names (space delimited) for sections on that should not be considered for entity mention linking.