Introduction

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 Zenkraft Settings / Bringg Settings and finding the Branded Tracking tab.

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

Then you will need to follow the below steps.

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.

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.

Enable Managed Package Licence

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

Click on View Users.

Click the Full Name of the User

Click Assign Licenses.

Assign a Zenkraft licence and click on Add.

Enable Tracking Checkpoints

You need to enable tracking checkpoints.

v1.113 and below: Go to Setup > Develop > Custom Settings and click on the Manage link for Zenkraft General Settings

Click on the Edit link

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

v1.114 and above: Go to Zenkraft Settings / Bringg Settings > Other Settings and enable Record Shipping Checkpoints.

Create Branded Tracking Email Template

You can take advantage of the merge fields in Salesforce and pull the shipment information into a customized email template. Go to Setup > Classic Email Templates and create a new template.

Create a letterhead

1. Navigate to Setup > Classic Letterheads and click New Letterhead.
2. Select Available for use.
3. Enter the letterhead label.
4. Select a logo and/or customize the letterhead properties.
5. Edit the remaining sections and save your changes.

Create the email template

Create the email template you want to use for the branded emails. You can create multiple templates for the different tracking stages.

1. Navigate to Setup > Classic email templates and click New Template.
2. Select HTML (using Classic Letterhead).
3. Select the folder where you want to save the template and click Available for use.
4. Enter the template name.
5. Select the Letterhead you created in the previous section.
6. For the Email Layout select Free Form letter.
7. Leave the Encoding as is.

Add merge fields

Using merge fields makes your email template dynamic. You can pull in information such as the recipient's name, shipment details, etc.

Under Formatting Controls you can find the available merge field. You can find all standard and custom objects in this list. If you select "Shipment Fields" you will find the merge fields for the data stored on our Shipment record.

Test your email template

1. Click on Send Test and Verify Merge Fields.
2. Select a Shipment record you want to test with.
3. Check the result.

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 Alerts 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.

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:

1. Choose the Shipment object and start the process when a record is created or edited.

2. Set the criteria to be run when the Tracking Stage is changed.

3. Under immediate actions set the action type to be "Email Alerts" and then find the email alert you created earlier.

4. 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.

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_SECURE_FORCE_COM_SITE/tracking?sourcetype=css" rel="stylesheet" />
			
				<script>
			
				// take the shipment ID from the URL
				const queryString = window.location.search;
				const urlParams = new URLSearchParams(queryString);
				const sfid = urlParams.get('id')
			
				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 = '<wc-btracking tracking-id="' + trackingId + '" sections="' + sections + '"/>';
					  element.innerHTML = btrackingElementStr;
					}
				  }
				
				  function doLoadWcBTracking() {
					var s = document.createElement('script');
					s.type = 'text/javascript';
					s.async = true;
					s.src = 'https://YOUR_SECURE_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 = '<wc-btracking tracking-id="' + trackingId + '" sections="' + sections + '"/>';
							element.innerHTML = btrackingElementStr;
							}
						}
			
						function doLoadWcBTracking() {
							var s = document.createElement('script');
							s.type = 'text/javascript';
							s.async = true;
							s.src = 'https://YOUR_SECURE_FORCE_COM_SITE/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>

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.