Use wafrow images on landing page CMS and your CRM

Last updated: 13.05.2025

There are two ways to personalize images:

1. Use URL parameters

If you have the image template created, the image preview URL of your template is: https://wafrow.com/i/TEMPLATE_ID. You can try attaching a property of the form https://wafrow.com/i/TEMPLATE_ID?firstname[text]=Ravdeep to modify it. firstname is the name of the layer, text is the property you wanted to change and Ravdeep is my name :-)

Using these URL parameters, you can edit any property of the image as defined here e.g., opacity, image src, text.

2. Use named variant campaign id

If you have created a variant using the API or the dashboard as detailed here, you can use the image as

https:wafrow.com/i/campaign.image_template_id/campaign.id

When to use named variants v/s URL parameters?

In 2 cases:

  1. Whenever speed is critical, prefer named variants e.g., on SEM pages. While the images are generated in under 100ms, the named variant is already cached on cloudflare. This ensures upto 3x faster load times.
  2. When security is a concern, use named variants. Given the nature of URL parameters, any person with malicious intent can change messaging manually to say "100% off". While not inherently insecure, it can create edge cases with your customer support

Embed dynamic images and their variants on landing pages

  1. Login and visit account settings. There is a javascript snippet auto-filled with your organization details which you can add to your landing page via google tag manager or directly.

The script is of the form:

function wafrow_init(t,e){const n=document.createElement("script");n.type="text/javascript",n.async=!0,n.src=t,n.setAttribute("orgID",e),n.onload=function(){window.orgID=this.getAttribute("orgID")},document.head.appendChild(n)} wafrow_init(https://wafrow.com/js/experiment.min.js, 'ADD_YOUR_ORGANIZATION_ID');

  1. When adding the image to your landing page, add a class class="wafrow-personalized-images" to make it dynamic. Now, the image will also change with the landing page URL parameters. Depending on your CMS, you can either use liquid syntax for adding personalization data, for instance:

img src="https://wafrow.com/i/TEMPLATE_ID?LAYERNAME[PROPERTY]=VALUE" class="wafrow-personalized-images"

That's it.

All of the properties are documented here for a handy reference. Your CRM typically changes values by using formulae or liquid syntax. For instance, Clay uses dynamic formulae of this form: dynamic formulae with clay

For your landing pages, once the image is embedded and the javascript snippet added, the image will become dynamic. As usual, please don't hesitate to reach out to support at wafrow for any issues.