Dynamically update values in a video from AirTable

Want to keep your video up-to-date? By integrating an Airtable Base with Smart Merge, your stats never get stale. No rendering required.

Choose city:

Source Data:

Tutorial – How to use AirTable data in Smart Merge

If you want to use Airtable as a source for Smart Merge overlays in an Adventr, it is fairly easy to do using Airtable’s API with a read-only Personal Access Token.

To get started, go to your Airtable account and create a Personal Access Token. Give it scope of data.records:read and only allow access to the Base you are using for this project.

In this example, I’m using Javascript, so I am going to obtain the data from Airtable and then rewrite the Adventr embed code. If you are merging in data server-side, you can just modify the embed code at page load – you won’t need any javascript.

Warning: if you have other data in the Base that should not be public, you should build a small server-side script that obtains data from Airtable instead of using this Javascript-based approach.

Here’s my function that obtains the data from the Airtable Base:

// this is a global object I'll use to store the data I get from Airtable:
let airtable_data = {};

// I'm using jQuery on this site, but you can code something very similar using the framework of your choice:
function getAirTable() {
  $.ajax ({
      // this is the unique API endpoint for my Base + View
      // I'm collecting up to 10 rows, but you might only need 1
      url: "https://api.airtable.com/v0/appq4hIirMXZHlYCj/tblGt4axC4dXJy8rU?maxRecords=10",
      beforeSend: function (xhr) {
          xhr.setRequestHeader('Authorization', 'Bearer '+PERSONAL_ACCESS_TOKEN);
      },
      success: function (data, textStatus, jqXHR) {
          // I'll save the data to memory
          airtable_data = data['records'];
          // then I call the function that loads the Adventr player
          merge_player(0);
      },
      // you might want to define something to happen if there's an api error
      error: function () {}
  });
}
$( document ).ready(function() {
  getAirTable();
});Code language: JavaScript (javascript)

And this is my function that writes the Adventr player to the page with the data merged in via Smart Merge:

// my function accepts one argument - the row number. 
function merge_player(row) {
  city_data = airtable_data[row]['fields'];
  
  // My Airtable is set up so the column names are the same as my Adventr variables used in Smart Merge
  // So I can easily map the Airtable data into the Smart Merge query format:
  query_string = Object.keys(city_data).map(key => 'custom-' + key + '=' + encodeURIComponent(city_data[key])).join('&');
  
  // this should be the URL from the src="..." part of your embed code
  // Important: it should not include any smart merge variables
  let adventr_player_src = "https://player.adventr.io/index.html?link=https%3A%2F%2Fd252srr1zuysk4.cloudfront.net%2Fclients%2F7%2F13044%2Fpublished%2F7-smart-merge-data-demo-81646084.data";
  
  // create a new iframe:
  let iframe = document.createElement('iframe');

  // set the src with the smart merge query string:
  iframe.src = adventr_player_src + '&' + query_string;
  
  // set the other iframe attributes:
  iframe.setAttribute("frameborder", "0");
  iframe.setAttribute("scrolling", "no");
  iframe.setAttribute("allowfullscreen", "allowfullscreen");
  iframe.setAttribute("allow", "autoplay; fullscreen; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone");

  // then append the iframe wherever you want it:
  document.getElementById('destination-element').appendChild(iframe);
  
}Code language: JavaScript (javascript)