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 pblogages, 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 = "";

  // Get the value to update the NiftyImage with
  // Sheet = 1
  // Row = 2
  // Column = 3
  var val = getCellValue(1, 2, 3);

  sendApiRequest(api_key, niftyUrl, val);

}

function getCellValue(sheetNumber, rowNumber, colNumber) {

  var sheets = SpreadsheetApp.getActiveSpreadsheet().getSheets();
  if(sheets == null){
    return 'Sheet Not Found';
  }

  if(sheets.length < sheetNumber) {
     return 'Sheet Not Found';
  }

  var sheet = sheets[sheetNumber - 1];

  if(sheet == null) {
    return 'Sheet Not Found';
  }

  var cellRange = sheet.getRange(rowNumber, colNumber);

  if(cellRange == null) {
    return 'Row/Cell Not Found';
  }

  return cellRange.getValue();

}

function sendApiRequest(api_key, niftyUrl, val) {

  // 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.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:

URL.png

Step 6.  On lines 10, 11 and 12 you will see the sheet, row, and column coordinates that we will pull your live data from.  By default it is Sheet 1, Row 2, and Column 3, but you can change this to select any cell you want.

Row.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 2, Column 3, 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: