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.
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 multilingual display. The language can be set in several ways:
Automatic Language Detection
The widget automatically detects the language based on the domain from which it is called (e.g., .com = English, .cz = Czech, .sk = Slovak, .de = German).
Manual Language Setting
You can explicitly set the language using the data-language parameter:
<div id="retino-track-n-trace"
data-page-id="YOUR-ID"
data-language="en" <!-- Change to desired language -->
data-base-url="https://app.retino.com">
</div>
Supported languages: cs, sk, en, de, pl, hu, ro, hr, sl, and more.
Managing Integration URLs for Different Languages
Retino automatically stores URLs where the widget is integrated, separately for each language. This allows proper support for multilingual e-shops. You can manage integration URLs in Settings > Track & Trace by clicking "Edit integration URLs".
Step 4: Creating Links with Pre-filled Data
You can create links that automatically pre-fill customer data. This is useful, for example, in order status emails.
URL Format with Parameters:
Basic URL: https://yoursite.com/tracking
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
Using the Direct Link (without Integration)
If you don't want to integrate the widget into your website, you can use a direct link to the hosted version:
https://app.retino.com/trackntrace/YOUR-PAGE-ID/
You can find this link in the Track & Trace settings under "Direct link". It supports the same URL parameters as the integrated version.
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: On the first use of Track & Trace on a specific domain, Retino automatically saves the URL of your integration page for statistics.
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.