@nonconforme/stencil-hotjar
v0.0.18
Published
Stencil Hotjar Plugin
Downloads
6,480
Readme
@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
Contributing
Please see our Contributor Code of Conduct for information on our rules of conduct.