Skip to content

Knowledge Graph frontend

Adding the Knowledge Graph widget to a website

Basic setup

In order to add Knowledge Graph to your website you need to add some JavaScript code and CSS styling to your page.

You can copy the required JavaScript from the HTML returned by Funnelback, but will need to check that the URL paths are absolute. It should look something like the code below.

Note: you need to ensure that:

  • paths to the JavaScript and CSS files are correct
  • required libraries are included
  • the funnelback.knowledge-graph.js code is included after all required libraries are loaded
  • the funnelback.knowledge-graph.css styling is included
  • widget is assigned to a website element that will trigger Knowledge Graph
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="http://funnelback.server/s/resources-global/thirdparty/es6-promise-4.2.5/es6-promise.auto.min.js"></script>

<link rel="stylesheet" href="http://funnelback.server/s/resources-global/thirdparty/font-awesome-4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="http://funnelback.server/s/resources-global/thirdparty/nprogress-0.2.0/nprogress.min.css" />
<link rel="stylesheet" href="http://funnelback.server/s/resources-global/css/funnelback.knowledge-graph-2.7.0.min.css" />

<script type="text/javascript" src="http://funnelback.server/s/resources-global/js/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://funnelback.server/s/resources-global/thirdparty/nprogress-0.2.0/nprogress.min.js"></script>
<script type="text/javascript" src="http://funnelback.server/s/resources-global/thirdparty/momentjs-2.22.2/moment.min.js"></script>
<script type="text/javascript" src="http://funnelback.server/s/resources-global/thirdparty/handlebars-4.0.12/handlebars.min.js"></script>
<script type="text/javascript" src="http://funnelback.server/s/resources-global/js/funnelback.knowledge-graph-2.7.0.min.js"></script>
<script type="text/javascript">
  jQuery(document).ready(function() {
    jQuery('.trigger-btn').knowledgeGraph({
      apiBase: 'http://funnelback.server/',
      collection: '<collection_name>',
      profile: '_default',
    });
  });
</script>

Dependencies

The following third party code is used for this implementation:

Required

Optional

Configuring the knowledge graph plugin

The Knowledge Graph widget is a JavaScript module that is loaded in the page in order to interact with and display Knowledge Graph sourced from Funnelback.

Widget is configured using the JavaScript Knowledge Graph setup block included within your HTML page (see setup function in the example above).

General configuration

Widget parameters

Required parameters

  • apiBase: The web service URL to fetch Knowledge Graph data from.
  • collection: The collection from where the Knowledge Graph data should be sourced.
  • profile: The profile (within collection) where the Knowledge Graph data should be sourced.

Content fetch settings

  • targetUrl: Entity URL to fetch initial data.
  • contentAttr: Retrieve target URL from element attribute on a webpage.
  • contentSelector Retrieve target URL from element on a webpage.
  • contentType Retrieve target URL from element text or attribute on a webpage.

Search settings

Share settings

Display settings

  • dateFormat: Define a format of date to display.
  • iconPrefix: Define CSS class prefix used to display icons.
  • maxBreadcrumb: Define number of links in breadcrumb to display.
  • maxPagination: Define range of pages to display in list.
  • maxResults: Define number of results to display per page in list.
  • trigger: Define how Knowledge Graph widget will be triggered on a webpage.
  • events: Define custom actions to perform on events that are triggered when interacting with Knowledge Graph widget.

See also

top

Funnelback logo
v15.18.0