Skip to content

CXC PUDO INTEGRATION WEB

Arvato PUDO Widget Version 2.0.0

This document describes the necessary steps for embedding the PUDO in your web application.

The PUDO is a web component bundled with all aspects like HTML, JS, CSS and fonts in a single file.

REFERENCING THE BUNDLE

The PUDO itself is a web component and is shipped as a single javascript bundle, which contains all aspects like HTML, Javascript, CSS and fonts. It can be referenced by using one of the following URLs:

Stage Bundle URL
integration https://<CLIENT>.pudo.cxc-intg.arvato-scs.digital/bundle.js
production https://<CLIENT>.pudo.cxc.arvato-scs.digital/bundle.js

The value for the <CLIENT> parameter will be provided by the CXC team. Make sure that the page where you integrate the PUDO is a valid HTML document and specifies the doctype accordingly:

1
<!DOCTYPE html>

ℹ️️ Important: Make sure that bundle.js is loaded only once to prevent potential widget errors.

CXC PUDO INTEGRATION

Once the PUDO bundle.js is loaded, the interface for mounting and unmounting PUDO becomes accessible via window.CXCPudo. Invoking window.CXCPudo.open(...) dynamically injects the <arvato-pudo-widget> into the DOM as a modal, seamlessly integrating it with the provided parameters. To manually close the modal, call window.CXCPudo.close().

The following code example shows how the widget can be integrated into a simple web page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html lang="en"> 
    <head> 
      <script 
      src='https://<CLIENT>.pudo.cxc.arvato-scs.digital/bundle.js'
      type="module"
      >
      </script> 
    </head>

    <script>
    const onCloseWidget = () => {
        console.log("close widget");
    }

    const onSelectPoint = (point) => {
        console.log("point selected", JSON.stringify(point));

        window.CXCPudo.close();
    }

    function openWidget(language, country) {
      window.CXCPudo.open({
          language,
          country,
          onClose: onCloseWidget,
          onSelectPoint: onSelectPoint,
      });
    }
    </script>               

    <body> 
        <button onclick="openWidget('de','DE')">Open Widget</button>
    </body> 
</html>

PUDO Input Properties

This properties can be passed into the window.CXCPudo.open() function

property required description
country: string yes A 2-character uppercase country code (e.g., "BE").
language: string yes A 2-character lowercase language code (e.g., "fr").
~~enabledCarriers: string~~ ~~An array of enabled carriers (e.g., "DHL_P,DHL_L") that restricts the country carrier configuration.~~ ⚠️ This property is deprecated. Please avoid using it going forward.
search: string A string to prefill the search input and trigger the search automatically when the widget opens.
consent: boolean A boolean indicating whether the user has given consent. If true, the consent layer will be skipped (default: false).
class: string A string of class names to apply to the PUDO, e.g., "my-pudo-border my-pudo-padding".
width: string A string that sets the PUDO's width using valid CSS units (e.g., %, px, vw; default: 75vw).
height: string A string that sets the PUDO's height using valid CSS units (e.g., %, px, vh; default: 75vh).
fullscreen: boolean A boolean to specify if the PUDO should be displayed in fullscreen mode (default: false).
isMobileApp: boolean A boolean to disable browser-specific features that are incompatible with mobile apps (default: false).
onClose: function A function to be called when the PUDO is closed.
onSelectPoint: function A function to be called when a point is selected using the button in the detail view of a selected point.

Property examples:

// Examples for search parameter
search = "Berlin"

search = "11051 Berlin"

search = "52.520008,13.404954" // (Lat, Long of Berlin)

Customization

Customize the PUDO as necessary using CSS. You can add styles to the PUDO using class or inline styles:

1
2
3
4
5
6
7
8
9
<style>
    .my-pudo-border {
    border: 1px solid #ccc;
    }

    .my-pudo-padding {
    padding: 5px;
    }
</style>

open(...) accepts a class parameter that can include multiple class names, separated by spaces.

window.CXCPudo.open({
    class: 'my-pudo-border my-pudo-padding',
    ...
});

PUDO Return Values

Once a PUDO point is selected, all relevant details are passed to the designated callback function onSelectPoint.

The result is also including an object additionalData. It contains additional user input data like postnumber, mail or phone number. The point includes an additional optional object with further carrier information - that might be needed for shipping.

