sWidget
Superroute widgets on a client's own website.
A client configures a widget in the back office, copies its snippet and pastes it into its website. The widget draws itself in the page and calls Superroute with its own key.
Current runtime: 0.2.0.
Embedding
The snippet, its attributes, the allowed websites and the page's security policy.
Tracking widget
A parcel looked up by its tracking number or code.
Quote widget
A price for a shipment from a postcode and the packages.
Shipping order widget
A shipping order placed as a guest or signed in.
Pickup point picker
The client's lockers and pickup point counters, and the visitor's choice for the page.
Apps
The widget in an app on any of the nine platforms, loaded by its widget id.
Events and JavaScript API
What a widget tells the page, and how a page draws widgets itself.
Styling
Branding, dark mode, CSS custom properties and parts.
Errors
What a refused call means and what to check.
Versions
How the runtime is versioned, and what changed.
The four widgets
Tracking
Looks a parcel up by its tracking number or code and shows its status and history.
Quote
Prices a shipment on the client's public quote lines from a postcode and the packages.
Shipping order
Places a shipping order, as a guest with a confirmation code or signed in to the visitor's account.
Pickup point picker
Lists the client's smart lockers and pickup point counters and gives the chosen one to the page.
How it works
- In the back office, under Control Panel → Apps → sWidget, the client admin creates a widget: its type, options, branding, language and the websites it may run on.
- The widget page shows the snippet: a container and one script tag with the widget's public key.
- The snippet goes into the web page. Nothing is installed or built.
- The widget calls the partner app API on open.superroute.ca with its key. The server accepts the key only from the widget's own websites, for the widget's own client and for the calls its type needs.
<div id="swidget-<id>"></div>
<script src="https://<host>/swidget/swidget.js" data-swidget="<id>"
data-key="sp_appkey_…" data-client="<client code>" data-api="https://open.superroute.ca" async></script>The runtime is one script served by Superroute. There is no npm package and nothing to bundle.
Who sets it up
Widgets are created by client admins of a Superroute client. A developer who builds the client's website needs only the snippet; the key in it is public and works only on the websites listed for the widget.
There is no live preview on this site: a widget runs only with a client's key on the client's own websites. The widget page in the back office shows a preview.
License: Superroute SDK License