Smart Merge

Dynamically update values in a video from AirTable

Your videos will never go out-of-date when you integrate Smart Merge with a data source like AirTable.

Peter Gerard

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

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
      // you might want to define something to happen if there's an api error
      error: function () {}
$( document ).ready(function() {
});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:
}Code language: JavaScript (javascript)


Introducing SmartListen

Today we’re launching the biggest advance in video since streaming. In a quest to power connectivity through media, we’re introducing SmartListen.

Case Study: SK Interactive

Originally focused on in-person dance lessons for local schools, they partnered with Adventr to create interactive experiences that emulated the feeling of active participation – like that of an in-person dance workshop.

Case Study: Marc Jacobs

Marc Jacobs’ marketing team aims to create fun and engaging content that is reflective of their brand identity.

Create an interactive quiz with real-time results

How to use the Adventr API to save and display user actions in real-time.

An Introduction to Interactive Media

We all know the internet is dynamic, where everything is curated and personalized to your desires. So why shouldn't videos be?

How Adventr is Redefining Video Creation

A word from Founder & CEO, Devo Harris.