Embed Dashboard on external web page with search

Elastic Stack Kibana
1

Hi,
I want to embed a kibana dashboard on an external html page. To do this I took the dashboard as iframe code via 'Share' and created the following simple page:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beschreibung der Seite (erscheint in der Titelzeile des Browsers)</title>
  </head>
  <body>
    <p>Text</p>
	<iframe src="http://localhost/s/covid-19/app/kibana#/dashboard/04f3e100-cb2d-11ea-b1a9-ebac69026579?embed=true&embed=true&_g=(filters:!(),refreshInterval:(pause:!t,value:0),time:(from:'2020-03-01T09:15:05.533Z',to:now))&_a=(description:'',filters:!(),fullScreenMode:!f,options:(hidePanelTitles:!f,useMargins:!t),panels:!((embeddableConfig:(hiddenLayers:!(),isLayerTOCOpen:!t,mapCenter:(lat:49.75727,lon:16.46524,zoom:3.44),openTOCDetails:!()),gridData:(h:26,i:'54663f94-7ee9-4191-85e3-4db560093769',w:25,x:0,y:0),id:facc4210-c048-11ea-b1a9-ebac69026579,panelIndex:'54663f94-7ee9-4191-85e3-4db560093769',type:map,version:'7.7.0'),(embeddableConfig:(),gridData:(h:12,i:'541cfc24-5b01-4359-917d-56a30cbcf344',w:22,x:25,y:0),id:'8f2bca40-b2c3-11ea-8ed3-753c0c5455ee',panelIndex:'541cfc24-5b01-4359-917d-56a30cbcf344',type:visualization,version:'7.7.0'),(embeddableConfig:(),gridData:(h:13,i:a2ea6e58-56ea-4731-a7a0-66b2f951f76c,w:22,x:25,y:12),id:bbf326d0-b26f-11ea-8ed3-753c0c5455ee,panelIndex:a2ea6e58-56ea-4731-a7a0-66b2f951f76c,type:visualization,version:'7.7.0')),query:(language:kuery,query:''),timeRestore:!t,title:'Dashboard%20-%20Question1',viewMode:view)" height="600" width="800"></iframe>
  </body>
</html>

In Kibana I have a line above the dashboard where I can search and filter the time. Is there any way I can export this bar with the dashboard?
Or how can I search on my external page and set the time period for all visualizations of the dashboard at the same time?

Many thanks already :slight_smile:

1 Like
2

If you remove embed=true from the URL, it should include the full view of Kibana in the iframe, including the query bar.

However, keep in mind that this also exposes the navigation, so I'd recommend using this in conjunction with feature controls to hide any nav items you don't want visible.

Another important thing to remember is that feature controls are not a security feature; they simply hide UI elements. Users will still have access to the Kibana APIs even if things are hidden via feature controls. The recommended best practice for embedding a dashboard in an iframe is to create a dedicated user account in Kibana which is locked down to the minimum necessary permissions.

3

Hi lukeelmers,
thank you for your quick reply! Your hints were very helpful and solved my problem.
Best regards
Jana

4

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.