Install and Configure Knowledge Widget with Webmaster Tools

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 from within Webmaster Tools.

This article also explains the options and settings you can configure to make Bing Knowledge Widget work optimally with your site using settings and how to store these settings without ever having to change the code snippet you use on your site.

 

noteNote
Bing Knowledge Widget is currently in beta. During beta the results are optimized for entities in English (United States). Keep an eye on our blog to hear about future updates.

How to Get and Embed the Code

You can create multiple Knowledge widgets each with their own settings. To get the code snippet for a Bing Knowledge Widget, follow these steps:

  • Navigate to the Knowledge Widgets tool by tapping or clicking Widgets > Knowledge Widget in the navigation menu.
  • Next, In the Knowledge Widget screen, enter a friendly name for your widget to make it easier to find later, and click or tap Create.
  • Next you will see the Knowledge Widget Settings screen. Locate the Copy Code button and tap or click it to copy the code to your clipboard.
  • At this point you can already paste the code you just copied into your web site's or blog's page source, for example just before the closing </body> tag. Any settings you make for this widget will stored in the cloud and will not require changing the code again (in fact, we use the data-id atrribute as the key to lookup settings).
  • 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.
Get the Code for Bing Knowledge Widget inside Webmaster Tools

Knowledge Widget Settings

If you want to customize how Bing Knowledge Widget works, go to the Settings section and make the choices you want. You don't have to change the code you embedded as settings are stored in the cloud.

Knowledge Widget Settings for Visualization

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 4 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.
  4. Interactive only: when you select this option, widget will only detect entities when someone selects text on your page by highlighting it and show information when the user clicks the Bing logo that appears.

You can select one of these four 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.

Previewing Your Settings

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.

Explicitly Blocking Text from Being Marked-Up as Entities

To prevent a specific word or phrase from being marked up by Bing Knowledge Widget you can add a Text Block. To create a Text Block, use the following steps:

  • Navigate to the Knowledge Widgets tool by tapping or clicking
  • Widgets > Knowledge Widget in the navigation menu.
  • In the gray bar at the top, select the scope to which the Text Block applies in the Text block scope drop-down menu.
    • Site-Wide if the Text Block should be valid for your entire site, or
    • Page-Level if it should only apply to a single page
  • Click or tap Go
  • In the Text to block text box, enter the text you would like to not be marked up
  • You can set an expiration in the Days to expire drop down.
  • Select the Case Sensitive check box if the block should respect casing.
  • Click Block to add the text block. Note that it can take some time for the text block to become active (up to 4 hours).

Manually Configurable Attributes

All of the following values can be more easily configured using the settings in the Knowledge Widget Settings page, which has the added benefit that you never have to update your code on the page. However, the table shows all attributes you can edit inside the <script> tag if so inclined, what section in the settings user interface they correspond to and what their meaning is.

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
  • interactiveonly: detected and show entities only when a user selects text and clicks the Bing link.
 
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.
  • hidden: hide the entity images carousel alongside the page.
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.