@nonconforme/stencil-hotjar v0.0.18

@stencil/hotjar

This package is used to integrate Hotjar to your Stencil component.

First, npm install within the project:

npm install @nonconforme/stencil-hotjar --save

Stencil component

First, you need to import the stencil-hotjar module into your StencilJS component.

import { AddHotjarConfiguration, DisplayHotjar, DetectHotjar } from '../../../node_modules/@nonconforme/stencil-hotjar/dist/index';

Next, you have to load the hotjar css to your @Component.

@Component({
  tag: 'my-component',
  styleUrls: [
    '../../../node_modules/@nonconforme/stencil-hotjar/dist/css/hotjar-position.scss'
  ]
})

Next, you have to load the hotjar detection method with an interval timeout. This interval was used to check when hotjar script finished his dom injection.

componentDidLoad() {
    // Detect hotjar script
    DetectHotjar(2000);
    // Add hotjar configuration
    AddHotjarConfiguration(6, environment.hotjar_id, 'hotjarConfig');
}

Next, hotjar was hidden by default. To display the hotjar icon there is a boolean method that display or hide the hotjar div by using css "display" property. You must pass the div ID of your hotjar div.

openCloseHotjar() {
    // Open or close Hotjar
    DisplayHotjar('hotjarServiceDivID');
}

Related

• Nonconforme
• Stencil

Contributing

Please see our Contributor Code of Conduct for information on our rules of conduct.