Installing ShipupJS

ShipupJS is Shipup's JavaScript library to embed your tracking page on your website.

Installation instructions

Add those 2 tags between the head tags of your page (you can also add them in the body if you don't have access to the head.

<script charset="UTF-8" type="text/javascript" src="https://cdn.shipup.co/latest_v2/shipup-js.js"></script>
<link rel="stylesheet" href="https://cdn.shipup.co/latest_v2/shipup.css"></link>

Add a div with a custom id (shipup-container for instance) wherever you want in your page's body to display your tracking page.

<div id="shipup-container"></div>

Add this snippet at the end of your page's body. Be sure to replace myPublicApiKey with your own public API key and shipup-container with the id you chose on the previous step.

📘
You can find your public API key here. Keys are located at the bottom of the page.

<script type="text/javascript">
  var shipup = new ShipupJS.default('myPublicApiKey');
  var element = document.getElementById('shipup-container');
  shipup.render(element);
</script>

Here is a sample HTML file containing all 3 steps. You can use it as a starting point to start integrating you tracking page:

<!DOCTYPE html>
<html>
  <head>
    <title>ShipupJS example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">

    <script type="text/javascript" src="https://cdn.shipup.co/latest_v2/shipup-js.js"></script>
    <link rel="stylesheet" href="https://cdn.shipup.co/latest_v2/shipup.css"></link>
  </head>
  <body>
    <div id="shipup-container"></div>

    <script  type="text/javascript">
      var shipup = new ShipupJS.default('myPublicApiKey');
      var element = document.getElementById('shipup-container');
      shipup.render(element);
    </script>
  </body>
</html>

Installation with RequireJS

❗️
Try this process only if the previous one did not work on your application.

For application using RequireJS as a Javascript module loader such as Magento 2, the installation process is slightly different:

Add the script in your requirejs-config.js paths.

var config = {
    paths: {
        'ShipupJS': 'https://cdn.shipup.co/latest_v2/shipup-js'
    },
};

Add a div with a custom id (shipup-container for instance) wherever you want in your page's body to display your tracking page.

<div id="shipup-container"></div>

Add this snippet at the end of your page's body. Be sure to replace myPublicApiKey with your own public API key and shipup-container with the id you chose on the previous step.

<script  type="text/javascript">
  require(['ShipupJS'], function(ShipupJS) {
    var shipup = new ShipupJS.default('myPublicApiKey');
    var element = document.getElementById('shipup-container');
    shipup.render(element);
  });
</script>