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 one below:
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.
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.