Live Image Editing – Using Google Sheets

No comments

Using NiftyImages Live Image editing tool gives you the unique ability to update image text on already deployed email campaigns, landing pages, websites or ad campaigns.

This technique means you can show live scores, changing prices, changing availability, live odds, or modify discounts in real time.

This article will show you how to use Google Sheets to update a Personalized Image each time a particular cell is modified.

Step 1.  Create a New Sheet in Google Sheets.

Step 2.  Click on Tools > Script Editor

Step 3.  Copy and paste the code below into the Code.gs Tab

function updateNiftyImage(e) {
 
 // NiftyImages API Key to use
 var api_key = "";
 
 // Image URL of the Personalized Image you want to update
 var niftyUrl = "";
 
 // Update the row and column that you want to pull text from
 var row = 1;
 var col = 1;
 
 // Get the range of the changed row/colunn
 var range = e.range;
 
 // If this isn't the row/column we want to monitor, exit
 if(range.getColumn() !== row || range.getRow() !== row) {
 return;
 }
 
 // Active Sheet
 var sheet = SpreadsheetApp.getActiveSheet();
 
 // Active Cell
 var cell = sheet.getActiveCell();
 
 // Get the vlaue of the cell
 var val = cell.getDisplayValue();
 
 // Nifty api content body
 var data = {
 "ImageText": val,
 "DefaultText": ""
 };
 
 var options = {
 "method": "PUT",
 "contentType": "application/json",
 "headers": {
 "ApiKey": api_key
 },
 "payload": JSON.stringify(data)
 };
 
 // Execute Request
 var response = UrlFetchApp.fetch("https://api.niftyimages.com/v1/Personalized?url=" + niftyUrl, options)
 
 Logger.log(response);
 
}

Step 4.  Identify the API Key section on row 4 and insert your NiftyImages API Key.

API Key Insert.png

This can be obtained by logging into your NiftyImages account, clicking on Setting > MyAPI Keys and then Add New API Key.  It will be in this format:

xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Final result should look like this:

API Key Insert2.png

Step 5.  Identify the Image URL section on row 7 and insert the URL from your saved NiftyImage.  Do not include any merge tags after the = sign.  Final results should look like this:

Image URL.png

Step 6.  On lines 10 and 11 you will see the row and column coordinates that we will pull your live data from.  By default it is Row 1, Column 1, but you can change this if you wish.

RowColumn.png

Step 7. Click on Edit > Current Project’s Triggers.   Change events to match the settings that show From Spreadsheet and On Edit.

Trigger.png

Step 8.  Save the entire Script and go back to Google Sheets.  You are done!

Now anytime you edit Row 1, Column 1, in that Google Sheet we will update your NiftyImage with that text. You can use this with any existing Sheets your company uses.

Updating NiftyImage text on the fly just got a lot easier!

Please reach out to Support@NiftyImages.com if you have any questions.

* For advanced users, you can make multiple scripts that update a variety of NiftyImages, or pull in multiple cells into a NiftyImage by modifying the script.  Or you can use our API and develop a program that updates your image at any time interval.

Step by Step Video: