Embedding the new Port Congestion dashboard into your own web app is as simple as including one script and one tag — works in plain HTML and with every major framework.
The element renders the dashboard in a sandboxed iframe. Access is controlled by a short-lived token you mint from your Portcast API key.
Add this once, anywhere on your page (e.g. in <head>):
<script src="<https://cdn.portcast.io/embed/portcast-eta-embed.js>"></script>
Served from our CDN with CORS enabled, so a plain <script> tag works from any domain.
Drop this tag anywhere the dashboard should appear:
<portcast-eta-embed
src="<https://app.portcast.io/embed/port_congestion>"
token="YOUR_TOKEN"
org-id="YOUR_ORG_ID"
style="height: 100%; width: 600px;"
></portcast-eta-embed>
That's it — the dashboard renders inline. Size it with your own style / CSS class (defaults to full width, 600px tall). You also need a token (Step 3) and your org-id — your Portcast organisation ID, which must match the org the token was minted for (Portcast provides it).
The token is a short-lived credential you mint from your Portcast API key on your server, then pass into the tag:
curl -X POST "<https://api.portcast.io/api/v2/org/self-token>" \
-H "x-api-key: YOUR_PORTCAST_API_KEY" \
-H "content-type: application/json" \
-d '{"expiry_in_minutes": 240}'
# → { "token": "eyJhbGci..." }
expiry_in_minutes is optional — default 240 (4 h), min 5, max 1440.
<aside> ⚠️
Always generate tokens server-side. Never put your x-api-key in browser/client code — this would effectively expose your Portcast credentials. Only the short-lived token should ever reach the browser.
</aside>
| Attribute | Required | Description |
|---|---|---|
src |
Yes | The dashboard URL Portcast gives you (must be https). Determines which dashboard renders. |
token |
Yes | Your short-lived token from Step 3. Updating this attribute live reloads the embed — use it to refresh an expiring session in place. |
org-id |
Yes | Your Portcast organisation ID (Portcast provides it). Must match the org the token was minted for — if it doesn't, the embed refuses to load. The token still governs access; this is a required safety cross-check. |