Progress trackers can be set up using an API. You can either leverage 1-2-1 Content Automation or standard content automation depending on your API. 

For this emample we will be using the following API output:

 

Login to your account and navigate to the template area in the platform. In the Content Automation tab, click on new template. Give the template a name and then click on the canvas and change the image size to the size required in the html. You can also upload a background image at this stage if required. 

Connect the data source you wish to use to the template:

Once the API is connected, you can now design the tracker image. Click on the '+' to add a block:

Click on the connect icon and connect the block to the correct field in the data. In this example we are using the number of nights somebody has stayed at a hotel. 

Once the block is connected to the correct field, in the right hand menu change the block type to 'Progress':

You will see that the block has now changed to a progress bar.

In the inspector menu, navigate to the progress tab:

 You can now set the progress bar as required. In this example, the bar starts at 1 (1 night stayed) and ends at 30 nights (after 30 nights you go to the next tier).

Use the back color and fore color options to set the bar to match your branding. 

If you would prefer to have a circular bar, in this menu you can select the circular in 'type' this will create a circular bar. You can use the start/end angle options to create a semi-circle type design. 

Adding Other Content

You can add other content into the design from the feed e.g.:

Multiple Tier Design

If you have a program with multiple tiers, repeat the steps above adding a bar for each tier. Use visbility rules to command when each layer is displayed (your Kickdynamic AM can help you with these). 

(Top Tip: Use the blocks tool on the right to turn layers on and off as you design - similar to photoshop!).

 You can also add layers over the image depending on tier and so on. 

Here's an example of a more complex loyalty template:

 

To build out the template, continue to add new blocks and repeat this process. You can choose to connect these to elements of the content source or have static text. 

Creating the Tag

Once you have completed your template, create a tag. If you are using a 1-2-1 content source, the parameters will automatically be added to the tag when you genrate it. If you are using standard content automation + a lookup on the ID, create the tag and select the URL parameter option e.g.:

This will generate the tag like this:

Replace 'value' with the merge code from your ESP for the customer ID. At send, the ESP will mail merge the ID into our tag. 

Example

Here is an example of the loyalty program using the API above. This is controlled from one template. The image is personalized based on points/levels and customer tier for a hotel (it should give you an idea of what's possible through the tool):

You can test by replacing the numerical ID with these values:

1234454

9320964

1230874

4560322

If you have any questions, contact your Account Manager.