Skip to main content

Use dynamic elements in interactive overlays

In this article:

Introduction to Dynamic Elements

Dynamic Elements is a feature available in the interactive overlay panel to pull content from any open API and integrate it into the overlay. Dynamic Elements can also be linked to click-through URLs in element actions.

All elements will allow users to add their own content and mix it with content/action from the API. You can drop in an open API endpoint and immediately assign values to different overlay elements within your overlay.

Some benefits of using Dynamic Elements are:

  • Ingesting dynamic content into your overlays allows you to integrate deeper and connect more fully with your existing systems that manage your data, product, information, etc. 
  • Building a more connected video asset
  • Always present your audience with the most accurate and up-to-date data and information available
  • Plug in any real-time, relevant data from a range of sources to your overlays
  • Scale up your interactive video production and save monumental amounts of time from manually updating your data and content

Get started with Dynamic Elements 

To use Dynamic Elements, you’ll need two things:

  1. An open REST API returning JSON
  2. An interactive video that uses overlays

Once you have those, navigate to the Overlay Editor. You can find the Dynamic Elements button at the top of the page.
dynamic_elements_button.png

Clicking this will open the API manager where you can add, edit, and delete APIs associated with your interactive video. 

To add an API:

  1. Click the Dynamic Elements button. The following modal window will open:
    api_manager.png
  2. Give your API a name
  3. Enter the URL to your API into the API URL field
  4. Click the + Add API button to add the API to your video. 

You can add multiple APIs to your video, or, if your API supports it, filter the API responses by adding filtered API URLs.

Linking your API to elements in your overlay

To connect an overlay element to dynamic data from your API:

  1. Add a new or select an existing element of your overlay design. In the example shown below, a text element has been selected.
  2. In the right-hand menu, under the "Dynamic element" section, toggle the switch that says Link to API to reveal the Dynamic Element settings for that element.  
  3. Select the API you want to link your element with from the API dropdown menu. 
  4. Once you have selected an API, click + Add dynamic data.
    add_dynamic_data.png
  5. This will open the “Select a response” modal window. Here you can see the full API response called from the URL you entered. Use the arrows to reveal values from each of the items. 
    select_a_response.png
  6. Select the response from the API output by clicking the required field directly in the response, then click Confirm. 
  7. In the case of the Dynamic Element feature for text, you’ll see the code shortcut generated in the text container while in edit mode. Note: On elements that are linked to an API, you will see the dynamic elements' symbol displayed alongside the selection box. 
    dynamic_identifier.png
  8. As soon as you exit editing mode for the text element the response will populate with the current data from the API value selected.

Tips and Tricks for using dynamic elements

  • If you don’t have an API or you need an API for a specific task that your current API does not support, look at tools such as Sheetlabs that can turn any spreadsheet into an API. 
  • The Dynamic Element "interactive params" embed option is useful for customizing API queries, by passing certain queryParams you specify to call your dynamic elements APIs. For security reasons, please avoid using the interactive params feature to append API Keys. For more information, please visit our developer documentation.

Related articles