If you want to embed an airway bill tracking page from our platform into your website or application, follow these simple steps. You will need access to the source code of your platform, and basic knowledge of HTML mark-up technology.

Step 1: Copy the Code

Airway bill tracking embedding uses a simple iframe HTML element to integrate with external platforms. An iframe is a portion of a web page that ‘includes’ another webpage seamlessly; you can define which page to integrate via the src attribute of the iframe element.

Here is the basic code for embedding the tracking page:

<iframe allow="clipboard-read *" src="<https://app.portcast.io/embed/tracking/air_visibility/**><bookmark_id>**/details">
   <p>Your browser does not support iframes.</p>
</iframe>

Note the bolded <bookmark_id>; you will need to replace it in the next step.

Step 2: Replace <bookmark_id> with the desired airway bill’s bookmark ID

The <bookmark_id> in the code above is a placeholder for the specific airway bill you want to display; you will need to replace it with the actual airway bill ID you want to embed.

To find the Airway Bill ID, you can log into the Portcast web platform and click on the existing MAWB ID (or upload it if it has not yet been done). Once you are in the single MAWB tracking page, the Bookmark ID is visible in your browser’s URL bar:

For example, in the image above, the Airway bill ID is 3f49f925-5932-4c98-a6ca-30a80a803ccd; so the updated embedding code would look like this:

<iframe allow="clipboard-read *" src="<https://app.portcast.io/embed/tracking/air_visibility/**3f49f925-5932-4c98-a6ca-30a80a803ccd**/details>">
   <p>Your browser does not support iframes.</p>
</iframe>

Step 3: Customize the embed (optional)

Portcast offers a couple of embedding options that can make the embedding more suitable for your specific use case. Specifically, we allow defining the visible tab by default on the embed, hiding or showing detailed weights and pieces information, as well as changing the size of the embed.

• If you want to adjust the size of the embedded iframe, you can add the width and height attributes to the <iframe> tag. You can either use relative values (in percentage) or absolute values (in pixels). More advanced users can also use CSS to apply advanced styling to the iframe component.

  Here is a basic example using relative and absolute values combined:

  <iframe allow="clipboard-read *" src="<https://app.portcast.io/embed/tracking/air_visibility/><bookmark-id>/details" width="100%" height="600">
  <p>Your browser does not support iframes.</p>
  </iframe>
  

• If you want to show only the map of the MAWB journey without any other components, you can use /map instead of /details on the embedding src URL, like so:

  <iframe allow="clipboard-read *" src="<https://app.portcast.io/embed/tracking/air_visibility/><bookmark-id>**/map**">
  <p>Your browser does not support iframes.</p>
  </iframe>