Skip to content

TRACK & TRACE WIDGET

Arvato Track & Trace Widget Version 1.0.0

This document describes the necessary steps for embedding the Arvato Track & Trace Widget in your web application.

1. TECHNOLOGY

The Frontend is a web component (look here for more information) bundled with all aspects like HTML, JS, CSS and fonts in a single file.

The web component is fully responsive, and the size of the web component is not configurable. 

2. BROWSER SUPPORT

Browser Version
Chrome >=70
Safari >=11
Firefox >=70
Edge >=103
Samsung Internet >=11
Opera >=70

3. REFERENCING THE BUNDLE

The widget 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>.track-and-trace-snippet.cxc-intg.arvato-scs.digital/bundle.js
production https://<CLIENT>.track-and-trace-snippet.cxc.arvato-scs.digital/bundle.js

The value for the <CLIENT> parameter will be provided by the CXC team.

4. WIDGET INTEGRATION

Once the bundle URL of the widget is referenced, it can be used as any other HTML element. Place the tag of the widget: <arvato-track-and-trace-widget> at the location where you want the widget to be displayed.

The following code snippet illustrates how the widget can be implemented into a simple web page:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<html lang="en"> 
    <head> 
      <script 
      src='https://<CLIENT>.track-and-trace-snippet.cxc-intg.arvato-scs.digital/bundle.js'
      type="module"
      >
      </script> 
    </head>               

    <body> 
      <arvato-track-and-trace-widget 
      orderid="10010131" 
      zipcode="10115" 
      lang="de" 
      country="DE"
      > 
      </arvato-track-and-trace-widget> 
    </body> 
</html>

In case of using a special font: the loading of the font must occur outside the web component. The name of the font-family must match with the predefined name.

4.1 Widget Properties

property description
orderid used to fetch the status of all shipments related to this order
zipcode serves as simple authentication factor
lang lowercase two character language code, if language-country combination is unknown fallback translation is used
country uppercase two character country code, if language-country combination is unknown fallback translation is used
trackingid (optional) used to display the corresponding shipment if the order contains several shipment's
trackingEnabled (optional) can be used to disable user tracking

4.2 Multi-Language Support

The Arvato Track & Trace Widget can be translated in every language. As standard we deliver German and English texts. Further texts can be implemented easily by delivering the corresponding translations.

The default-language is predefined in the web component and depends on the individual custom needs. It's possible to set the language and country individual for the shop customer by adding a property to the return-widget:

1
2
3
4
<body> 
    <arvato-track-and-trace-widget lang="de" country="DE" /> 
    </arvato-track-and-trace-widget> 
</body>
Copyright 2025 Arvato SE