Site icon Dynamic Images for Email

Data Sources: Real-Time Images using any API

NiftyImages

Using our Data Sources feature will allow you to create images that are updated each time they are opened, and are hyper-personalized to your subscribers.  Easily make images that show:

Real-Time Data Sources

You can also use Real-Time Data Sources which allow you to personalize images at the moment a subscriber opens your email, giving you endless personalization potential for images such as:

You can add Data Sources from any internal or third party API in minutes and specify what data to capture, including text, numbers, images and dates. Gather unlimited information from a single API call and easily apply it to your images.

Access to our Data Source feature requires you to subscribe to one of our Enterprise Plus plans.

Let’s take a quick walk through…

Adding an API is simple and requires no development skills. Simply paste in the API link, then click Next to run the request. You will instantly see the results on a successful API call. In this instance we are going to use a live stock price API, getting the results for Twitter with the symbol TWTR.

You can see the symbol highlighted in this API call.

In this example we are going to add two fields from the resulting data that we wish to use in our image, Last Price and Name.

Once you add those fields you can modify the Type and Field Name to your liking, we have changed Last to Current. I will also set this image’s Polling Time to 1 Minute, so that the price is captured from the API and updates our image every minute.

You also have the option of creating Custom Fields, where you can manipulate the data coming from the API.  This allows you to format numbers, use expressions, create True/False fields and images based off conditions or a patter.  See CUSTOM FIELDS at the bottom of the blog to learn more.

Building Images using Data Sources

You can now utilize the Data Source button when designing a Personalized Image to bring in any of the fields you have mapped.  Each field will be it’s own layer giving you options to use a different font/size/color and position for each.

Real-Time Data Sources

To use images in a Real-Time scenario, I will go back to my Data Sources and when I input the API link, I will use [BRACKETS] to define the Real-Time variable. In this case it will be the stock symbol. So instead of inserting TWTR for Twitter, I will input [Symbol].

Once saved, we will ask you for a sample symbol so that we can make a successful API request. Follow the same steps as above to capture the data fields you want and link them to your image.

Now when I go to Live Preview for my image, I will have the ability to insert any Stock Symbol to get an example image. When I put in the symbol CRM for Salesforce, you can see we quickly hit the API and make an image using the data returned.

The image URL that we provide now includes the Symbol variable, with VAR1 as a placeholder. You can use this Image URL in any email service provider and replace the VAR1 with the merge tag that shows your subscribers’ latest stock trade and they will all see a unique image.

Live Weather

Here we use a third party Weather API that uses a customer’s Zip Code to show real time weather.

Live Recommendations

In another example using a company’s internal API, we are able to create images using multiple text fields and image fields to show personalized product recommendations. Using the same technique as above.  You can pass in a unique identifier for your customers and we will apply that data to build a custom image for each subscriber.

Live Updating News

Here we are using a third party API to get the 3 latest articles from Wired.com.  We update the Title, Author and Article Image every 15 minutes for each article.

API Sources

Keep in mind that we can use any API data that you have access to, such as:

Custom Fields

You can also create custom fields based on the available API data.  Here are some examples of different types of Custom Fields.

Text Fields
-Format a number. ($2,500.25)
-Fix casing issues or length of an API Field.
-Create a new Text Field using existing API Fields.

Number Fields
-Round to a specific number of decimal places.
-Use an expression to create a new Number (UserGoal = 100 – {Points})
-Average points per game played: {UserPoints} / {GamesPlayed}
-Use any arithmetic expression: ((12 * 2) / 3) + 7

True/False Fields
-Create a True/False field based off conditions.
-IsGoldMember = (Points is greater than 500)

Image Field
-Create an Image Field based off conditions or a pattern.
-If CountryCode was an API Field, use this to create a flag image:
https://www.countryflags.io/{CountryCode}/flat/64.png

-Weather icon using the Open Weather Map API
http://openweathermap.org/img/w/{Icon}.png

We have also created a short video that will show us building the Live Stock example, so you can see it in action. Should you have any questions, please reach out to us at support@niftyimages.com.

Exit mobile version