This guide will walk you through the technical integration of the Track & Trace widget on your website. Integration is very simple and should only take a few minutes.

Pre-requisite: Before integrating Track & Trace, you must have an active Retino Tracking account with at least one connected order source.

What Is Track & Trace

Track & Trace is a page where your customers track their shipments. You can have it integrated as a widget directly on your website, or use the hosted version at Retino. If you have multiple e-shops with Track & Trace, Retino recognizes which e-shop an order belongs to, and tracking links always lead to the correct website. For more about how it works and what you can configure, see What is Track & Trace and How Does It Work.

Step 1: Obtaining the Integration Code

Log in to Retino Tracking
Go to Settings > Track & Trace
In the "Integrations" section, you'll find your unique integration code
Click the "Copy code" button

The integration code looks like this:

<div id="retino-track-n-trace"
     data-page-id="YOUR-ID"
     data-language="en"
     data-base-url="https://app.retino.com">
</div>
<script type="text/javascript" id="retino-track-n-trace-script">
(function(r,e,t,i,n,o){n=e.createElement(t);n.src=i;n.async=true;o=e.getElementsByTagName(t)[0];o.parentNode.insertBefore(n,o)})(window,document,'script','https://cdn.retino.com/trackntraceInjector.js')
</script>

Step 2: Embedding the Code on Your Website

Paste the copied code into the page where you want to display the Track & Trace widget. You have several options:

Option A: Dedicated Tracking Page

Create a new page on your website (e.g., /tracking) and insert the integration code into it:

<!DOCTYPE html>
<html>
<head>
    <title>Tracking Your Shipment</title>
</head>
<body>
    <h1>Track Your Shipment</h1>

    <!-- Paste the integration code here -->
    <div id="retino-track-n-trace"
         data-page-id="YOUR-ID"
         data-language="en"
         data-base-url="https://app.retino.com">
    </div>
    <script type="text/javascript" id="retino-track-n-trace-script">
    (function(r,e,t,i,n,o){n=e.createElement(t);n.src=i;n.async=true;o=e.getElementsByTagName(t)[0];o.parentNode.insertBefore(n,o)})(window,document,'script','https://cdn.retino.com/trackntraceInjector.js')
    </script>
</body>
</html>

Option B: Integration into an Existing Page

You can embed the widget into any existing page, such as the "My Account" or "Customer Support" section.

Option C: Integration with CMS Systems

WordPress:

Use the HTML block in the Gutenberg editor
Or insert the code via the "Custom HTML" widget
Alternatively, use a plugin for inserting custom code

Shoptet:

Administration → Appearance and Content → Content Editor
Create a new page or edit an existing one
Switch to HTML mode and paste the code

PrestaShop:

Create a new CMS page
In the editor, switch to "Source code"
Paste the integration code

Tip: The widget automatically adapts to the width of its container. For best results, place it in a container with a width of at least 400px.

Step 3: Setting the Language

The widget supports automatic language detection, but you can override it with the data-language parameter:

<div id="retino-track-n-trace"
     data-page-id="YOUR-UNIQUE-ID"
     data-language="en"  <!-- Change to the desired language -->
     data-base-url="https://app.retino.com">
</div>

Supported languages: cs , sk , en , de , pl , hu , ro , hr , sl , and more.

Step 4: Shipment Tracking Links

In emails sent from Retino, shipment tracking links are generated automatically and lead to the Track & Trace of the order's e-shop. You can also create links yourself, for example in your own emails or automations.

Option 1: Link to Your Page with the Widget

If you have the widget integrated on your website, link directly to your page and pre-fill the customer's data using URL parameters.

With pre-filled email and order code:

https://yoursite.com/[email protected]&order-code=123456

With pre-filled email and tracking number:

https://yoursite.com/[email protected]&tracking-number=CP123456789US

With Retino shipment ID (most accurate):

https://yoursite.com/tracking?retino-tracked-shipping-id=3104447e-d019-453c-96ec-2805daf937b4

Option 2: Direct Link via Retino

You can find the direct link in the Track & Trace settings under "Direct link". It supports the same URL parameters:

https://app.retino.com/trackntrace/YOUR-PAGE-ID/

After the order is found, Retino automatically redirects the customer to the page of the e-shop the order belongs to (if you have the widget integrated there). Without an integration, the customer sees the Retino hosted page.

Which Option to Use?

You have one e-shop and the widget integrated — link directly to your page with parameters (Option 1).
You have multiple e-shops under one account — use the direct link (Option 2). Retino recognizes the correct e-shop from the order and redirects the customer to it.
You don't have the widget integrated — use the direct link (Option 2); the customer will see the Retino hosted page.

Testing the Integration

After embedding the code:

Refresh the page with the widget
A shipment search form should appear
Try entering test data:
- Email and order number of one of your shipments
- Or just the tracking number
Shipment information should be displayed

First Use: The integration URL is saved when a customer first searches for their order in the widget. From the order, Retino recognizes which e-shop the integration belongs to, and tracking links then lead to the correct page. You can find the saved integration URLs in Settings > Track & Trace.

Troubleshooting

Widget is not displayed

Verify that the code is inserted correctly, including the script tag
Check the browser's console for JavaScript errors
Ensure you have the correct data-page-id

Widget reports "Page not found"

Verify that you have active Track & Trace in the settings
Check the correctness of the page ID in the integration code

Shipment data is not displayed

Verify that you have a connected order source
Check that the shipments exist in the Retino Tracking system
Ensure that you are entering the correct data (email must match the email from the order)

Advanced Integration

Custom Styling

The widget respects the basic CSS of your website. For advanced styling adjustments, use the settings in the Retino administration.

Events and Callbacks

The widget, in its current version, does not support JavaScript events. For programmatic integration, use the Tracking API.

Security

The widget is secure and data is transmitted via HTTPS. Customers only see shipments assigned to their email address.

Need help? Contact our support at [email protected] or use the in-app chat.

How to Integrate Track & Trace