Embedding a widget
The snippet, its attributes, the allowed websites and the page's security policy.
Current runtime: 0.2.0.
The snippet
Paste the snippet where the widget is to appear. The runtime draws the widget into the container with the id swidget-<id>; when the page has no such container, it adds one right after the script tag.
<div id="swidget-k2m9x7q4ab1c"></div>
<script src="https://<host>/swidget/swidget.js"
data-swidget="k2m9x7q4ab1c" data-key="sp_appkey_…" data-client="<client code>"
data-api="https://open.superroute.ca"
data-locale="fr" data-theme="auto" data-accent="#0055AA" async></script>Script tag attributes
| Attribute | Required | Meaning |
|---|---|---|
data-swidget |
Yes | The widget's id, from the back office. |
data-key |
Yes | The widget's public key. A new key replaces it at once; the old snippet then stops working. |
data-client |
Yes | The client's public code. |
data-api |
Yes | The partner app API: https://open.superroute.ca. |
data-locale |
No | The language: en, chs, cht, de, es, fr, it, nl, pt, sr, hu, pl, sk or cs. It takes the place of the widget's language set in the back office; without both, the visitor's browser language is used. |
data-theme |
No | light (default), dark, or auto (follows the visitor's system setting). |
data-accent |
No | The main colour as #RRGGBB, in place of the branding colour. |
data-input-name |
No | Pickup point picker only: the name of the form field that receives the chosen pickup point, in place of the name set in the back office. |
Allowed websites
Each widget lists up to 20 websites as scheme://host[:port], for example https://www.example.com or http://localhost:8080. Every call must come from a browser page on one of them: the page's Origin must match exactly, so https://example.com and https://www.example.com are two entries. A call without an Origin is refused too.
Where the script comes from
The script is served from the client's white-label host when the client has one, otherwise from the Superroute back office host. The calls always go to open.superroute.ca.
Content Security Policy
A page with a Content-Security-Policy needs these sources. The widgets draw in their own shadow DOM with inline style elements, so style-src needs 'unsafe-inline' when the page restricts styles.
Content-Security-Policy:
script-src 'self' https://<host serving swidget.js>;
connect-src 'self' https://open.superroute.ca;
style-src 'self' 'unsafe-inline';Script address
The snippet loads /swidget/swidget.js, which is always the newest version. The address carries no version, so pages receive updates without being edited. The ES module is /swidget/swidget.esm.js.
https://<host>/swidget/swidget.js
https://<host>/swidget/swidget.esm.jsSeveral widgets on one page
Paste each widget's snippet. The script runs once and draws every snippet on the page.
Single-page applications
The runtime also draws snippets added to the page after it loaded. A page that draws widgets itself uses window.sWidget.mount() and unmount() (see Events and JavaScript API).
License: Superroute SDK License