Support Portal


Designing an Embedded Widget

About Seven Senders Portal Embedded Tracking Widgets

With Seven Senders Portal, 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 Seven Senders Portal. 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 atTracking 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 Seven Senders Portal, 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, Seven Senders Portal 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

Customising Order and Shipment Statuses and the Timeline

If you don't like the default message for any of the order and shipment statuses or the timeline, you can use the Event & Content Library to create your own, customised, messages. You can also customise the message in any of the languages we support. For example:

Default Message                                    

Customised Message

How to create a customised message

  1. Navigate to the Event & Content Library in the side menu
  2. Choose the language of the message you want to customise (top right)
  3. Find the event and message you want to customise 
  4. Click the edit button. 
  5. Update the messages then click save. 

Reseting to the Default

If you want to revert to the default, click the button 'Reset to Default'

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.

Did you find it helpful? Yes No