Create your first dynamic image banner

Last updated: 28.03.2025

dynamic image banner

Auto-generate landing page visuals, social media banners, ecommerce sales pages and more with our API and CRM integrations

Step 1: Create a blank template

Use the wafrow dashboard to open up a blank canvas

Step 2: Familiarize yourself with the canva / figma like design interface

canvas interface to build a template

Name your template, decide the width and height and start adding the position of your text / image elements.

Every property that you see on the right side panel e.g., opacity, fill color, background color, font, image URL can be programmatically changed.

Step 3: Save your template Press Mac + S or Ctrl + S on windows or the top right button to save your template. You can observe a link in the bottom left corner below the layers. This is a live preview image URL of your template which you can directly use in all your emails and landing pages.

Step 4: Test dynamic layer properties

Let's say the image preview URL of your template was like this: 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 :-)

The list of properties available to you for text are:

  • text with string value of text
  • fontSize with integer values
  • fontFamily with 6000+ inbuilt fonts. Please use the complete fontFamily, fontWeight and fontStyle combination with values as indicated in this json file to change programmatically. If you need to add custom fonts for your brand, please drop in a note to [email protected]. Will help us prioritize it as a feature.
  • fill with hexcode color value of text fill
  • textBackgroundColor with hexcode color value
  • opacity with decimal value between 0 and 1
  • fontWeight with available options as 400, 600, 700
  • alignment with available options as left, center, right
  • width with integer values. This is the width of the textbox itself

The list of properties available to you for images are:

  • src with url value of an external image. For security reasons, we do not allow SVGs here. Please use png, jpeg or webp images
  • opacity with decimal value between 0 and 1

Important note on billing: Every time these variables are changed, it counts as 1 unique image generated. Depending on your plan and purchased add-ons, there is a limit on the number of unique images you can generate per month.

This unique image once generated is cached on cloudflare CDNs to ensure the image is served closest to where your users are located avoiding a round-trip to our servers.

What Next?