How to embed Portcast’s Port Congestion dashboard in an external platform

The Port Congestion dashboard allows you to understand activity and congestion on global ports across the world. This dashboards can also be embedded into third party platforms, like your own SaaS platform or internal web platform. To do this, just follow the steps below:

Integrate the javascript embedding code: Add the following embedding script to the head of your html template or document:
```
<script type="module" src="<https://public.tableau.com/javascripts/api/tableau.embedding.3.latest.min.js>"></script>
```
This script will automatically compute any embeds present on your page and display them based on a couple of parameters.
Generate an embedding token: In order to embed the dashboard securely, you need to generate an embedding token; this is a short lifespan token that is included into the embed, and has a lifetime of 10 minutes. Therefore, you need to generate it in the backend, then keep it for the next steps on the frontend.

Here is an example of how to generate it using cURL (Shell):
```
curl --request GET \\
  --url <https://api.portcast.io/api/v2/api-key/{YOUR_PORTCAST_ORG_ID}/tableau-integration> \\
  --header 'x-api-key: {YOUR_PORTCAST_API_KEY}'
```
Use your Org’s ID and API key on the indicated placements above, make the call to the token generation endpoint and return the resulting token to use on the next steps. The token will look something like this:
```
"eyJhbGciOiJIUzI1NiIsImlzcyI6IjQ5MjU3ZGNiLWEzZjQtNDAzMC05MDNlLWZiZmZlZGE2ZTJhMSIsImtpZCI6IjMwY2NiMDU4LWQxYTEtNDU1OS04OTgzLTllMjcwMDk0MjYyZSIsInR5cCI6IkpXVCJ9"
```

Include the component: copy-paste the markup below into the body of your HTML or document.

<tableau-viz
  id="tableauViz"
  :src="<https://prod-apnortheast-a.online.tableau.com/t/portcast/views/PortCongestionwithDailyIndices/PortCongestion>"
  :token="{tableauToken}"
  style="height: calc(100vh - 90px);"
/>

On the embed code above, you’ll need to replace {tableauToken} with the obtained temporary token on the above step.

<aside> 💡

If you have any doubts, Portcast has prepared a sample file for each dashboard you can use to bootstrap your implementation:

portcongestion.html

Please note: you’ll still have to generate, server-side, the temporary embed token and replace it on the provided sample code.

If you have any questions, reach out to our friendly Support team at [email protected] and we will help you get your embedded Port Congestion dashboard up and running.

</aside>