Single number input mode

Add an input field to your website. When clicking on the “TRACK” button, the embedded area will be expanded to display the tracking results.

Example
Examples: ZA871946730HK

Preferences

trackNumber

Track number

Optional
containerId

Container ID where the package tracking result will be dispayed

Optional
height

Frame height, where the package tracking results will be displayed. The default value is 370.

Required
width

Frame width, where the package tracking results will be displayed. By default, it is stretched to the entire width of the container.

Required
language

UI language, default language is automatically detected based on the browser settings.

  • de=Deutsch
  • en=English
  • es=Español
  • fr=Français
  • it=Italiano
  • ja=日本語
  • ko=한국어
  • nl=Nederlands
  • pl=Polski
  • pt=Português
  • ru=Русский
  • th=ไทย
  • tr=Türkçe
  • uk=Українська
  • zh=汉语
Required

Code

<link rel="stylesheet" href="https://pkge.net/css/externalwidget.min.css">
<div class="widget-pkge-net">
    <div class="widget-pkge-net-search">
        <!--Track number input field.-->
        <input type="text" class="widget-pkge-net-textfield" id="track-number" maxlength="40" />
        <!-- Button to run the script method and start the tracking process.-->
        <input type="button" class="widget-pkge-net-button" value="Track" onclick="widgetTrack()" />
    </div>
    <!-- The container where the package tracking results will be displayed.-->
    <div class="widget-pkge-net-result" id="widget-container"></div>
    <div class="widget-pkge-net-help">Examples: <span onclick="document.getElementById('track-number').value = this.innerText">ZA871946730HK</span></div>
    <div class="widget-pkge-net-link">Package tracking – <a href="https://pkge.net">pkge.net</a></div>
</div>

<!--The script required for the widget's work. It can be inserted at the end of the page.-->
<script type="text/javascript" src="https://pkge.net/externalwidget.min.js"></script>
<script type="text/javascript">
function widgetTrack() {
        var trackNumber = document.getElementById('track-number').value;

        if (!trackNumber) {
            alert('Enter your tracking number:');
            return false;
        }

        PKGEExtWidget.trackBlockIntegrated({
            //Optional. Track number
            'trackNumber': trackNumber,
             //Optional. Container ID where the package tracking result will be dispayed
            'containerId': 'widget-container',
             //Required. Frame width, where the package tracking results will be displayed. By default, it is stretched to the entire width of the container.
            'width': 970,
             //Required. Frame height, where the package tracking results will be displayed. The default value is 370.
            'height': 370,
            //Required. UI language, default language is automatically detected based on the browser settings.
            'language': 'en'
        });
}
</script>