This is an example output for a RELAISCOLIS.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
   "point": {
        "pudoCode": "C30K1",
        "carrierServiceId": "RELAISCOLIS",
        "pudoName": "pearl diffusion",
        "address": {
            "streetAndHouseNumber": "53 BOULEVARD SEBASTOPOL",
            "street": "BOULEVARD SEBASTOPOL",
            "houseNumber": "53",
            "postcode": "75001",
            "city": "PARIS 01",
            "countryCode": "FR",
        },
        "telephone": "",
        "fax": "",
        "addition": "",
        "location": {
          "latitude": 48.8622,
          "longitude": 2.3502
        },
        "openingHours":[],
        "openingHoursFormatted":[],
        "distance": 1274.60338432,
        "pudoPointAdditionalFields": {
             "pseudorvc": "01562"
        }
   },
   "additionalData":{}
}

This is an example output for a DHL Locker.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
    "point":{
        "pudoCode":"DUS5B2",
        "carrierServiceId":"DHL_L",
        "pudoName":"DHL Packstation 802",
        "address":{
            "streetAndHouseNumber":"Grillostr. 1 Nordviertel",
            "street":"Grillostr.",
            "houseNumber":"1 Nordvierte",
            "postcode":"45141",
            "city":"ESSEN",
            "countryCode":"DE"
        },
        "telephone": "",
        "fax": "",
        "addition": "",
        "location":{
            "latitude":51.468719,
            "longitude":7.0102429
        },
        "openingHours": [],
        "openingHoursFormatted": [],
        "distance": 275.26628209,
        "pudoPointAdditionalFields": {}
    },
    "additionalData":{
        "postnumber":"6516516516"
    }
}

Performance

The bundle.js can be loaded later on user interaction but this will affect responsiveness of the PUDO.

To mitigate this the bundle.js can be preloaded into the browser's cache.

Use <link rel="preload" href="path/to/bundle.js" as="script"> in the head section of the including page.

Accessibility

Disabling user-scalable can negatively impact the user experience for visually impaired individuals who rely on zooming to read content more easily. Allowing users to zoom ensures that your website remains accessible to a wider audience, including those with visual impairments.

However, in some design scenarios, you might want to disable user-scalable to maintain a consistent visual layout and prevent design elements from breaking.

To prevent automatic zooming on mobile devices:

<meta name="viewport" content="width=device-width, user-scalable=no" />

Consider the trade-offs carefully and ensure that your design remains user-friendly and accessible.

MULTI-LANGUAGE SUPPORT

The PUDO can be configured with translations for any language.

Setup

Texts can be implemented by supplying the corresponding translations for each supported language. Please contact the team.

Usage

To enable multi-language support, specify the language and country when opening the widget. If no language is provided, English will be used as the default fallback.

window.CXCPudo.open({
    language: 'de',
    country: 'DE',
    ...
});

CARRIER SUPPORT

Last update: 10.10.2025

This list provides an overview of the currently supported carriers for each country. Please note that this list reflects the state as of the last update and is continuously evolving as new carriers are added or existing integrations are updated.

Carrier Country
Hermes DE
PostAT AT
PostNL NL
DHL DE
GLS LU, HR, SE, FI, RO, HU, SI, IE, SK, BG, LT, EE, LV, GR, DK, CZ
DHL PL PL
BPost BE
UPS IT, US, IE
Royal Mail GB
Swiss Post CH
Chronopost FR
DPD IT, PT, ES, LU, HR, SE, FI, HU, SI, IE, SK, LT, EE, LV, DK, CZ, AT, NL, BE, PL, DE
FedEx CA, UK
Yodel GB
Colissimo FR
PostNord SE, FI, DK
Inpost IT, GB
Evri GB
RELAISCOLIS FR
Mondial Relay FR
Correos ES

Setup

To set up a country and its carriers, please contact the team.

Usage

Once configured, carriers are applied automatically. Simply open the widget with the desired country, and the appropriate carriers will be used.

BROWSER SUPPORT

Browser Version
Chrome >=70
Safari >=11
Firefox >=70
Edge >=103
Samsung Internet >=11
Opera >=70
Copyright 2025 Arvato SE