When you are done designing your embedded tracking widget, you can click on the Install code button on the top-right corner.
You will be presented with two options:
- I'll install the code - you'll get your unique embedded widget code and instructions on what to do with it.
- Ask teammate for help - you'll send an e-mail to your colleague with the unique embedded widget code and a link to this article.
If you pick the first option, you will see a code snippet similar to the ones below:
Zip Code Protection Off
<script type="text/javascript" src="https://widget.portal.sevensenders.com/widget.js"></script>
<script>
sevensendersEmbeddedWidget({
embeddedWidgetId: '849f1f87-4318-451d-ab33-2ca64373d924-74ded',
elementId: <selector>,
orderId: <orderId>
});
</script>Zip Code Protection On
Note: Currently if you wish to use Zip Code Protection you will need to contact your KAM who will turn it on for you. Then you will need to install the snippet below. The snippet for Zip Code Protection does not currently display in the Seven Senders Portal.
<script type="text/javascript" src="https://widget.portal.sevensenders.com/widget.js"></script>
<script>
sevensendersEmbeddedWidget({
embeddedWidgetId: '849f1f87-4318-451d-ab33-2ca64373d924-74ded',
elementId: <selector>,
orderId: <orderId>,
zipCode: <zipCode>
});
</script>
This code snippet contains the following elements:
- The first script tag will load the embedded widget code
- The second script tag will call the SevenSendersPortalEmbeddedWidgetfunction with 3 parameters:
- embeddedWidgetId: this is your embedded widget identifier. Don't change it.
- elementId: this is the ID of the container where you want to render your embedded widget in your web shop. You need to create such a container, give it a matching ID and put it in the right place on your website for the embedded widget to be rendered. For example: <div id="elementId"></id>.
- orderId: This must match the order_id you sent when you created the order via the Seven Senders API. If it is not the same order id it will return a 404 error. Replace it with a dynamic placeholder containing the order numbers.
- zipCode: This must match the zip code of the end consumers address on shipment created via the Seven Senders API. If it is not the same zip code it will return a 404 error. Replace it with a dynamic placeholder containing the zip codes
Insert the code snippet above with your own elementId and orderId parameters somewhere within the <body></body> tags of your tracking page and put the container with elementId ID parameter in the desired place to render the widget.
To see the Embedded Widget displaying live information about your orders, you will need to click on the Publish button at the bottom of the I'll install the code page. Otherwise the Embedded Widget will return a 404 error.