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 thebody
if you don't have access to thehead
.
<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'sbody
to display your tracking page.
<div id="shipup-container"></div>
- Add this snippet at the end of your page's
body
. Be sure to replacemyPublicApiKey
with your own public API key andshipup-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'sbody
to display your tracking page.
<div id="shipup-container"></div>
- Add this snippet at the end of your page's
body
. Be sure to replacemyPublicApiKey
with your own public API key andshipup-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>
Updated almost 4 years ago
Whatβs Next
Now that your tracking page is installed, read more about how it can be configured