Skip to main content

Widget config and events

Config​

Base config properties:

  • componentType - string - either embedded or modal, default embedded.
    • Embedded means that the widget is always visible and placed in desired HTML element.
    • Modal is a web page element that displays in front of and deactivates all other page content. It is opened when there is a need of selecting pickup point.
  • apiUrl - string - required
  • assetsPathPrefix - string - optional - can be used to change the prefix of assets path
  • token - string - required, token provided by Paxy
  • couriers - array of string - required eg. ["ppl", "cp"] - List of couriers
  • language - string - required - en, pl, hu, sk, ro, cz, bg, hr, ee, lv
  • showCouriersSelectInput - boolean - optional - if enabled first courier item will be fetched from provided couriers array
  • startCoordinates - object - optional - object which contains lat and lng eg. { lat: 12.23222, lng: 55.121321 }, when provided it centers the map to given coordinates. Anyways it is ignored when points are loaded the map will be centered to points available on the map.

Emitted events​

paxyWidgetReadyForBootstraping - emitted when paxy widget is ready for bootstraping. After this event is emitted you can fire paxyWidgetBootstrap

window.addEventListener('paxyWidgetReadyForBootstraping', function (e) {
    window.dispatchEvent(new CustomEvent('paxyWidgetBootstrap'));
});

paxyWidgetInitialized - emitted when paxy widget was bootstraped and is ready to operate. After this event is emitted you may use window.paxyWidget reference.

window.addEventListener('paxyWidgetInitialized', function (e) {
    // ready to use window.paxyWidget
    window.paxyWidget.setWidgetConfig({
      apiUrl: "https://iai-bridge.paxy.pl/api/v1",
      componentType: "modal",
      couriers: ['ppl_parcelbox_', 'fancourier_fanbox_'],
      language: "pl",
      country: "cz",
      token: "token",
      showCouriersSelectInput: true
    })
  });

paxyWidgetPointSelected - emitted when user selected pickup point. In this event detail you will find selected pickup point data. You can read about the point object type in types documentation.

window.addEventListener('paxyWidgetPointSelected', function (e) {
  console.log('detail', e.detail) // here you will find pickup point data
});

Available methods provided by paxyWidget reference​

You can bootstrap paxy widget by dispatching paxyWidgetBootstrap event:

window.dispatchEvent(new CustomEvent('paxyWidgetBootstrap'));

You can open paxy widget by dispatching paxyWidgetOpen event:

window.dispatchEvent(new CustomEvent('paxyWidgetOpen'));

You can close paxy widget by dispatching paxyWidgetClose event:

window.dispatchEvent(new CustomEvent('paxyWidgetClose'));