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.