TWIPLA Heatmaps

React library that allows displaying TWIPLA heatmaps.

Installation and usage

Installation

npm install @twipla/heatmaps

Usage

In order to get started with the lightest integration, the following props are mandatory:

• websiteId - the id of the website where the heatmaps were created
• heatmapId - the id of the heatmap
• device - the device from which the heatmap was generated. Possible values are desktop, mobile, and tablet
• event - the event from which the heatmap was generated. Possible values are click, scroll, and move
• token - bearer token used for interacting with the TWIPLA API (note: pass only the token, without Bearer)

import { TwiplaHeatmap } from '@twipla/heatmaps';

const ReactComponent = () => {
  return <TwiplaHeatmap
    websiteId={WEBSITE_ID}
    heatmapId={HEATMAP_ID}
    token={AUTHENTICATION_TOKEN}
    device='desktop'
    event='click'
  />
};

Customization options

In addition to the mandatory props listed above, there are others available:

• loadingNode - will be displayed as long as the API calls are in progress
• errorNode - will be displayed if an error occurs

<TwiplaHeatmap
      //...
      loadingNode={<Loader />}
      errorNode={({ message, status }) => <ErrorNode message={message} status={status} />}
/>

Other props

• onCanvasUpdate - callback that will be called when the canvas is updated. It receives the canvas element as an argument. Can be used to get the canvas element and do something with it (e.g. save it to a file, etc.)

<TwiplaHeatmap
      //...
      onCanvasUpdate={(canvas) => {
        const canvasBlob = canvas.toBlob();
      }}
/>

© TWIPLA, 2025