Skip to main content

🖼️ Web-widget (iframe) - embed

Dockflow Web Widget (iframe)​

A newer widget is available

New integrations can use the Trident (v3) Widget Embed, which runs on API Console keys and links each result to the shipment in your portal. This v2 widget keeps working with your existing Web widget keys.

The Dockflow Web Widget is a ready-made tracking page you embed on your own website. Visitors type a container number or reference and see the shipment on a map, with its origin, destination and the latest status of every container.

The Dockflow Web Widget showing a shipment from Shanghai to Rotterdam

Integration​

  1. In the Dockflow application, open Settings → Organisation and scroll to Web widget. Click + to create a key and copy it: it is shown only once.
  2. Embed the widget in your HTML page:
<iframe
    src="https://widget.dockflow.com/web?key=YOUR_WIDGET_KEY"
    width="100%"
    height="600"
    style="border: 0"
></iframe>

Replace YOUR_WIDGET_KEY with the key from step 1.

caution

The key is part of the page source, so anyone visiting your page can use it to search your organisation's shipments. Only embed the widget where that is acceptable.

Arguments​

The following arguments can be appended to the widget URL:

  • key: (mandatory) Your Web widget key. Without it, the search box is not shown.
  • search: (optional) A reference to look up as soon as the widget loads, for example when linking to one specific shipment.

Example Usage​

  1. Let visitors search themselves:
https://widget.dockflow.com/web?key=YOUR_WIDGET_KEY
  1. Open the widget on one shipment:
https://widget.dockflow.com/web?key=YOUR_WIDGET_KEY&search=TCNU1929808

How it behaves​

  • The search box sits in the top-right corner and searches as the visitor types, from 6 characters on.
  • The result appears in a panel directly below the search box: your own reference, origin and destination with their dates, and each container with its latest status, place, vessel and date.
  • The map zooms to fit the whole journey: origin, destination and the vessel's track.
  • When nothing matches, the panel shows No shipment or container found for this reference.

Customization​

You control the size and border of the widget through the iframe attributes (width, height, style). Give it at least 600px of width so the map stays visible next to the results panel.

The content of the widget cannot be styled from your page: it is served from widget.dockflow.com, so your CSS does not reach inside the iframe. For branding or colour changes, reach out to [email protected].