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.

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.8.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.24/moment.min.js"></script>
<script type="text/javascript" src="http://funnelback.server/s/resources-global/thirdparty/handlebars-4.1/handlebars.min.js"></script>
<script type="text/javascript" src="http://funnelback.server/s/resources-global/js/funnelback.knowledge-graph-2.8.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

  • es6-promise - polyfill version of JS Promise (required by Internet Explorer, at least v4.2.5)

  • jQuery (at least v1.10.2)

  • Handlebars - JS templating (at least v4.0.10)

  • Moment.js - dates handle (at least v2.18.2)

  • NProgress - progress bar handle (at least v0.2.0)

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.

  • field.callback Define a callback applied to a field before rendering it.

  • field.display Define a way to display multi-value fields.

  • field.separator: Define a separator used when displaying multi-value fields.

  • iconPrefix: Define a CSS class prefix used to display icons.

  • maxBreadcrumb: Define a number of links in breadcrumb to display.

  • maxPagination: Define a range of pages to display in list.

  • maxResults: Define a 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.

  • urlPrefix: Define path to prefix relative results URLs with

See also

© 2015- Squiz Pty Ltd