Essity Hotspots 1.0.14
An interactive hotspot component for Baby retailer sites.
Installation
NPM
npm install essity-hotspot --save
import 'essity-hotspot/dist/main.css'
import { initialize } from 'essity-hotspot'
initialize()
The package will attach to any element with the data-hotspot-configuration-id
attribute, e.g.
<div data-hotspot-configuration-id="1066">
<!-- hotspot component for Libero Pant will appear here -->
</div>
If an element is dynamically added to the DOM, you can use the initialize(settings, element)
overload to pass the target element:
initialize({
hotspotConfigurationId: '1066'
}, document.getElementById('hotspot-component'))
Direct download
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/essity-hotspot/dist/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/essity-hotspot/dist/index.js"></script>
The library will be exposed (in a UMD compatible manner) on the global namespace usingwindow.essityHotspots
:
essityHotspots.initialize(/* optional settings */)
Parameters
Currently, there are 13 configuration setups available:
Description | Theme | Configuration Id |
---|---|---|
Libero Pant | Baby Love | 1066 |
Ibiza OD | Lotus Baby | 1225 |
lbiza PD | Lotus Baby PD | 1226 |
Libero OD Newborn | Libero OD Newborn | 1227 |
Libero OD Comfort | Libero OD Comfort | 1228 |
Libero OD Touch (3-7) | Libero OD Touch | 1229 |
Libero PD Touch | Libero PD Touch | 1230 |
Libero PD Up&Go | Libero PD Up&Go | 1231 |
LittleAngel_PD | LittleAngel_PD | 1232 |
Touch (prema-2) | Libero OD Touch | 1233 |
Libero Open Daiper, Sizes 0 | Baby Love | 1109 |
Libero Open Daiper, Sizes 1-2 | Baby Love | 1117 |
Libero Open Daiper, Sizes 3-7 | Baby Love | 1091 |
They are available in the following languages using the culture
parameter:
English: en-US
Nederlands: nl-NL
Deutsch: de-DE
Français: fr-FR
If you omit the parameter, en-US
will be used as default.