Progress trackers can be set up using an ESP Merge. Any data that sits within your ESP can be used as long as it is available to be merged into a kickdynamic tag. This might be the number of points a recipeint has and the tier they sit within. 

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. 

The next step is to design the tracker image. Click on the '+' to add a block:

Click on the connect icon and connect the block to the 'URL Parameter' option, give your url parameter a name  (avoid using spaces here) and click done.

Once the block is connected to the parameter, 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. In this example, we have selected the circular progress tracker from the type dropdown.

The tracker can be a full circle or you can chose to start the circle at a set angle. In this example the start angle is -150, the end angle is 150. 

In this example, there is a colour coded block connected to 'tier' (Gold/Silver/Bronze), a status tracker, a textual representation of the number of nights a recipeint has stayed and their goal to reach move to the next tier. 

Adding Other Content

You can add other content into the design such as static text or hosted images 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. 

(Please note, as there is no data, some layers will not be visible in the preview)

 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. Add the URL for the live image and select next. You will see the parameters you added when constructing the image within the tag.

It will generate a tag which looks like this: 

Example

Here is an example of the loyalty program using the tag with parameter merge 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 thetier and nights with these values:

Tier = gold, night = 47

Tier = silver, night = 32

Tier = bronze, night = 15

If you have any questions, contact your Account Manager.