- Information
- License (MIT)
- Recent Changes
- Supported Languages
- Supported Export Types
- Supported Import Types
- Setup
- Getting Started
- CDN Links
- Navigation
- Shortcut Keys
- API
- Public Functions
- Configuration
- Main Options
- Text Options
- Binding Options
- Basic Options
- Side Menu
- Title Bar
- Yearly Statistics
- Description
- Guide
- Zooming
- ToolTip
- Holiday
- Dynamic Color Range
- Color Range
- Date Formatting
- Custom Triggers
Getting Started
Learn how to prepare your HTML page for Heat.js. This guide explains how to add the necessary script tags, link stylesheets, and structure your markup so you can seamlessly integrate Heat.js and display fully interactive heat maps on your website.
Before proceeding, ensure that Heat.js is installed or downloaded and properly set up in your project.
Prerequisites
Make sure you include the "DOCTYPE html" tag at the top of your HTML, as follows:
<!DOCTYPE html>
Include CSS File
Include the following CSS file:
<link rel="stylesheet" href="dist/heat.min.js.css">
Include JS File
Include the following JavaScript file:
<script src="dist/heat.min.js"></script>
Create DOM Element
Add a new DOM element to house the Heat.js instance:
<div id="heat-map" id="heat-map" data-heat-js="{ 'defaultView': 'map' }"></div>