Skip to main content

Widget initialization

At the very beginning you should place HTML element <paxy-widget></paxy-widget> in the desired place in your HTML.

<body>
  <paxy-widget></paxy-widget>
</body>

The widget should be initialized when the window event paxyWidgetReadyForBootstraping is fired. You should bootstrap the widget like so:

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

Be careful how you load your javascript files because you may encounter race condition when paxy widget will be loaded before your script. Therefore your scripts should be loaded earlier than paxy widget script, otherwise paxyWidgetReadyForBootstraping event may be fired before you start listening for that event.

Later on, after the widget is bootstrapped the paxyWidgetInitialized event will be dispatched. In this moment paxy widget is ready to operate. You may immediately set the widget config after getting this event (or do something else depending on your needs, it's not obligatory to set widget config just after this event, you may set it later).

window.addEventListener('paxyWidgetInitialized', function (e) {
  window.paxyWidget.setWidgetConfig({
    componentType: "embeded",
    apiUrl: "https://iai-bridge.paxy.pl/api/v1",
    couriers: ['cp_napostu', 'econt'],
    language: "pl",
    token: "token",
    showCouriersSelectInput: false,
    startCoordinates: {
      lat: 44.100919255019,
      lng: 27.195040026545
    }
  })
});

In order to open the widget just dispatch paxyWidgetOpen event:

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

Example configuration showed in html document​

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  <title></title>
  <!--  styles  -->
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
<!--  root element  -->
<paxy-widget></paxy-widget>

<script type="text/javascript">
  window.addEventListener('paxyWidgetReadyForBootstraping', function (e) {
    window.dispatchEvent(new CustomEvent('paxyWidgetBootstrap'));
  });

  window.addEventListener('paxyWidgetInitialized', function (e) {
    console.log('initialized');
    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
    })
    
    // optionally open the widget after setting the config
    window.dispatchEvent(new CustomEvent('paxyWidgetOpen'));
  });

  window.addEventListener('paxyWidgetPointSelected', function (e) {
    console.log('detail', e.detail)
  });
</script>
<!--  js script  -->
<script src="./paxywidget.js"></script>
</body>
</html>