About Configurable Alerts

With Configurable Alerts, you can configure custom consumer alerts. Customize Configurable Alerts with Hypertext Markup Language (HTML). HTML is used to create and structure sections, paragraphs, headings, links, and blockquotes for web pages and applications. All project44 Last Mile powered shipping alerts are editable via HTML. Learn more about this in the Configurable Alerts support article.

This guide includes information on:

• Complete HTML/CSS styling control over all system generated alerts
• Advanced personalization through embedded variable tags in alert content
• Alert specificity across multiple brands, countries, and languages

Default Alert HTML

Find the default HTML used for system generate shipment alerts in this spreadsheet.

NOTE: There are unique tabs for each alert and upgraded template examples can be found in the tabs Email Header Options, Email Footer Options, and Additional Email Body Options.

The images on each tab display the default display for each alert.

NOTE: The variable tag display is placeholder data. Both the default alert preview and the default HTML can be found within the application by navigating to Admin Settings > Consumer Experience > Alerts > Edit Alert.

Variable Tags in HTML

Add Variable Tags to SMS and Email Alerts sent to consumers with Configurable Alerts. Variable tags can be applied to header and footer content as well as Transit Alerts content.

There are two scenarios of data availability related to variable tags:

• Scenario 1: the data is never available: this data is not sent to project44 as part of your data method.
• Scenario 2: the data is not always available: this occurs on a per shipment basis. For example, some shipments may have a Reference Number, some shipments may not.

BEST PRACTICE: Perform a data optimization audit to account for Scenario 1. Work with your company's technical integration point of contact to determine which data method you are using and what data is being sent in relation to the supported variable tags.

Most Common Data Method Option

Variable Tags

Freight vs Parcel Mode

Specify alert content based on the mode of the shipment: freight or parcel. In the HTML example below, additional detail is included for the freight shipment.

Example HTML snippet for Mode Specific Language:

<#if MODE == "PARCEL">
Language for parcels
<#else>
Language for freight 
</#if> 

Example HTML using the Mode Specific Snippet:

<#if MODE == "PARCEL">
Great News! Your Shipment is on it’s way! 
<#else>
Great News! Your Shipment is on it’s way! Keep an eye out for additional instructions on scheduling your delivery.
</#if>

Carrier Specific Language

Specify alert content based on the carrier of the shipment. Please note that if this snippet is used, all carriers should be included. In the example below, only the content for USPS and FedEx is displayed.

Example HTML Snippet for Carrier Specific Language:

<#if CARRIER_NAME == "USPS">
Language for USPS
<#elsif CARRIER_NAME == "FedEx"> 
Language for FedEx Ground
<#else> 
Carrier is ${CARRIER_NAME}
</#if>

Product Variable Tags

Include product information within the body on an alert. As the product related variable tags can contain multiple values, using product information requires a list in the HTML, as shown below. In this example, we are showing Product ID, Product Description, and Product Quantity.

HTML Snippet for Utilizing Product Variable Tags:

<#list PRODUCTS as PRODUCT>
   Id: ${PRODUCT.ID}
   Description: ${PRODUCT.DESCRIPTION} 
   Quantity: ${PRODUCT.QUANTITY}
</#list>

Blank Variable Tags

If a variable tag is used in HTML but the data cannot be found for the variable tag, the default behavior is to show the data as blank in the alert. There are two alternative options as outlined below:

Your delivery appointment with ${CARRIER_NAME} is scheduled for ${APPOINTMENT.DATE} between ${APPOINTMENT.TIME} and ${APPOINTMENT.END_TIME}.

Your delivery appointment with Costco Logistics is scheduled for
${APPOINTMENT.DATE}, <#if ${APPOINTMENT.TIME}?has_content> -
${APPOINTMENT.TIME}<#else>(not yet scheduled)</#if><#if
APPOINTMENT.END_TIME?has_content> - ${APPOINTMENT.END_TIME}<#else>(not yet
scheduled)</#if>.

Your delivery appointment with Costco Logistics is scheduled for
${APPOINTMENT.DATE}, <#if ${APPOINTMENT.TIME}?has_content> -
${APPOINTMENT.TIME}</#if><#if APPOINTMENT.END_TIME?has_content> -
${APPOINTMENT.END_TIME}</#if>.

Increase Brand Logo Size

To upload a Brand Logo, the image must be 100x200. To increase the size of the image, update the width directly in the HTML (example below).

NOTE: If you are using the default template and you increase the image size, you must also increase the width of the border below the image. This edit is necessary on each alert template. Find an example of the HTML for a larger logo and border below.

Before and after increasing Brand Logo size:

Hosted Images

To add images to an alert template or replace icons in the default templates, you must host the images locally and reference them in the HTML of each template. More information on referencing images can be found here.

HTML Snippet for Including Hosted Images:

<img src="url" alt="alternatetext">

See where you can replace the default alert icons in the default HTML code below: