Support Portal

Designing an Embedded Widget

About Sendwise Embedded Tracking Widgets

With Sendwise, you can easily create and customize a responsive tracking widget and use it to proactively inform your customers about the current status of their orders by embedding it directly into your web shop. This article describes the process of creating a tracking widget. 

As result, you will receive a unique code snippet to be inserted into your web shop. You can read more about the installation process here.

Before you begin

In order to start using the embedded tracking widget, your shop needs to be connected with Sendwise. You can read more about it in the following article:

Creating your First Embedded Tracking Widget

In order to create your first embedded tracking widget, go to Touchpoints section (vertical bar navigation) and then click at Tracking button in the left sidebar menu, you will find Embedded widgets tab.

If you haven't created any widgets at this point, you should see a Create your first embedded widget button in the top-right corner. Click it in order to proceed.

Now, it's time to pick the language of your tracking widget. You should design the widget, having in mind the language used by the customers of your shop. 

Once you've selected the desired language, click at Next. Now, give your widget a name and click at Create your embedded widget button. The name won't be visible anywhere on the widget.

Adding and Customizing Widgets

Each tracking widget consists of smaller, customization modules - also called widgets. You can find them in the left sidebar menu, under the Widgets tab. 

To enter the functional settings of each module, simply click on the widget you'd like customise. In order to go back to the widget menu, click on the < icon in the top-left corner. You can add more modules to your tracking widget by clicking Add new widget in the same menu. 

It is possible to change the order of widgets by dragging them to the desired position in the menu list. In order to delete a widget - enter the setting panel of the module you want to delete and then click on Remove widget button.

Estimated Time of Arrival

An estimated time of arrival (ETA) can be displayed at the embedded tracking widget (see screenshot below). The ETA can be selected or deselected in the section Status

How’s the ETA calculated? 

If an order is created in Sendwise, the 'Promised Delivery Date' provided by the shop on the order level is displayed as the ETA date. As soon as a belonging shipment is created and a First Hub Scan took place the ETA date is calculated as follwing: 

ETA= First Hub Scan Date + SLA Days (the SLA Days you configured at the shop settings)

This means that the ETA is the timestamp of a parcel being scanned the first time at the last mile carriers hub [shipment event 'first hub scan'] plus the service level agreement (days) that have been added for the carrier in charge at the settings.  Haven’t set up any service level agreements yet? Here we’ll provide some further information: Managing Service Level Agreements

Please note - for the following scenarios no ETA will be displayed:

  • The 'Promised Delivery Date' is not defined for an order and there's no shipment created that had a first hub scan event yet.
  • No SLA's have been added at the 'Service Level Agreement'section within the shop settings.
  • In case the ETA (date) is in the past.

Styling Options

All styling options can be found under the Page design tab.

Here, you can set the font-types, font-sizes, styles of icons and define the colors of each element visible on your tracking page in order to reflect the unique look & feel of your brand.

Note, Sendwise Embedded Widgets support the following Google fonts:

  • Roboto
  • Open Sans 
  • Lato
  • Montserrat
  • Roboto Condensed
  • Source Sans Pro
  • Oswald
  • Raleway
  • Merriweather
  • PT Sans
  • Roboto Slab
  • Noto Sans
  • Poppins
  • Ubundo

Installing your Embedded Widget

Before you publish your tracking widget, it will remain as draft. When you're ready to go live with it, click at the Install code button in the top-right corner.

Now, you can either go ahead and install the code yourself or send an e-mail with installation instructions to a more tech-savvy colleague. 

If you'd like to go with the first option, the installation guide can be found here.