What is Embedding?


Embedding allows you to bring Looker reports and dashboards into the tools your employees use the most.
That could be:

  • Public static reports on your website
  • A private authenticated dashboard in your day-to-day tools
  • A full embedded experience within your product for your customers and suppliers


Private Embedding


Private embedding allows you to embed a Look, Explore or dashboard that only Looker users can see. You can embed a Look, dashboard, or Explore by adding /embed/ to the URL. 

https://mycompany.looker.com/looks/4
Becomes 
https://mycompany.looker.com/embed/looks/4


Exercise


  1. Navigate to July Office Hours space

  2. Copy the dashboard Business Pulse into your personal space

  3. Navigate to that copied dashboard

  4. Under the gear menu, select Edit Embed Settings

  5. Edit the dashboard settings, and play around with the visualization options

  6. Navigate to JSFiddle, and add the following HTML code

    7. 
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
	background-color: #F7F7EF;
	font-family: arial;
  font-weight: 100
  font-size: 100px; 
	color: #000000;
  margin:0;
padding:0;
}

.topnav {
  overflow: hidden;
  background-color: #282828;
}

iframe{
    overflow:hidden;
}

.topnav a {
  float: left;
  color: #ffffff;
  text-align: center;
  padding: 24px 24px;
  text-decoration: none;
  font-size: 25px;
}


.topnav a:hover {
  background-color: #525252;
  color: black;
}

.topnav a.active {
  background-color: #525252;
  color: white;
}
</style>
</head>
<body>

<div class="topnav">
<a href="#"><i class="fa fa-area-chart" style="font-size:25px"></i> Analytics</a>
  <a class="active" href="#home">Inventory</a>
  <a href="#news">Shipping</a>
  <a href="#about">Teams</a>
  <a href="#contact">Logout</a>
</div>


<div style="padding-left:16px">
<br>


<iframe src='https://trainembed.corp.looker.com/embed/dashboards/11' width='1200' height='1338' frameborder="0" scrolling="no"></iframe>

</p>
</div>

</body>
</html>
  7. Replace the URL towards the bottom of the file with your embedded dashboard URL.

  8. Run the HTML