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.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
- Font Awesome - font and icon toolkit
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
- searchUrl: URL to search endpoint.
- searchParams: Search parameters to pass within search.
Share settings
- shareUrl: URL to share endpoint.
- shareParams: Share parameters to pass within share URl.
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