1. Home
  2. Docs
  3. Guides
  4. Branded Tracking Widget
Live Chat

Branded Tracking Widget

Zenkraft’s Branded Tracking Add-on allows you to provide a seamless brand experience to your customers from within your own website.

1

Introduction

Still using Branded Tracking v1? The guides are available here.

Zenkraft’s Branded Tracking Add-on allows you to provide a seamless brand experience to your customers from within your own website. Branded tracking emails are sent at each important stage of a shipment ( or return’s) journey. When the user clicks for more information they are taken to a branded tracking page which ultimately will drive more trusted traffic back to your website.

To set up Branded Tracking you need to firstly make sure you have a licence for it (or in sandbox it should already be activated for you). You can tell if you have a licence by going to the tabs and finding the Zenkraft Settings tab.

If you don't see the Branded Tracking tab contact sales@zenkraft.com.

Then you will need to follow these steps

2

Create the Public Tracking Site

Go to Setup > Develop > Sites and click on the New Button.

Fill in the fields as you see in the below screenshot.

1. Set the URL that you want to use.

2. Activate the site

3. Open the search button

4. Search for our managed visualforce page called WCBundle 

5. Select it

Click Save to save your site setting.

3

Enable Public Access Settings

Click into your site and then click on the Public Access Settings button.

Ensure that the Shipment, Shipment Info, Preference, Preference Info, Checkpoints objects all have visibility.

4

Enable Tracking Checkpoints

You need to enable tracking checkpoints. To do this go to Setup > Develop > Custom Settings and click on the Manage link for Shipmate General Settings

Click on the Edit link

Make sure that the Record Shipping Checkpoints is set as shown in this screenshot:

5

Create the Email Alert

If you want to let your clients know, via branded email alerts, when there is a change in status of their shipment then follow these sets to set up a tracking notification.

Go to Setup > Create > Workflows & Approvals > Email Updates and click the New Email Alert button.

Fill in the fields as you see in this screenshot:

1. Search for the Email Template

2. Select the Zenkraft MultiCarrier folder 

3. Input "Tracking Email" and click Go.

4. Select the "Tracking Email" that comes up.

5. Under Recipient Type choose "Email Field" and then choose Recipient Email.

6. Click Save.

6

Create a Process Builder to send out the email alerts

Next you need to create the Process Builder task.

Go to Setup > Create > Workflows & Approvals > Process Builder and click the New button.

Give the process builder a name and choose to start the process when a record changes

Fill in the fields as you see in these screenshots:

a). choose the shipment object and start the process when a record is created or edited.

b). set the criteria to be run when the Status Description is changed.

c). under immediate actions, set the action type to be "Email Alerts" and then find the email alert you created earlier.

d). You are then all set. Don't activate the process builder until you have finished this guide and set up the logos, header and colours which you can see in our next step.

7

Add the code to your website

You can now add the Zenkraft Widget code to your website.

Its a simple case of adding the below templated script and then deciding where each of the elements need to go on your website.


    <link href="https://YOUR_FORCE_COM_SITE/tracking?sourcetype=css" rel="stylesheet" />

    <script>
    document.addEventListener("DOMContentLoaded", function (event) {
        createBtrackingElement('zk-tracking', 'status,stage,products,checkpoints', 'a0V1Q00002QoJUV');
        setTimeout(doLoadWcBTracking());
      });
    
      function createBtrackingElement(elementId, sections, trackingId) {
        let element = document.getElementById(elementId);
        if (element) {
          let btrackingElementStr = '';
          element.innerHTML = btrackingElementStr;
        }
      }
    
      function doLoadWcBTracking() {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'https://YOUR_FORCE_COM_SITE/tracking';
    
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
      }
     </script>

There are 3 elements make up the information available to display on the page. These are:

  • status - This section shows the user the latest status of the shipment in text format. For example "Left the FedEx hub" and "Picked up from UPS Drop Off location".

  • stage - This section shows the graphical journey of the shipment, from pick up, to in transit, to out for delivery and finally to delivered.

  • checkpoints - This section shows the checkpoint data of the shipment as it goes through the carrier network.

  • products - This section shows any product data that you might have linked to your shipment, if you are using our pick and pack feature.

We have included the createBtrackingElement helper function so that you can add these sections to any div on the website.


    createBtrackingElement('zk-tracking', 'status,stage,histories', 'a0V1Q00002QoJUV');

  • The first variable determines the ID of the div on your page the sections will appear
  • The second variable determines which of the elements we have specified above will be displayed. You can add all three or position these elements in different divs. Its up to you.
  • The third variable is the salesforce shipment id, now this will usually be populated from the email tracking link that you send out to your customers, and could land your customer on a page with the ID as a url parameter. Such as https://yoursite.com/order-tracking.html?id=a0V1Q00002QoJUV

Below you can also find some more advanced javascript if you want to add some effects such as a loading icon and a fadeIn effect (you will need jQuery on your site to achieve most of thse effects easily).

    
         <script>
            // take the shipment ID from the URL
            const queryString = window.location.search;
            const urlParams = new URLSearchParams(queryString);
            const sfid = urlParams.get('id')

            window.zenkraftWidgetConfig = {
                handlers : {
                    beforeShowUI : (trackingId) => {
                        console.log('beforeShowUI', trackingId);
                        document.getElementById('spinner').style.visibility = 'visible';
                        document.getElementById('zk-tracking').style.display = 'none';
                    },
                    afterShowUI : (data) => {
                        console.log('afterShowUI', data);
                        $('#spinner').hide();
                        $('#zk-tracking').fadeIn("slow");
                    }
                }
            }

            document.addEventListener("DOMContentLoaded", function (event) {
                createBtrackingElement('zk-tracking', 'status,stage,products,checkpoints', sfid);
                setTimeout(doLoadWcBTracking());
            });

            function createBtrackingElement(elementId, sections, trackingId) {
                let element = document.getElementById(elementId);
                if (element) {
                let btrackingElementStr = '';
                element.innerHTML = btrackingElementStr;
                }
            }

            function doLoadWcBTracking() {
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.async = true;
                s.src = 'https://testtracking-developer-edition.na81.force.com/widget';
                var x = document.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
            }
            </script>

            <div id="spinner" style="text-align:center;">
               <img src="/img/zk/docs/loading-transparent.gif">Loading Tracking information
            </div>

            <div id="zk-tracking" > </div>

8

Whitelist your site

The next step is to whitelist your site via Salesforce Setup. Go to Setup > Security Controls > CORS.

Create a new CORS Whitelist and add your domain.


9

Testing

Test the process and please do not hesitate to contact us if you have any queries.