4. Integration: Vanilla JavaScript

For e-shops with custom JavaScript — dynamic configuration, event listening, imperative control.

The widget can be retrieved in several ways:

4.2 Listening to Events

The widget emits four types of events. All have the prefix ppl-accesspointwidget- and pass through Shadow DOM (thanks to composed: true).

Complete integration example for an e-shop checkout:

The widget can be created entirely from JavaScript without prior HTML markup. This is useful when you want to load the widget only after the customer selects a delivery type.

Option A — Configuration via HTML Attribute (JSON String)

Option B — Configuration via JavaScript Property (Object)

Note: When creating dynamically, it is recommended to add event listeners before inserting the element into the DOM (via appendChild) to avoid missing events.

4.5 Dynamic Runtime Configuration

The configure() method allows changing configuration at runtime. It performs a partial merge — only the specified parameters are changed, others are preserved.

4.6 Getting the Selected Access Point

In addition to listening to the select event, the last selection can also be retrieved imperatively:

Resets the widget to its default state — clears the selection and resets filters:

4. Integration: Vanilla JavaScript

4.1 Getting a Reference to the Widget

4.2 Listening to Events

4.4 Dynamically Creating the Widget via JavaScript

Option A — Configuration via HTML Attribute (JSON String)

Option B — Configuration via JavaScript Property (Object)

4.5 Dynamic Runtime Configuration

4.6 Getting the Selected Access Point

4.7 Resetting the Widget

4. Integration: Vanilla JavaScript

4.1 Getting a Reference to the Widget#

4.2 Listening to Events#

4.3 Modal Checkout Flow — Typical E-shop Scenario#

4.4 Dynamically Creating the Widget via JavaScript#

Option A — Configuration via HTML Attribute (JSON String)#

Option B — Configuration via JavaScript Property (Object)#

4.5 Dynamic Runtime Configuration#

4.6 Getting the Selected Access Point#

4.7 Resetting the Widget#

4.8 Switching Between Inline and Modal Mode#

4.1 Getting a Reference to the Widget

4.2 Listening to Events

4.3 Modal Checkout Flow — Typical E-shop Scenario

4.4 Dynamically Creating the Widget via JavaScript

Option A — Configuration via HTML Attribute (JSON String)

Option B — Configuration via JavaScript Property (Object)

4.5 Dynamic Runtime Configuration

4.6 Getting the Selected Access Point

4.7 Resetting the Widget

4.8 Switching Between Inline and Modal Mode