1. Go to Dashboard click on pages and create new page.
2. Toggle the editor to HTML Code and paste below code:
<style>
.order-tacking {
/* text-align: center; */
margin-bottom: 20px;
}
.order-tacking #orderID {
border-radius: 5px;
padding: 12px;
font-size: 20px;
border: 1.5px solid #a5a5a5;
font-family: sans-serif;
margin-bottom: 30px;
}
.order-tacking input[type="button"]:hover {
background: white;
color: black;
border: 1.5px solid #a5a5a5;
}
.order-tacking .trigger-tack {
display: flex;
justify-content: center;
}
.order-tacking .order-title {
font-size: 26px;
font-family: sans-serif;
}
</style>
<div class="order-tacking">
<!-- <h2>Track Your Order Status</h2> -->
<div>
<input
placeholder="Enter tracking number."
type="text"
id="orderID"
maxlength="50"
class="field"
/>
<input
class="button"
type="button"
value="TRACK"
onclick="doTrackOrder()"
/>
</div>
</div>
<div id="YQContainer"></div>
<script
src="https://www.17track.net/externalcall.js"
type="text/javascript"
></script>
<script type="text/javascript">
// <![CDATA[
function doTrackOrder() {
var num = document.getElementById("orderID").value;
if (num === "") {
alert("Enter your number.");
return;
}
YQV5.trackSingle({
//Required, Specify the container ID of the carrier content.
YQ_ContainerId: "YQContainer", //Optional, specify tracking result height, max height 800px, default is 560px.
YQ_Height: 560, //Optional, select carrier, default to auto identify.
YQ_Fc: "0", //Optional, specify UI language, default language is automatically detected based on the browser settings.
YQ_Lang: "en", //Required, specify the number needed to be tracked.
YQ_Num: num,
});
} // ]]>
</script>