Embedding WebDataRocks is a simple and quick process. If you haven’t get your copy of our reporting tool, you can get it by leaving a request.

Please follow the steps:

  1. Include
  2. Add your data
  3. See our reporting tool in your website

Step 1: Include

Open your HTML file and between <body> tags include the code from the email we have sent you. This will load WebDataRocks into your application. Please note, here we include sample links which do not work. You need to include your personal code from the email.

<html>
<head></head>
<body>
<div id="wdr-component"></div>
<link href="https://cdn.webdatarocks.com/your-personal-code/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/your-personal-code/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/your-personal-code/webdatarocks.js"></script>
<script>
var pivot = new WebDataRocks({
	container: "#wdr-component",
	toolbar: true,
	report: {
		dataSource: {
			filename: "https://cdn.webdatarocks.com/data/data.csv"
		}
	}
});
</script>
</body>
</html>

You can see how this code is working in our live demo on CodePen.

Step 2: Add your data

Add your own file with JSON or CSV data by specifying the URL to your file in filename:

filename: "URL-to-your-CSV-or-JSON-file"

Step 3: See our reporting tool in your website

Hooray! WebDataRocks is embedded and ready to use.

Next steps